This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 3 years, 1 month ago.

Passing arguments to modal


  • tomazcar
    Participant

    Posts: 6
    Member Reply #811

    Hi, I want to use a modal like an alert and I the user click on the ok button it will perform a deletion of a specific id

    I’m creating the modal like this

    <button href=”#deleteAttachmentModal” data-toggle=”modal” data-id=”docPk1″ class=”btn btn-xs red”><i class=”fa fa-times” ></i> Delete</button>

    <button href=”#deleteAttachmentModal” data-toggle=”modal” data-id=”docPk2″ class=”btn btn-xs red”><i class=”fa fa-times” ></i> Delete</button>

    <button href=”#deleteAttachmentModal” data-toggle=”modal” data-id=”docPk3″ class=”btn btn-xs red”><i class=”fa fa-times” ></i> Delete</button>

    <div id=”deleteAttachmentModal” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”deleteAttachmentModal” aria-hidden=”true”>
    <div class=”modal-dialog”>
    <div class=”modal-content”>
    <div class=”modal-header”>
    <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”></button>
    <h4 class=”modal-title”>Delete attachment</h4>
    </div>
    <div class=”modal-body”>
    <div id=”deleteAttachmentModalText”>
    <p>
    Are you sure to delete?
    </p>
    <input id=”documentId” type=text>
    </div>
    </div>
    <div class=”modal-footer”>
    <button class=”btn default” data-dismiss=”modal” aria-hidden=”true”>Cancel</button>
    <button id=”deleteNewsModalDelete” data-dismiss=”modal” class=”btn red” onClick=”documentDelete()”>Delete</button>
    </div>
    </div>
    </div>
    </div>

     

    javascript is as follow

    $(‘#deleteAttachmentModal’).on(‘shown.bs.modal’, function(e) {
    var docPk = $(this).data(‘id’);
    alert(“docPk=”+docPk);
    })

     

    but in the alert I alwyas see docPk=undefined

    Can you help me? Thanks

     

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #832

    Hi :),

    Please try to use below code in order to retrieve the data from clicked button:

    var docPk = $(e.relatedTarget).data(‘id’);

    This should fix the issue. For more info please check the official doc here: getbootstrap.com/javascript/#modals

    Thanks.


    tomazcar
    Participant

    Posts: 6
    Member Reply #840

    Thanks! It worked!

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #988

    Great! You are welcome 🙂

You must be logged in to reply to this topic.