jQuery UI Custom Dialog Buttons

Question

I am working in jQuery UI and am trying to figure out a way for a way to pass in custom data fields through the buttons options array. I would like to pass in fields like the example below. data-example & data-example2. Is this possible to do through the buttons param??

<button type="button" data-example="XXXX" data-example2="YYYY" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" ><span class="ui-button-text">xxx</span></button>

here is my create dialog code -

options = {
                autoOpen: true,
                buttons : [
                    {text:"example1"},
                    {text:"example2"}
                ]
            }
jQuery("<div class='dialog' title='xxx'><p>xxx</p></div>")
            .dialog(options);

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

Trevor · Accepted Answer · 2013-10-18 16:44:54Z

14

This example should help.

$(function() {
   $( "#dialog" ).dialog({ buttons: [ { id:"test","data-test":"data test", text: "Ok", click:    function() {alert($('#test').data('test')); $( this ).dialog( "close" ); } } ] });
});

http://jsfiddle.net/9g6jM/

answered Oct 18, 2013 at 16:44

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

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

Comments

Irvin Dominin · Accepted Answer · 2013-10-18 16:47:00Z

0

You can set jQuery UI buttons attributes when the dialog is opened or when you need in your code.

Code:

$("#demo")
    .dialog({
    autoOpen: true,
    buttons: [{
        text: "example1"
    }, {
        text: "example2"
    }],
    open: function (event, ui) {
        $(":button:contains('example1')").attr("data-example", "XXX").attr("data-example2", "YYY");
    }
});

The code select the jQuery UI button example1 and set its data attributes.

Demo: http://jsfiddle.net/IrvinDominin/BKHEn/

answered Oct 18, 2013 at 16:47

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Collectives™ on Stack Overflow

jQuery UI Custom Dialog Buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related