How can I send parameter in modal bootstrap?

Question

My view is like this :

@foreach($product->photo_list as $i => $photo)
    <a href="javascript:" class="text-danger delete"
       data-toggle="modal"
       data-target="#modal-delete-image"
       data-photo="{{ json_encode($photo) }}" 
       data-product_id="{{ $product->id }}"
    >
        <span class="fa fa-trash"></span>
    </a>
@endforeach

My modal is like this :

<bs-modal id="modal-delete-image" v-cloak>
    <h4 slot="title" class="modal-title">...</h4>
    <div slot="body" class="modal-body">
       ...
    </div>
    <div slot="footer" class="modal-footer">
        <button type="button" class="btn btn-danger" id="confirm-delete">
            Delete
        </button>
    </div>
</bs-modal>

My javascript is like this :

$('.delete').click(function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    $('#confirm-delete').data('photo', photo, 'productId', productId); //set the data attribute on the modal button
});

$('#confirm-delete').click(function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    console.log(photo)
    console.log(productId)
    $.ajax({
        ...
    });
});

When the code executed, the result of console log is

undefined

How can I solve this problem?

Answer 1

you can use this

<button data-photo="photo" data-photo_id="photo-id" type="button" class="btn btn-danger" id="confirm-delete">
    Delete
</button>

$('.delete').on("click",function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    $('#confirm-delete').data('photo', photo);
    $('#confirm-delete').data('productId', productId);
});

$('#confirm-delete').on("click",function(){
    var photo = $(this).data('photo');
    var productId = $(this).data('product_id');
    console.log(photo)
    console.log(productId)
    $.ajax({
        ...
    });
});