Question

Ive been messing with this a while and have tried numerous ways. It still wont work.

function popupConfirm(widtH, texT, callback){ 
var top=(window.innerHeight/2) - 100;
var left=(window.innerWidth/2) - (widtH/2);
var r="<div id='standard-modal' style='width:"+widtH+"px;top:"+top+"px;left:"+left+"px;'>";
        r+="<div id='standard-modal-header' style='width:"+(widtH-4)+"px;'>";
        r+="<strong>&rarr; &nbsp; Icon Box &nbsp; &larr;</strong>";
        r+="</div>";
        r+="<div id='standard-modal-message' style='width:"+(widtH-30)+"px;'>"+texT+"</div>";
            r+="<div id='button_wrapper'><div id='standard-modal-button' class='left_button' onclick='$(\"#standard-modal\").remove();' >CANCEL</div>";

            // following line attaches callback to onclick event        
            r+="<div id='standard-modal-button' class='right_button' onclick='callback();' >CONFRIM</div></div>";
        r+="<div style='clear:both;'></div></div>";

$('body').append(r);
}


popupConfirm(300,'blah blah' , function(){alert("finally");});    

in theory, i want it to do the alert once the user clicks confirm in my popup… any help is appreciated.

its logs to the console ‘callback is not defined’

Answer 1

This is a classic scoping problem, when you append your string to the body then the user clicks on the div the onclick is trying to fire a function called window.callback(). Instead of using inline javascript which isn’t a good idea in general anyways is bind the click handler after the html is created.

...
        // following line attaches callback to onclick event        
        r+="<div id='standard-modal-button' class='right_button'>CONFRIM</div></div>";
    r+="<div style='clear:both;'></div></div>";

    $('body').append(r);
    $('#standard-modal-button').bind('click', callback);
}