ربط bootstrap modal بالداتابيز

محمد المصري12 · 20 مايو 2021

سلام عليكم

انا عامل صفحة استعرااض لبيانات من الداتابيز و للمزيد عامل زر مودال يفتح عالتفاصيل

صفحة الاستعراض الاستلام شغال فيها هايل و مفيهوش اي مشاكل بفضل الله

ظاهرلي البيانات الرئيسيه عادي

الكود اسم المورد بيانات التوريد

جدول منتظم ليس به مشكلة

لكن مثلا حبيت اضغط على زر عرض التفاصيل ليفتح لي تفاصيل البيان رقم 108 مثلا في نافذة المودال

كل ما بداخل نافذة المودال ما بيقراش غير اول ريكورد بالداتابيز بس

يعني اول id عندي رقم 100

لو ضغطت عرض المزيد يظهرلي بياناته فقط حتى لو ضغطت على عرض المزيد لاي كود اخر

ما هو خطأي و شكرا لكم

<?php

include("includes/db.php");

$title = "الموردين";

?>

<!doctype html>

<html lang="ar">



<head>

    <style>
        .table-responsive{
            overflow-x: visible !important;
        }

        tbody{
            margin-bottom: 2rem;
        }
        .more{
            margin-top: 2rem !important;
        }
        .dropdown-menu-main{
            top: 40px !important;
        }

    </style>

    <?php include("includes/head.php"); ?>
</head>


<body>

    <?php include("includes/loader.php"); ?>

    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

        <?php include("includes/app-header.php"); ?>

        <?php include("includes/ui-theme-settings.php"); ?>

        <div class="app-main">

            <?php include("includes/sidebar.php"); ?>

            <div class="app-main__outer">

                <div class="app-main__inner">

                    <div class="app-page-title">

                        <div class="page-title-wrapper">

                            <div class="page-title-heading">

                                <div class="page-title-icon">

                                    <i class="pe-7s-box2 icon-gradient bg-mean-fruit">

                                    </i>

                                </div>

                                <div>الموردين

                                    <div class="page-title-subheading">إستعراض الموردين

                                    </div>

                                </div>

                            </div>
							                            <div class="page-title-actions">

                                <button type="button" data-toggle="tooltip" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark">

                                    <i class="fa fa-star"></i>

                                </button>

                            </div>

                        </div>

                    </div>
					

<table class="table table-primary table-bordered" dir="rtl">
  <thead>
    <tr class="table-primary" align="center">
      <th scope="col">الكود</th>
      <th scope="col">اسم الشركة</th>
      <th scope="col">بنود التوريد</th>
	      <th scope="col">إعدادات</th>
    </tr>
  </thead>
  
  <tbody>
 <?php

//الاستعلام
$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC");
// تعريف المتغيرات


while ($row = $result->fetch_assoc()) {
//تعريف بنود التوريد
$id = $row['id'];
$factory = $row['facory'];
$supplying_data = '
<select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
<option selected>افتح لمشاهدة بنود التوريد</option> 
';


                            if ($row['sFabric'] == "true")
                                $supplying_data .= '<option>قماش</option> ';
                            if ($row['sAcc'] == "true")
                                $supplying_data .= '<option>اكسسوارات</option>';
                            if ($row['sCarton'] == "true")
                                $supplying_data .= '<option>كرتون</option>';
                            if ($row['sLine'] == "true")
                                $supplying_data .= '<option>خيوط</option>';
                            if ($row['sNeedle'] == "true")
                                $supplying_data .= '<option>إبر حياكة</option>';
                            if ($row['sMac'] == "true")
                                $supplying_data .= '<option>مكن</option>';
                            if ($row['sBag'] == "true")
                                $supplying_data .= '<option>أكياس</option>';

                                                  $supplying_data .= '</select>

';
//نهاية تعريف بنود التوريد	

//الجدول

echo'
  <tr class="table-light" align="center">
      <th scope="row">' . $row['id'] . '</th>
      <td >' . $row['facory'] . '</td>
      <td>' . $supplying_data . '</td>
	     <td align="center">
		 <button class="btn btn-outline-primary m-auto mt-2 more" data-toggle="modal" data-target="#more">عرض المزيد</button>
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=' . $row['id'] . '" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger">حذف</button>
		 
		 </td>
    </tr>';
}
?>

    
	  </tbody>
	  </table>
	  



</div>
</div>

</div>

<?php include("includes/footer.php"); ?>
</div>

<!-- Starting More Modal -->
<!-- Modal -->
  <!-- Modal -->

    <div class="modal fade" id="more" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">بيانات المورد</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <div class="table-responsive text-center">

                        <table class="align-middle mb-0 table table-borderless table-striped table-hover">

                            <thead>

                                <tr>

                                    <th class="text-center">إسم الشركة/المورد</th>

                                    <th class="text-center">إسم صاحب الشركة</th>

                                    <th class="text-center">العنوان</th>

                                    <th class="text-center">بيانات الموردين</th>


                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th class="text-center">
									<?php

									echo $factory;

									?>
									</th>

                                    <th class="text-center oName"></th>

                                    <th class="text-center address"></th>

                                    <th class="text-center ">

                                        <div class="dropdown">
<?php echo $supplying_data; ?>



                                            </div>
                                        </div>

                                    </th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone"></th>

                                    <th colspan="2" class="text-center whatsapp"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email"></th>

                                    <th colspan="2" class="text-center website"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook"></th>

                                    <th colspan="2" class="text-center telegram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter"></th>

                                    <th colspan="2" class="text-center instagram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">بيانات التواصل غير المالك</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone2"></th>

                                    <th colspan="2" class="text-center whatsapp2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email2"></th>

                                    <th colspan="2" class="text-center website2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook2"></th>

                                    <th colspan="2" class="text-center telegram2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter2"></th>

                                    <th colspan="2" class="text-center instagram2"></th>

                                </tr>

                            </tbody>






                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">كود QR</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>


                                    <th colspan="4" class="text-center">

                                        <img id="qr" src="#">

                                    </th>


                                </tr>

                            </thead>

                        </table>

                    </div>

                </div>

                <div class="modal-footer text-center">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>

                </div>

            </div>

        </div>

    </div>
<!-- Endind More Modal -->

  <?php include("includes/js.php"); ?>
  


</body>



</html>

محمد صقر3 · 20 مايو 2021

لأنه دائما قيمة ال modal تاخد اول قيمه تحتاج عند الضغط علي زر المزيد تقوم بتمرير بيانات الصف اللي تم الضغط عليه مع هذا الرابط وباستخدام الجافا سكربيت او JQuery تقوم بالحصول علي القيم الخاصه بهذا الصف وتحديث قيم ال modal

هل تستخدم ملفات جافاسكربت للقيم بهذه الوظيفه يمكنك إضافتها مع الكود لمعرفة الخطاء وإذا ما بتستخدم تحتاج تضيف هذا الشيء

هنا تقوم بتمرير الداتا الخاصه بكل صف مع زرار المزيد

//الجدول

echo'
  <tr class="table-light" align="center">
      <th scope="row">' . $row['id'] . '</th>
      <td >' . $row['facory'] . '</td>
      <td>' . $supplying_data . '</td>
	     <td align="center">
           // هنا تقوم بتمرير factory, id, supllying_data مع هذا الرابط
		 <button class="btn btn-outline-primary m-auto mt-2 more" 
                 data-factory="<?php echo $row['facory']; ?>"
                 data-id="<?php echo $row['id']; ?>"
                 data-supllying="<?php echo $supplying_data; ?>"
                 data-toggle="modal" data-target="#more">عرض المزيد</button>
           
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=' . $row['id'] . '" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger">حذف</button>
		 
		 </td>
    </tr>';
}
?>

ثم تقوم باستخدام JQuery لتحديث قيم العناصر في ال modal بعد اعطاء id للعناصر ال modal

 <th class="text-center" id="factory"> <?php echo $factory; ?> </th>

supplying data

<div class="dropdown" id="suplying-data"> <?php echo $supplying_data; ?> </div>

$(document).on("click", ".more", function (e) {

	e.preventDefault();

	var that = $(this);

	const factory = that.data('factory');
	const suplying = that.data('suplying');
	$("#factory").val(factory);
	$("#suplying-data").val(suplying);
	

	$(that.attr('href')).modal('show');
});

تم التعديل في 20 مايو 2021 بواسطة محمد صقر3

Adnane Kadri · 20 مايو 2021

و ذلك لأنه لا يوجد إلا مودل واحد و العديد من الأزرار التي تقوم بإظهار هذا المودل .

يمكنك إنشاء مودل خاص بكل مورد عن طريق إدخال عنصر الـ modal داخل الدور while و تكراره كذا مرة .

ليس هذا فقط , بل تحتاج أيضا تعريف كل مودل بمعرف id فريد و ربطه بالزر المرافق حتى تتم التفاعلية وفق المطلوب , قد نحتاج للـ id الخاص بالمورد القادم من قاعدة البيانات حتى نقوم بإنشاء معرف فريد خاص بكل مودل .

و سيكون ذلك كفيلا بحل المشكل .

مثال عملي :

 <?php

//الاستعلام
$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC");
// تعريف المتغيرات


while ($row = $result->fetch_assoc()) {
    //تعريف بنود التوريد
    $id = $row['id'];
    $factory = $row['facory'];
    $supplying_data = '
    <select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
    <option selected>افتح لمشاهدة بنود التوريد</option>';


                            if ($row['sFabric'] == "true")
                                $supplying_data .= '<option>قماش</option> ';
                            if ($row['sAcc'] == "true")
                                $supplying_data .= '<option>اكسسوارات</option>';
                            if ($row['sCarton'] == "true")
                                $supplying_data .= '<option>كرتون</option>';
                            if ($row['sLine'] == "true")
                                $supplying_data .= '<option>خيوط</option>';
                            if ($row['sNeedle'] == "true")
                                $supplying_data .= '<option>إبر حياكة</option>';
                            if ($row['sMac'] == "true")
                                $supplying_data .= '<option>مكن</option>';
                            if ($row['sBag'] == "true")
                                $supplying_data .= '<option>أكياس</option>';

                              $supplying_data .= '</select>';
//نهاية تعريف بنود التوريد	

//الجدول
echo'
  <tr class="table-light" align="center">
      <th scope="row">' . $row['id'] . '</th>
      <td >' . $row['facory'] . '</td>
      <td>' . $supplying_data . '</td>
	     <td align="center">
		 
         <button class="btn btn-outline-primary m-auto mt-2 more" data-toggle="modal" data-target="#more_'.$row['id'].'">عرض المزيد</button>
         
         <!-- قم بوضع المودل هنا -->
         <div class="modal fade" id="more_'.$row['id'].'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         </div>
         
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=' . $row['id'] . '" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger">حذف</button>
		 
		 </td>
    </tr>';
}
?>

و عوضا عن طباعة العناصر بإستعمال echo يمكنك كتابتها مباشرة كعناصر HTML هكذا :

 <?php

//الاستعلام
$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC");

# بداية الدور 
while ($row = $result->fetch_assoc()) {
  
  $id = $row['id'];
    $factory = $row['facory'];
    
    //تعريف بنود التوريد
    $supplying_data = '
    <select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
    <option selected>افتح لمشاهدة بنود التوريد</option>';

         if ($row['sFabric'] == "true")
           $supplying_data .= '<option>قماش</option> ';
         if ($row['sAcc'] == "true")
           $supplying_data .= '<option>اكسسوارات</option>';
         if ($row['sCarton'] == "true")
           $supplying_data .= '<option>كرتون</option>';
         if ($row['sLine'] == "true")
           $supplying_data .= '<option>خيوط</option>';
         if ($row['sNeedle'] == "true")
           $supplying_data .= '<option>إبر حياكة</option>';
         if ($row['sMac'] == "true")
           $supplying_data .= '<option>مكن</option>';
         if ($row['sBag'] == "true")
           $supplying_data .= '<option>أكياس</option>';

         $supplying_data .= '</select>';
        //نهاية تعريف بنود التوريد	
//الجدول
?>
  <tr class="table-light" align="center">
      <th scope="row"> <?php echo $row['id']; ?></th>
      
      <td ><?php echo $row['facory']; ?></td>
      
      <td> <?php echo $supplying_data; ?></td>
	  
      <td align="center">
		 
        <button class="btn btn-outline-primary m-auto mt-2 more" 
                data-toggle="modal" 
                data-target="#more_<?php echo $row['id']; ?>">
                عرض المزيد
        </button>
         
         <!-- قم بوضع المودل هنا -->
         <div class="modal fade" 
              id="more_<?php echo $row['id']; ?>" 
              tabindex="-1" 
              role="dialog" 
              aria-labelledby="exampleModalLabel" 
              aria-hidden="true">
         </div>
         
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=<?php $row['id']; ?>" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
        
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger">حذف</button>
		 
	  </td>
    
    </tr>

<?php
} # نهاية الدور 
?>

كما يمكنك إنشاء ملف خارجي بإسم supplier_row و تضمينه في الدور ليتم إنشاءه كذا مرة وفق البيانات المعطاة على هذا النحو :

سيحمل الملف supplier_row المحتويات التالية :

<?php 
    $id = $row['id'];
    $factory = $row['facory'];
    
    //تعريف بنود التوريد
    $supplying_data = '
    <select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
    <option selected>افتح لمشاهدة بنود التوريد</option>';

         if ($row['sFabric'] == "true")
           $supplying_data .= '<option>قماش</option> ';
         if ($row['sAcc'] == "true")
           $supplying_data .= '<option>اكسسوارات</option>';
         if ($row['sCarton'] == "true")
           $supplying_data .= '<option>كرتون</option>';
         if ($row['sLine'] == "true")
           $supplying_data .= '<option>خيوط</option>';
         if ($row['sNeedle'] == "true")
           $supplying_data .= '<option>إبر حياكة</option>';
         if ($row['sMac'] == "true")
           $supplying_data .= '<option>مكن</option>';
         if ($row['sBag'] == "true")
           $supplying_data .= '<option>أكياس</option>';

         $supplying_data .= '</select>';
        //نهاية تعريف بنود التوريد	 
?>
  <tr class="table-light" align="center">
      <th scope="row"> <?php echo $row['id']; ?></th>
      
      <td ><?php echo $row['facory']; ?></td>
      
      <td> <?php echo $supplying_data; ?></td>
	  
      <td align="center">
		 
        <button class="btn btn-outline-primary m-auto mt-2 more" 
                data-toggle="modal" 
                data-target="#more_<?php echo $row['id']; ?>">
                عرض المزيد
        </button>
         
         <!-- قم بوضع المودل هنا -->
         <div class="modal fade" 
              id="more_<?php echo $row['id']; ?>" 
              tabindex="-1" 
              role="dialog" 
              aria-labelledby="exampleModalLabel" 
              aria-hidden="true">
         </div>
         
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=<?php $row['id']; ?>" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
        
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger">حذف</button>
		 
	  </td>
    
</tr>

ثم تضمين الملف بالملف الرئيسي على هذا النحو :

<?php

$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC"); 

while ($row = $result->fetch_assoc()) {
    include('supplier_row.php');
} 
?>

تحديث :

قد يحدث بعض التداخل كونك تستعمل الدور داخل جدول بالفعل من جهة و تستعمل وسوم جداول من مثل tbody و theader داخل عنصر المودل , للتخلص من هذا التداخل قم بإستبدال الوسوم الخاصة بالجدول داخل المودل بوسوم تقسيمات عادية div , ولا بأس بترك الكلاسات مثل ما هي حتى لا تخسر التنسيق أو تضطر إلى إعادته .

ربط bootstrap modal بالداتابيز

السؤال

محمد المصري12

2 أجوبة على هذا السؤال

Recommended Posts

محمد صقر3

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية