return value to caller from jConfirm dialog

Question

I'm using asp.net for developing a site.

It contains an Admin panel, which can delete employees when a cancel image is clicked.

At first i've handled this using confirm, avaliable in javascript, but this shows the title as Message from website.

So, i've planned to use jConfirm plugin

Here is the code that i've used

function confirm_delete() {
      jConfirm("Are you sure you want to delete employee?", "Delete Employee", function (callback) {
                if (callback) {
                    return true;
                } else {
                    return false;
                }
            });

        }

Here is code in gridview:

<ItemTemplate>
<asp:ImageButton ID="imgDelete" OnClick="imgDelete_Click" ImageUrl="~/images/delete.gif" runat="server" OnClientClick="return confirm_delete()"/>
</ItemTemplate>

My problem is that when the imgDelete image is clicked, it goes to confirm_delete() function and it executes entire function atonce, without waiting for confirmation of request from user.

While this is not the case with normal javascript confirm, it waits until request comes from user.

So, when i click on imgDelete employee record is being deleted, without waiting for confirmation. function always returns false even when ok is clicked. How to get rid of this ?

Any help would be greatly appreciated.

Edit

js code of jConfirm:

    // jQuery Alert Dialogs Plugin
//
// Version 1.1
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
//
// Website: http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
//
// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )
// 
// History:
//
//      1.00 - Released (29 December 2008)
//
//      1.01 - Fixed bug where unbinding would destroy all resize events
//
// License:
// 
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC. 
//
(function($) {

    $.alerts = {

        // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time

        verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
        horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
        repositionOnResize: true,           // re-centers the dialog on window resize
        overlayOpacity: .01,                // transparency level of overlay
        overlayColor: '#FFF',               // base color of overlay
        draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
        okButton: '&nbsp;OK&nbsp;',         // text for the OK button
        cancelButton: '&nbsp;Cancel&nbsp;', // text for the Cancel button
        dialogClass: null,                  // if specified, this class will be applied to all dialogs

        // Public methods

        alert: function(message, title, callback) {
            if( title == null ) title = 'Alert';
            $.alerts._show(title, message, null, 'alert', function(result) {
                if( callback ) callback(result);
            });
        },

        confirm: function(message, title, callback) {
            if( title == null ) title = 'Confirm';
            $.alerts._show(title, message, null, 'confirm', function(result) {
                if( callback ) callback(result);
            });
        },

        prompt: function(message, value, title, callback) {
            if( title == null ) title = 'Prompt';
            $.alerts._show(title, message, value, 'prompt', function(result) {
                if( callback ) callback(result);
            });
        },

        // Private methods

        _show: function(title, msg, value, type, callback) {

            $.alerts._hide();
            $.alerts._overlay('show');

            $("BODY").append(
              '<div id="popup_container">' +
                '<h1 id="popup_title"></h1>' +
                '<div id="popup_content">' +
                  '<div id="popup_message"></div>' +
                '</div>' +
              '</div>');

            if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);

            // IE6 Fix
            var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed'; 

            $("#popup_container").css({
                position: pos,
                zIndex: 99999,
                padding: 0,
                margin: 0
            });

            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '<br />') );

            $("#popup_container").css({
                minWidth: $("#popup_container").outerWidth(),
                maxWidth: $("#popup_container").outerWidth()
            });

            $.alerts._reposition();
            $.alerts._maintainPosition(true);

            switch( type ) {
                case 'alert':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /></div>');
                    $("#popup_ok").click( function() {
                        $.alerts._hide();
                        callback(true);
                    });
                    $("#popup_ok").focus().keypress( function(e) {
                        if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
                    });
                break;
                case 'confirm':
                    $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_ok").click( function() {
                        $.alerts._hide();
                        if( callback ) callback(true);
                    });
                    $("#popup_cancel").click( function() {
                        $.alerts._hide();
                        if( callback ) callback(false);
                    });
                    $("#popup_ok").focus();
                    $("#popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                break;
                case 'prompt':
                    $("#popup_message").append('<br /><input type="text" size="30" id="popup_prompt" />').after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /> <input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');
                    $("#popup_prompt").width( $("#popup_message").width() );
                    $("#popup_ok").click( function() {
                        var val = $("#popup_prompt").val();
                        $.alerts._hide();
                        if( callback ) callback( val );
                    });
                    $("#popup_cancel").click( function() {
                        $.alerts._hide();
                        if( callback ) callback( null );
                    });
                    $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
                        if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
                        if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
                    });
                    if( value ) $("#popup_prompt").val(value);
                    $("#popup_prompt").focus().select();
                break;
            }

            // Make draggable
            if( $.alerts.draggable ) {
                try {
                    $("#popup_container").draggable({ handle: $("#popup_title") });
                    $("#popup_title").css({ cursor: 'move' });
                } catch(e) { /* requires jQuery UI draggables */ }
            }
        },

        _hide: function() {
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false);
        },

        _overlay: function(status) {
            switch( status ) {
                case 'show':
                    $.alerts._overlay('hide');
                    $("BODY").append('<div id="popup_overlay"></div>');
                    $("#popup_overlay").css({
                        position: 'absolute',
                        zIndex: 99998,
                        top: '0px',
                        left: '0px',
                        width: '100%',
                        height: $(document).height(),
                        background: $.alerts.overlayColor,
                        opacity: $.alerts.overlayOpacity
                    });
                break;
                case 'hide':
                    $("#popup_overlay").remove();
                break;
            }
        },

        _reposition: function() {
            var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
            var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
            if( top < 0 ) top = 0;
            if( left < 0 ) left = 0;

            // IE6 fix
            if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();

            $("#popup_container").css({
                top: top + 'px',
                left: left + 'px'
            });
            $("#popup_overlay").height( $(document).height() );
        },

        _maintainPosition: function(status) {
            if( $.alerts.repositionOnResize ) {
                switch(status) {
                    case true:
                        $(window).bind('resize', $.alerts._reposition);
                    break;
                    case false:
                        $(window).unbind('resize', $.alerts._reposition);
                    break;
                }
            }
        }

    }

    // Shortuct functions
    jAlert = function(message, title, callback) {
        $.alerts.alert(message, title, callback);
    }

    jConfirm = function(message, title, callback) {
        $.alerts.confirm(message, title, callback);
    };

    jPrompt = function(message, value, title, callback) {
        $.alerts.prompt(message, value, title, callback);
    };

})(jQuery);

Do you check if you have any javascript error the moment the jConfirm is try to load, and there is a throw there. ? Also I do not know jConfirm - but there you have a function, maybe the jConfirm is not wait until a key pressed but immediately returns, so the button is pressed. — Aristos, Jan 28 '13 at 07:10
Then the jConfirm is not wait to answer and return right away. — Aristos, Jan 28 '13 at 09:04
Yes that's what the problem is, it doesn't wait until user clicks ok or cancel — Karthik Chintala, Jan 28 '13 at 09:10
Can you point me the source code of the jConfirm and maybe I find you what to change. — Aristos, Jan 28 '13 at 10:11
I've got it from [here](http://labs.abeautifulsite.net/archived/jquery-alerts/demo/) — Karthik Chintala, Jan 28 '13 at 12:03

score 0 · Answer 1 · edited May 23 '17 at 11:56

This is a very difficult case because the jConfirm is not hold the return of the function, and the javascript did not have any mechanism to sleep until the user return an input.

So you need to work around that with an alternative design. One idea is to keep the onclick event in a variable, totally change it with the jConfirm, and runs it only on OK.

Here is how : http://jsfiddle.net/Pgx3A/7/

$(document).ready( function() 
{
    $(".confirm").each(function () 
    {
     // get the actually click function
    var onclick = jQuery(this).attr('onclick');
    // change it here
    $(this).attr('onclick', null).click(function () 
    {
        jConfirm("Are you sure you want to delete employee?", "Delete Employee",function (callback) 
           {
            if (callback) {
                            // onclick(); can work also, or use eval.
                return eval(onclick);
            } else {
                return false;
            }
        });

        return false;            
    });
    });
});

and the html part:

<script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js" type="text/javascript"></script>
<link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />


<input id="confirm_button" type="button" value="Show Confirm"  onclick="alert('now run...')" class="confirm" />

a similar case, with just use the confirm : https://stackoverflow.com/a/14147955/159270

You can also use alternative design, like to have a hidden run button, and the visible can ask the jConfirm, then the jConfirm run the hidden one.

Of course there still an issue if you won to use the input as the post back him self, because this solution is actually try to firing the next onclick function that exist (if exist) on the input button. Maybe the confirm is a good fast solution, or else you need to design a full flow on how to execute that steps.

Thanks for your effort. But i'm getting `onclick` value as undefined when i see it through debugger in script — Karthik Chintala, Jan 29 '13 at 05:19
My onclick function does a postback and it shows null in debugging — Karthik Chintala, Jan 29 '13 at 05:31
@Karthik well, I see here the onclick. I do not see the class style so been able to selected by the code I have type. — Aristos, Jan 29 '13 at 06:56

return value to caller from jConfirm dialog

1 Answers1