Question

im trying to make a popup that comes up to confirm a users action (deleting a row in a table, for example..). aiming at making the popup entirely HTML and Javascript. What i can’t get my head around is how i would make the javascript wait for the users input, but still function for other javascript events. (other click triggered stuff, etc..). What i thought i’d do is something like

if(makePopup("Are you sure?") == true) {
 //bla bla 
}

where makePopup function would create a popup containing the string passed to it, and give the user a yes or no option. somewhere in that function i’d need a loop that would wait for the user to click yes or no. the code just waits at that line until something is done. which is what i want… but theres my problem.. if the code is stuck in a loop there, how can jquery perform other tasks? for example, what if the popup box was draggable? how will the events for these effects get trigged when the code is busy looping at that point..? just cant get my head around a solution right now..

here’s something i have at the moment to test..

        $(document).ready(function(){
        $('a').click(function(){
            makePopup("Wana go to google?",function(){
                window.location.replace("http://www.google.com");
            });
        });
    });

    function makePopup(msg,callback){
        $('body').append("<div class='popup'><p>"+msg+"</p></div>");
    }

still unsure of how to do the confirmation stuff. the popup should include a yes and no button.

Answer 1

you can implement something like this

makePopup("Are you sure?", function {
  //bla bla 
});

which will call your callback only if user sure, after he clicks a button or whatever. Smth like:

function makePopup(msg, callback) {
     $("#sureformmsg").html(msg);
     $("#sureform").show().submit(function() { if (..check..) callback(); });
}

---

Your example:

$(document).ready(function(){
    $('a').click(function(){
        makePopup("Wana go to google?",function(){
            window.location.replace("http://www.google.com");
        });
    });
});

function makePopup(msg,callback){
    $('body').append("<div class='popup'><p id='themsg'>"+msg+"</p></div>");
    $('#themsg').onclick(callback);
}