jQuery UI dialog buttons without all the default classes?

Question

I am creating a jQuery UI dialog programmatically, as in

$( "#dialog" ).dialog({
        autoOpen: false,
        width: 400,
        buttons: [
            {
                class: "myButton",
                text: "Ok",
                click: function() {
                    $( this ).dialog( "close" );
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

When the dialog is created, however, the button has a list of default classes assigned to it, and the label s wrapped in a SPAN.

<button type="button" class="myButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
     <span class="ui-button-text">Ok</span>
 </button>

I'd rather the button just have myClass, period, and if possible no span. As in:

 <button type="button" class="myButton">Ok</button>

How can I accomplish this?

Don't use jquery ui. Do your own css. Edit: I meant don't create the buttons using jquery dialog and add your own buttons. — Funky Dude
– Funky Dude, Commented Jun 10, 2014 at 17:58
That's how jQuery UI works, it uses all those classes internally. If they interfere with your application, you're doing something wrong. — Barmar
– Barmar, Commented Jun 10, 2014 at 18:00

David Buck · Accepted Answer · 2020-06-26 18:38:15Z

2

$( "#dialog" ).dialog({
  autoOpen: false,
  width: 400,
  open: function(){
    $(this).next().find("button").removeClass("ui-button ui-corner-all ui-widget");
  },
  buttons: [
    {
      class: "myButton",
      text: "Ok",
      click: function() {
        $( this ).dialog( "close" );
      }
    },
    {
      text: "Cancel",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

"create" function can be used instead of "open" function

edited Jun 26, 2020 at 18:38

David Buck

3,88840 gold badges54 silver badges74 bronze badges

answered Jun 26, 2020 at 18:22

Yasin Kelif

213 bronze badges

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

Comments

Todd Moses · Accepted Answer · 2014-06-10 18:09:49Z

0

There are 3 easy ways to accomplish this: (just use one of the following)

1 Just create the button as an html string in your code:

EX: $("#someelem").html("<button type=\"button\" id=\"myid\" class=\"myclass\">Ok</button>");

2 Download jQuery UI non-compressed and change the code so that the output is just the class you pass and does not add a span to the html.

EX FROM jQuery UI Code:

var buttonElement = this.buttonElement.removeClass( typeClasses ),
            buttonText = $( "<span></span>", this.document[0] )
                .addClass( "ui-button-text" )
                .html( this.options.label )
                .appendTo( buttonElement.empty() )
                .text(),
            icons = this.options.icons,
            multipleIcons = icons.primary && icons.secondary,
            buttonClasses = [];

Just remove the span tags so that buttonText = this.options.label; or something similar.

3 Change the class and button html with JavaScript after creation. EX: $(".myButton").attr("class","myButton").html("Ok");

answered Jun 10, 2014 at 18:09

Todd Moses

11k11 gold badges50 silver badges65 bronze badges

1 Comment

Steve Over a year ago

Good approaches. I'll see which works best, thanks.

Collectives™ on Stack Overflow

jQuery UI dialog buttons without all the default classes?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related