CODEWITHSUNDEEP
jqueryjquery-ui
Tom Cruise
Tom Cruise

Reputation: 1425

How to add Buttons after created a Jquery Dialog UI

I want to create a jquery dialog and needs to add buttons to it.

I'm using the following code which works fine in IE but not in Mozilla.

Can any one figure out what is the issue here?

function dialog_box(dynDiv, rootTemplate) {
    var dialog_buttons = rootTemplate.buttons;
    var dialog = $("#" + dynDiv.id).dialog({
        hide: "explode",
        title: rootTemplate.etype,
        buttons:'',
        text: rootTemplate.text,
        resizable: true,
        minWidth: 200,
        minHeight: 150,
        close: function () {
            $(dialog).dialog('destroy').remove();
        }
    });


    var buttonSet = $("#" + dynDiv.id).parent().find('.ui-dialog-buttonset');
    $.each(dialog_buttons, function (index, props) {
        var newButton = $('<button></button>', {
            id: "btn" + dynDiv.id + props.id,
            text: props.text
        });
        newButton.button().unbind().on("click", props.handler);

        $(buttonSet).append(newButton);      
    });


}

Sample

Upvotes: 0

Views: 3183

Answers (3)

Robert
Robert

Reputation: 3302

I think you could create buttons as options, using buttons option, when creating dialog:

http://api.jqueryui.com/dialog/#option-buttons

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

Upvotes: 0

K T
K T

Reputation: 81

Try this one:

// Retrieve buttons hash
var buttons = dialog.dialog("option", "buttons"); 
// Extend the hash (so you're able to keep the old buttons)
$.extend(buttons, { props.text: props.handler } );
// Set it again
dialog.dialog("option", "buttons", buttons);

Upvotes: 2

Tom Cruise
Tom Cruise

Reputation: 1425

I made small changes in the code posted and it works fine. modified part highlighted.

function dialog_box(dynDiv, rootTemplate) {
        var dialog_buttons = rootTemplate.buttons;
        var dialog = $("#" + dynDiv.id).dialog({
            hide: "explode",
            title: rootTemplate.etype,
            **buttons:[{}],**
            text: rootTemplate.text,
            resizable: true,
            minWidth: 200,
            minHeight: 150,
            close: function () {
                $(dialog).dialog('destroy').remove();
            }
        });


        var buttonSet = $("#" + dynDiv.id).parent().find('.ui-dialog-buttonset');
        **$(buttonSet).empty();**
        $.each(dialog_buttons, function (index, props) {
            var newButton = $('<button></button>', {
                id: "btn" + dynDiv.id + props.id,
                text: props.text
            });
            newButton.button().unbind().on("click", props.handler);

            $(buttonSet).append(newButton);      
        });


    }

So an empty button set has been added while creating the JqueryUI dialog. After cleared the button set I had added the buttons to it.

Upvotes: 0

Related Questions