I'm creating a button using tag, and I want to pass the data on it to modal. I've already tried it and It's working. But sometimes the data won't appear (if I console log the variable it return undefined) in the modal, and sometimes it will appear. I'm using laravel blade

Here is my script:

<script>
        $('.edit').on('click', function() {
            $('#edit').modal('show');
        });

        $('#edit').on('show.bs.modal', function(e) {
            let id = $(e.relatedTarget).data('id');
            let name = $(e.relatedTarget).data('name');
            $(e.currentTarget).find('input[id="store_id"]').val(id);
            $(e.currentTarget).find('input[id="store_name"]').val(name);
        });
    </script>

<a href="javascript:void(0)" data-id={{ $store->id }} data-name={{ $store->store_name }} 
   data-target="#edit" data-toggle="modal" >
   <i class="fas fa-pencil-alt edit"></i>
</a>

<div class="modal fade" id="edit" tabindex="-1" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="text-align: center" id="edit">Edit External Store</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('manage-external-store.update', $store->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="id" id="store_id" value="">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="store_name">Store Name</label>
                                    <input type="text" class="form-control" id="store_name" name="store_name" value=""
                                        placeholder="Input new store name">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm float-right mt-2"
                            style="margin-right: 10px">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

Anyone know what's wrong with my code? or maybe there's other way to achieve this? Thanks

CodePudding user response：

Just Try this

<script>
        $('.edit').on('click', function() {
            $('#edit').modal('show');
        });

        $('#edit').on('show.bs.modal', function(e) {
            let id = $(e.relatedTarget).attr('data-id');
            let name = $(e.relatedTarget).attr('data-name');
            $(e.currentTarget).find('input[id="store_id"]').val(id);
            $(e.currentTarget).find('input[id="store_name"]').val(name);
        });
</script>