Jquery UI dialog buttons text not working

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?

---

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"); }
    }
]});

---

You can try the syntax this way:

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

---

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.

---

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>

---

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
    }

---

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");

---

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" );
        }
    }
});