Jquery UI dialog buttons text not working

Question

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?

Your syntax does appear to be correct. Is there other code modifying the dialog? — David Smith
– David Smith, Commented Mar 7, 2011 at 22:18

rdamborsky · Accepted Answer · 2011-03-07 22:26:43Z

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

answered Mar 7, 2011 at 22:26

rdamborsky

1,9301 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Thompson · Accepted Answer · 2016-01-22 02:47:32Z

3

You can try the syntax this way:

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

edited Jan 22, 2016 at 2:47

Jeremy Thompson

66.3k38 gold badges225 silver badges344 bronze badges

answered Mar 8, 2011 at 0:44

amurra

15.5k5 gold badges75 silver badges90 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:30Z

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.

Josh M. · Accepted Answer · 2012-01-10 14:31:02Z

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>

answered Jan 10, 2012 at 14:31

Josh M.

28.1k27 gold badges135 silver badges223 bronze badges

1 Comment

ter24 Over a year ago

+1 for autoOpen: false. Haven't seen this is any other examples.

fluidguid · Accepted Answer · 2013-02-22 19:25:12Z

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
    }

answered Feb 22, 2013 at 19:25

fluidguid

1,7011 gold badge16 silver badges26 bronze badges

Comments

Rob · Accepted Answer · 2011-03-08 01:14:43Z

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

answered Mar 8, 2011 at 1:14

Rob

10.3k5 gold badges64 silver badges93 bronze badges

Comments

David Romero Alcaide · Accepted Answer · 2014-03-11 18:18:51Z

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

answered Mar 11, 2014 at 18:18

David Romero Alcaide

12 bronze badges

Collectives™ on Stack Overflow

Jquery UI dialog buttons text not working

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related