Question 255568 in Laravel Question posted in
The official Laravel Documentation can be found here.

LARAVEL: How to display data from bootstrap modal?

I’m having problems with displaying data from modal. It works outside the modal but inside modal it only iterates 1 data.

@foreach ($addresses->sortByDesc('status') as $address)   
                                        <div class="col">
                                            <div class="row g-0 flex-column">{{-- EDIT --}}
                                                <div class="col-12 col-lg-8 col-xl-7 col-xxl-5 d-flex justify-content-between">

                                                    <p style="font-size: 14px;font-weight: bold; visibility: {{ $address->status === 'default' ? 'visible' : 'hidden' }};">Default Delivery Address</p>                                                   
                                                    <button class="btn d-inline-flex" type="button" style="font-size: 14px;text-decoration: underline;padding: 0px;font-weight: bold;height: 21px;" data-bs-target="#edit-delivery-address-modal" data-bs-toggle="modal">Edit</button>
                                                    <div class="modal fade" role="dialog" tabindex="-1" id="edit-delivery-address-modal">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                 
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h4 class="modal-title">Edit Delivery Address</h4>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>

                                                                <div class="modal-body">

I want to display the addresses’ relative datas when I click their Edit buttons. I tried ChatGPT’s advice in putting data- in the Edit button but I’m not familiar with it so I don’t know how it works. Is there a way to transfer data to modal without using js or ajax?

Tags:

2

Answers


  1. 0

    There is no way to do this without JS.
    Blade is a template language, it renders only once when the page is loaded.

    Consider to use Livewire package to do this dynamically or use some other JS framework or library.

    Login or Signup to reply.
  2. 0

    To accomplish this task, JavaScript will be required in the shape of LiveWire, which seamlessly integrates with Laravel and simplifies the implementation process.

    <!-- Example Bootstrap Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="modal-body">
                    @if($modalData)
                          <!-- Display your data here -->
                    @else
                          <p>No data available</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

    You can wire up the modal to open when a user clicks on a specific element.

    Open Modal

    In livewire class this property bind with this function

    public function loadData()
{
    // Fetch data and assign it to the $this->modalData property
    $this->modalData = // Fetch your data here
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search