Jquery Message working on IE 8 and not working on IE9

Question

Code Behind, VB.Net

btnNext.Attributes.Add("onclick", "Confirmation(this,'" +  GetLocalResourceObject("msg").ToString() + "')")

.ASPX Page

    function Confirmation(source, msg) {
    $(source).easyconfirm({ locale: { title: 'Confirm',  text: msg} });
    $(source).click(function() {
        var result = $(source).attr('tag');
        $('#<%=hidField.ClientID%>').val(result);
    });
}

Jquery Version jquery-1.4.4.min.js jquery-ui-1.8.7.min.js

Beside this i am using jquery.easy-confirm-dialog to display this message box [Yes / No]. jquery.easy-confirm-dialog : http://www.projectshadowlight.org/jquery-easy-confirm-dialog/

hidField : Refer code for asp page above

On IE 8 : Message box gets displayed and it takes me to the respective pages based on what I clicked. [ yes/no]. hidField is used in the code behind to get the yes/no response and show the appropriate page. This works perfectly in IE8

On IE 9 : Message box does not gets displyed and it takes me to a page , as if I have clicked no. hidField value is zero for no. So in case no value is set it thinks the I have clicked no and executes the code for it.

I debugged it on IE9 and what I found was that the Message gets displayed [while debugging only], but it does not stop the execution of code and wait for user response and then move forward. It continues execution while the message is displayed [debug mode, so I was able to see it]. and since default value of hidField is 0 it redirects to the appropriate page.

Any suggestion / reason why this could be happening. Is there other reason other than what I have mentioned above ? Any possible solution

Further Information: I ran Profiler [F12 IE] on IE8 and stopped it as soon as the Message box appeared, it showed event.stopImmediatePropagation getting called.

While on IE9 event.stopImmediatePropagation is not their in the profiler.I debugged , and in jquery.easy-confirm-dialog.js file IE9 event.stopImmediatePropagation is not available, showing it as undefined.

I added a later version of Jquery , from 1.8.2 [earlier 1.4.4] but still the problem is their.

Answer 1

I'm not sure why you get this problem, I have tried the examples on http://www.projectshadowlight.org/jquery-easy-confirm-dialog/ with IE9 and they work as expected. However your usage of the plugin seams a bit strange, easy confirm dialog does its magic when used together with jQuery bound events. Not called directly from click event like in your example. I would suggest moving all your logic into a jQuery bound event like this (pseudo code)

btnNext.Attributes.Add("class", "confirmation");
btnNext.Attributes.Add("title", GetLocalResourceObject("msg").ToString());

And place this in a script-tag somewhere in your header

$(".confirmation").easyconfirm();
$(".confirmation").click(function() {
    var result = $(this).attr('tag');
    $('#<%=hidField.ClientID%>').val(result);
});

Or create a custom function that shows a confirmation dialog box

function Confirmation(source, msg) {
    var dialog = '<div class="dialog confirm">' + msg + '</div>';
    var buttons = {};
    buttons['Yes'] = function() {
        $(this).dialog('close');
        var result = $(source).attr('tag');
        $('#<%=hidField.ClientID%>').val(result);
    };
    buttons['No'] = function() {
        $(this).dialog('close');
    };

    $(dialog).dialog({
        autoOpen: true,
        resizable: false,
        draggable: true,
        closeOnEscape: true,
        width: 'auto',
        buttons: buttons,
        title: 'Are you sure?',
        modal: true,
    });
}