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

يجب بعد ظهور modal  و حينها عند الضغط على زر موافق أن يقوم بتوجيهه إلى المسار الذي تريدينه مثل 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('') }}" method="POST">
      @csrf
      @method('PUT')
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

لاحظي أنه قمنا بإحاطة 

<div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
</div>

بوسم form و في خاصية action قمنا بوضع المسار الذي نود الانتقال إليه . 

لا يمكن جعل الرابط أن يذهب لمسارين مختلفين , يمكننا حل المشكلة كالتالي, نجعل هذا الرابط يفتح البوكس أو ما يسمى بالمكون modal , ثم في داخل المكون modal يمكننا اضافة عنصر form يوجد فيه الحقول التي نريد ادخال البيانات فيه , وعند عمل ارسال لهذه البيانات يتم ارسالها للمسار  route("edit.store") كالتالي

<a href=".bs-example-modal-xl" class="btn  btn-info waves-effect waves-light" data-cat="{{ $Categories->id}}"
   data-toggle="modal"
   <span class="btn-label"><i class="mdi mdi-wrench">
</i>
</span>Edit
</a>

<div class="modal fade" id="bs-example-modal-xl" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">...</div>
          <div class="modal-body">
            <form action="{{route('edit.store')}}" method="post">...</form>
                          ^^^^^^^^^^^^^^^^^^^^^^^^
          </div>
    </div>

حاولي فعل ذلك وأخبرينا بالنتيجة

ماارده هو يرسل معرف لابحث عنه في قاعدة البيانات ثم يرسلها للبوكس كافه البيانات لاستطيع التعديل بناء على العنصر الذي تم اختياره 

بتاريخ الآن قال hanan fahad11:

ماارده هو يرسل معرف لابحث عنه في قاعدة البيانات ثم يرسلها للبوكس كافه البيانات لاستطيع التعديل بناء على العنصر الذي تم اختياره 

إذا كنتي تريدين تعديل نموذج ما أو بيانات لعضو ما عن طريق modal فالامر كالتالي سوف تقومين بوضع خاصية data-id ووضع id العضو الذي تريدين تعديله في هذه الخاصية 

<a href=".bs-example-modal-xl" id="editName" data-id="1" class="btn  btn-info waves-effect waves-light" data-cat="{{ $Categories->id}}"
   data-toggle="modal"
   <span class="btn-label"><i class="mdi mdi-wrench">
</i>
<!-- Button trigger modal -->
<a href="#" type="button" class="btn btn-primary" id="editName" data-id="1" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</a>

و modal كالتالي

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('user.edit') }}" method="POST">
      @csrf
      @method('PUT')
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="user_id" name="user_id" value="">
        <input type="text" name="name" id="name" value="" class="form-control">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" id="submit" class="btn btn-primary">Save changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

ثم من خلال ajax يمكننا جلب معلومات العضو و زرعها في modal كما في الكود التالي 

$('body').on('click', '#editName', function (event) {

    event.preventDefault();
    var id = $(this).data('id');
    $.get('user/' + id + '/edit', function (data) {
         $('#user_modal').modal('show');
         $('#user_id').val(data.data.id);
         $('#name').val(data.data.name);
     })
});

ثم عند الضغط على زر modal الخاص بالتعديل نقوم بتحديث البيانات باستخدام ajax كما في الكود التالي 

$('body').on('click', '#submit', function (event) {
    event.preventDefault()
    var id = $("#user_id").val();
    var name = $("#name").val();
   
    $.ajax({
      url: 'user/' + id,
      type: "POST",
      data: {
        id: id,
        name: name,
      },
      dataType: 'json',
      success: function (data) {
          $('#exampleModal').modal('hide');
          window.location.reload(true);
      }
  });
});