اذهب إلى المحتوى
  • 0

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

محمد المصري12

السؤال

سلام عليكم

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

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

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

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

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

لكن مثلا حبيت اضغط على زر عرض التفاصيل ليفتح لي تفاصيل البيان رقم 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

لأنه دائما قيمة ال 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');
});

 

تم التعديل في بواسطة محمد صقر3
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

يمكنك إنشاء مودل خاص بكل مورد عن طريق إدخال عنصر الـ 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 , ولا بأس بترك الكلاسات مثل ما هي حتى لا تخسر التنسيق أو تضطر إلى إعادته . 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...