CODEWITHSUNDEEP
javascriptjqueryhtmldjango
user8427236
user8427236

Reputation: 297

display id button of popup doesn't function

enter image description here

I have a button that show a popup. I need to know the id of buttons clicked after the popup is closed. The alert is displayed without the id How can I pass the value ID from the first function to use it in the second function?

The button in html with the popup to show :

<p class="stop_inv">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
Stop</p>

The popup in the same html:

<div class="modal fade" id="confirm-stop-automated-popup" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog" style="width:370px;" role="document">
<div class="modal-content">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <form class="form-horizontal" method="post" id="stop_automated">
<div class="modal-body">
     <div class="row">
        <h1 class="center" style="font-size:100%;">
            Do you wish to close them immediately ?
        </h1>
    </div>
    </div>
<div class="modal-footer">

    <button type="button" class="btn btn-primary" name="ok" data-dismiss="modal" id="confirm-stop-button">Ok</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" id="cancel-delete-button">Cancel</button>
  </div>
  </form>
</div>
</div>
</div>

My function in javascript:(the popup is shown but the problem I can't know which button from the popup is clicked and the var info should be passed in the second function to use it. 

$('.automated-orders-list .stop').on('click', function() {
var $button = $(this);
var info = $button.closest('.data').attr('data-order-id');
    $('#confirm-stop-automated-popup').modal('show');
    e.preventDefault();
    return;
});

The second javascript for popup to know which button is clicked doesn't work:

$('#confirm-stop-automated-popup .modal-footer button').on('click', function(event) {

    var $button = $(event.target); // The clicked button

    $(this).closest('.modal').one('hidden.bs.modal', function() {
        // Fire if the button element 
        alert('The button that closed the modal is: ', $button);
    });

});

Upvotes: 0

Views: 564

Answers (1)

Suprabhat Biswal
Suprabhat Biswal

Reputation: 3216

If your main objective is just to display which button is click you can use below code to achieve this. 

$('#confirm-stop-automated-popup .modal-footer button').on('click',
    function() {
        console.log('The button that closed the modal is: ' + this.innerText);
        //alert('The button that closed the modal is: ' + this.innerText);
    });

When you click on a button you already hold that button object. Through this keyword you can read that object properties. You don't need to explicitly find the target button through event.target. 

$('#confirm-stop-automated-popup .modal-footer button').on('click',
    function(event) {
        var $button = this.innerText;

        $(this).closest('.modal').one('hidden.bs.modal', function() {
            // Fire if the button element 
            console.log('The button that closed the modal is: ' + $button);
        });

    });

Upvotes: 1

Related Questions