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

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

Hanan Fahad2

السؤال

<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>

في مشكلة ابغا الرابط هذا يروح يفتح لي بوكس الي طالبته في href 

وبنفس الوقت ابغا يروح لرابط route("edit.store")

كيف اخلية ينفذ الامرين مع بعض 

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

Recommended Posts

  • 0

يجب بعد ظهور 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 قمنا بوضع المسار الذي نود الانتقال إليه . 

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

  • 0

لا يمكن جعل الرابط أن يذهب لمسارين مختلفين , يمكننا حل المشكلة كالتالي, نجعل هذا الرابط يفتح البوكس أو ما يسمى بالمكون 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>

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

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

  • 0

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

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

  • 0
بتاريخ الآن قال 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);
      }
  });
});

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...