Laravel 8 – jQuery Modal Data not showing

I’m trying to fetch the location_name on a delete confirmation modal but it’s not returning any results.

Delete Button:

<li>
    <a href="" class="remove" data-id="{{ $location->id }}" data-location_name="{{ $location->location_name }}" data-toggle="modal" data-target="#delete-modal">
    <span data-feather="trash-2"></span></a>
</li>

Delete Modal:

{{-- Modal Delete --}}
<div class="modal-info-delete modal fade show" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-info" role="document">
        <div class="modal-content">
            <form action=" {{ route('worklocations_table.destroy',$location->id) }} " method="post">
            {{ method_field('delete') }}
            {{ csrf_field() }}
            {{-- Modal Body --}}
            <div class="modal-body">  
                <div class="atbd-notice__content">
                    <div class="atbd-notice__top text-center mt-20">
                        <div class="atbd-notice__icon bg-danger">
                            <i class="fas fa-exclamation color-white"></i>
                        </div>
                        <div class="atbd-notice__text">
                            <p>Are you sure you want to delete this location?</p>
                            <div class="mt-15">
                            <h4>Location Name</h4>
                                <input type="text" class="form-control" id="id" name="id">
                                <input type="text" class="form-control" id="location_name" name="location_name">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Modal Buttons --}}
            <div class="modal-footer d-flex justify-content-center">
                <button type="submit" class="btn btn-default btn-squared btn-outline-primary">Yes, delete</button>          
                <button type="button" class="btn btn-default btn-squared btn-outline-light" data-dismiss="modal">No</button>         
            </div>
            
            </form>
        </div>
    </div>
</div>
{{-- Modal Delete - End --}}

JS jQuery:

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this)
        modal.find('modal-body #id').val(id);
        modal.find('modal-body #location_name').val(location_name);
    })

</script>

Result:

Modal deos Not Showing Data

enter image description here

Answer

You have an error with the missing dot (.) for class modal-body when you are using modal.find, for both values in your ‘JS jQuery’ code. I wrote the comment for you to see where it is and why it is happening.

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this)
        // The find function below will not be able to select that 
        // because "modal-body" is not a valid class selector
        modal.find('modal-body #id').val(id);
        modal.find('modal-body #location_name').val(location_name);
    })

</script>

This will be that same code without the error:

<script>

    $('#delete-modal').on('show.bs.modal', function(event){

        var button = $(event.relatedTarget)
        var id = button.data('id')
        var location_name = button.data('location_name')
        var modal = $(this);
        modal.find('.modal-body #id').val(id);
        modal.find('.modal-body #location_name').val(location_name);
    })

</script>

You can find more info on jquery .class selectors here: https://api.jquery.com/class-selector/.

Leave a Reply

Your email address will not be published. Required fields are marked *