jQuery dialog buttons rebinding

Question

I have a simple jQuery dialog box that has an html input inside it. There are two buttons Save/Cancel on the dialog box. When the user hits Save, I validate if he has provided any input in the input box. If he hasn't, I report the error on a new line in the dialog box and wait for him to provide input. But when he hits Save again, nothing happens. How can I re-bind the Save button once it has been used? Thanks!

    var message = "Please provide Phone number."
    var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
    var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'>Phone number field cannot be empty</div>" + "</div>";
    $(this).append(dialogHtml);
    $("#confirmPhoneNumber").css("font-size", "70%");
    $("#confirmPhoneNumber").dialog({
        resizable : false,
        modal : true,
        title : 'Save Phone',
        buttons : {
            'Save' : function () {
                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                } else {
                // Make AJAX call
                }
            },
            'Cancel' : function () {
                $(this).dialog('close');
            }
        }
    });

I'm using FF 3.6. I think this was my fault. This had worked for the very first time I triggered the dialog. Turns out I was not removing the dialog's div which contained the input box. So when I popped the dialog again and clicked Save, it was reading the stale value from the input box created for the previous dialog invocation. I don't remember why I wrongly assumed the button is not working anymore. A simple alert statement would've proved it was right. Now I intercept the dialog's close event so as to remove the dialog's div. This way the input box get created fresh everytime. Thanks all! — George Burdell, Mar 18 '11 at 21:10

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

Are you testing with IE? Are you getting any errors on the page?

If you take a look (I'm testing with chrome) here it works, it will allow you to press the button, it will show the error, enter something, click again and it alerts. So the button is still working.

However, IE doesn't work - it shows an error......trim() isn't a supported function by IE. So you can use jQuery's .trim() instead:

$("#confirmPhoneNumber").dialog({
    autoOpen: true,
    resizable: false,
    modal: true,
    title: 'Save Phone',
    buttons: {
        'Save': function() {
            // Phone number must be provided
            if ( $.trim($("#phoneNum").val()).length == 0) {
                 $("#dialogError").show();
            } else {
                alert('Got a number');
            }
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});

Try again here it works with IE.

Take a look at Trim in javascript not working in IE.

I'm testing in FireFox 3.6 though. Also, I don't want to use alert since it will bring its own popup. Thanks for the reply. — George Burdell, Mar 18 '11 at 17:55
Ignore my comment about alert. I guess you used it just for demo. — George Burdell, Mar 18 '11 at 18:37

Olgun Kaya · Accepted Answer · 2011-03-18T09:58:58.110

actually the code is working. only thing here is you can't realize it because of miss-configured test scenario ( at least I think so, LoL )

var message = "Please provide Phone number."
var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
var dialogHtml = "<div id='confirmPhoneNumber'>"  + message + phoneNum + "<div id='dialogError' style='display:none'></div>" + "</div>";
$('body').append(dialogHtml);
$("#confirmPhoneNumber").css("font-size", "70%");
$("#confirmPhoneNumber").dialog({
    resizable : false,
    modal : true,
    title : 'Save Phone',
    buttons : {
        'Save' : function () {
            // Phone number must be provided
            if ($.trim($("#phoneNum").val()).length == 0){
                $("#dialogError").html("error occured, fill the textfield please");
                $("#dialogError").show();
            } else {
                $("#dialogError").html("now it is working " + $("#phoneNum").val());
                $("#dialogError").show();
            // Make AJAX call
            }
        },
        'Cancel' : function () {
            $(this).dialog('close');
        }
    }
});

if you test this, you will see that there is no unbinding at all.

EDİT : re-configured the if check in save button. hope this will work.

The problem actually isn't with the button being unbound - it's the fact there is an error in the script for IE. So when it occurs the script stops all together, making it seem like the button is no longer bound. `.trim()` isn't a function in IE. — Scoobler, Mar 18 '11 at 09:41
yep that's right. I misunderstood. what he need to do is : change the if check to : if ($.trim($("#phoneNum").val()).length == 0) — Olgun Kaya, Mar 18 '11 at 09:55

score 0 · Answer 3 · answered Mar 18 '11 at 08:44

0

You can handle validation process like this

           'Save' : function () {
                var valid = true;

                // Phone number must be provided
                if ($("#phoneNum").val().trim().length == 0) {
                    $("#dialogError").show();
                    valid = false;
                }
                //any other validations


                if (valid === true) {
                // Make AJAX call
                }
            },

so validation could be called more than once, and if all valid - form'll be processed

answered Mar 18 '11 at 08:44

Dmitry Evseev

11,533
3
34
48

this doesn't remotely answer the question - it's just different logic within the event handler. – Alnitak Mar 18 '11 at 08:51
emm.. sorry, but i can't think why one need to rebuild `save` handler after first validation? what if the second try to fill form was unsuccessfull too? – Dmitry Evseev Mar 18 '11 at 08:59
you _don't_ have to rebuild the button handler, they're not unbound after each press. there must be some other bug. – Alnitak Mar 18 '11 at 09:00

score 0 · Answer 4 · answered Mar 18 '11 at 08:46

0

you can use the 'live' method to bind to the control. but this is generally used in case new controls are dynamically created.

answered Mar 18 '11 at 08:46

Kinjal Dixit

7,777
2
59
68

Alnitak · Answer 5 · 2011-03-18T08:57:15.773

0

jQuery UI doesn't unbind the click handler on a dialog button once it's pressed.

See a demo at http://jsfiddle.net/MwNJd/2/

You must have something else going on.

edited Mar 18 '11 at 08:57

answered Mar 18 '11 at 08:50

Alnitak

334,560
70
407
495

jQuery dialog buttons rebinding

5 Answers5