CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
Sourav Chakraborty
Sourav Chakraborty

Reputation: 45

Modal popup is not working properly, its calling a function multiple times - click event handler runs several times

here is the JSP code for modal

<div class="modal hide fade" id="showDupZip">
    <div class="modal-header portlet box bd-grey ">

            <div class="portlet-title">
                <button type="button" class="close" id="closeModal1" data-dismiss="modal" aria-hidden="true"></button>
            </div>

    </div>
    <div class="modal-body">
        <BUTTON class="btn login-blue"
            id="yes" type="button" data-dismiss="modal">Yes</BUTTON>
            <BUTTON class="btn login-blue"
            id="cancel" type="button" data-dismiss="modal">Cancel</BUTTON>
    </div>
</div>

Here is the java script code

function showModal1(r1,r2,r3){
    $('#showDupZip').removeClass('hide');

    $('#showDupZip').modal({
        backdrop : 'static',
        keyboard : false
    }).on('click', '#yes', function() {
        $('#loading-overlay1').show();
        $('#loading-message1').show();
        checkMaxCount(r1,r2,r3);
        }

    });
}

    function checkMaxCount(r1,r2,r3)
    {
      //some code here
    }

so, clicking "yes" button should call the checkMaxCount() function.

I am telling one scenario

suppose this popup came and i clicked cancel button twice and both the times the popup closed but third time I clicked yes button then the checkMaxCount() function executed thrice. I gave alert in that function and the alert came for three time. Means every time the modal is coming, it is executing that function that many time after clicking YES button. I am not getting why this problem is coming. The checkMaxCount() function should execute only once.

Upvotes: 1

Views: 1005

Answers (1)

JotaBe
JotaBe

Reputation: 39025

The problem is that you're subscribing to the event everytime you open the modal. So, it is handled the same number of times it's been opened.

You should subscribe the click handler, i.e call to .on('click',...) only once. To do so, move it outside of the showDialog function. (Don't worry, it's a classical mistake that many people make).

As stated in the comment, passing the r1, r2, r3 values to the handler is no longer possible if you move the event registration outside the function. To be able to use those values in the handler, you can extract them to variables in an outer scope, so that they can be modified from that scope, and access from the handler's inner scope:

// Define the vars in outer level

var r1,r2,r3;

$('#showDupZip').on('click', '#yes', function() {
    $('#loading-overlay1').show();
    $('#loading-message1').show();
    // Use them here
    checkMaxCount(r1,r2,r3);
}

function showModal1(){
    $('#showDupZip').removeClass('hide');

    $('#showDupZip').modal({
        backdrop : 'static',
        keyboard : false
    });
});

With this change, you simply need to set the vars before calling show modal,instead of passing them as parameters.

var r1=1; var r2=2; var r3=3;
showDialog();

Of course this is the simplest way to explain how to do it. But ypu should give your code a better structure, for example including it inside and IIFE to avoid polluting the global context.

(function() {
   var r1,r2,r3;
   // The rest of the code here
}());

Wihtout seeing more code is difficult to give you a better advice.

Upvotes: 1

Related Questions