7

I am creating a modal JQuery UI Dialog box and storing the result in the $dialog variable. The buttons change depending on which operation is chosen, so I set the buttons using a function call like this:

$dialog.dialog( "option", "buttons", [
    {
        text: "Ok",
        click: function() { close_project(); }
    },
    {
        text: "Cancel",
        click: function() { ($this).dialog("close"); }
    }
]);

This displays two buttons with the text '0' and '1' in them instead of 'Ok' and 'Cancel'. Also, the click functions do not appear to be working.

I've gone over this a number of times and the syntax looks correct. What am I doing wrong?

1
  • 1
    Your syntax does appear to be correct. Is there other code modifying the dialog? Mar 7, 2011 at 22:18

7 Answers 7

6

jQuery UI help for this says method you are using is for modal already initialized - http://jqueryui.com/demos/dialog/#option-buttons Is this the case?

If not, try this one and then experiment how it is different or suitable for your solution:

$dialog.dialog({ buttons: [
    {
        text: "Ok",
        click: function() { close_project(); }
    },
    {
        text: "Cancel",
        click: function() { $(this).dialog("close"); }
    }
]});
3

You can try the syntax this way:

$dialog.dialog( "option", "buttons", {
       "Ok": function() { close_project(); },
       "Cancel": function() { $(this).dialog("close"); }
    }
);
1

I had the same "0 1" button label problem. I "needed" the array syntax for buttons instead of the object syntax because I wanted to set the button id (my code looked like rdamborsky's with ids set and still didn't work). I looked at this question:

jQuery UI Dialog Button Icons

And modified the attempted code in the question. For your specific example:

$dialog.dialog({ buttons: {
        "Ok": function() { close_project(); },
        "Cancel": function() { $(this).dialog("close"); }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').attr("id", "cancel_button");
        $('.ui-dialog-buttonpane').find('button:contains("Ok")').attr("id", "ok_button");
}});

Incidentally, I notice a ($this) when I think you mean $(this) in your code. That may screw up one click. The other click may have a problem (but only if this is somehow in an ajax request): if you are in IE 7 or 8, make a slight change to circumvent an IE (ajax) scoping issue. Before your $dialog.dialog code, do a "window.close_project = close_project;" and then call "window.close_project();" in the click function.

FYI, If you don't need to change the id or class or anything else, drop the "open" and just use the object syntax for the buttons. Or, just use amurra's answer.

1

It seems like the setter is not working. What I did instead is full initialization of the dialog with all options set at once:

<script type="text/javascript">
    $("#DiscardDialog").dialog(
    {
        autoOpen: false,
        title: "Discard",
        buttons:
        {
            "Yes": function()
            {
                window.location = "@Url.Action("Discard", new { ID = this.Model.ID })";
            },
            "No": function()
            {
                $(this).dialog("close");
            }
        }
    });
</script>
1
  • 1
    +1 for autoOpen: false. Haven't seen this is any other examples.
    – ter24
    Mar 13, 2014 at 16:17
1

This works too:

buttons: {
        'Do some action': function () {
            //a button called 'Do some action' is created
        },
        Close: function () {
            //a button called 'Close' is created
            $(this).dialog('close');
        }
    },
    open: function () {
        //event fires when dialog opens
    },
    close: function () {
        //event fires when dialog closes
    }
0

the "text" option is a boolean flag to specify whether the text from the tag should be displayed. Perhaps you should try changing the .html() of the button e.g.

$("#Button1").html("Ok");
0

This Worked for me

$("#dialog-form").dialog
(
{
    autoOpen: false,
        height: 300,
    width: 350,
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
       'Guardar' : function()
        {
            $("#dialog-form").dialog( "close" );
            $(this).html("Guardar");
         },
        Cancel: function()
         {
            $(this).html("Cancelar");
            $("#dialog-form").dialog( "close" );
        }
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.