2

How do I apply jQueryUI styles to an asp:Button. Here is the problem: jqueryUI button requires you to have the following format <button>Test button</button>

When I try to use an asp button server control, <asp:Button />, asp:Button renders as <input type=button>Test button </input>

Update : I get the standard button styling that jquery provides. However, when I want to make a toolbar out of it, like in this example : http://jqueryui.com/demos/button/#toolbar, the standard asp:Button fails me....or maybe i am missing something. Thanks in advance,

Sashidhar Kokku

6 Answers 6

8

You can apply the jQuery UI button to a number of different HTML elements: <a>, <input type="button"> and so on.

$(function() {
    $("input[type=button]").button();
});

This will convert all <asp:Button>s on the page into jQuery UI buttons.

1
  • Unfortunately it does not apply the theme properly. Any idea or examples of its implementation anywhere would help. Thanks, Sashidhar Kokku
    – Sash
    Jul 8, 2010 at 21:35
6

This is how you do it: Add the following to your initialize function:

$(function () {
        //Converting asp buttons to html buttons
        $('input:submit, input:reset').each(function () {
            $(this).replaceWith('<button type="submit" name="' + $(this).attr('name') + '" class="' + $(this).attr('class') + '" id="' + $(this).attr('id') + '" >' + $(this).val() + '</button>');
        });

  //Adding button icons .....
  $(".createbutton").button({
     icons: { primary: "ui-icon-circle-plus" } 
   });
1
  • $("input[id$='btnAwesome']")
    – Piotr Kula
    Dec 3, 2012 at 11:45
6

The jQuery UI button widget is capable of transforming the following button types:

  • <input type="button" />
  • <input type="submit" />
  • <button></button>

Since the <asp:Button> control renders the first type of HTML, you could include the following in your master page to apply the jQuery transform to all ASP.NET buttons:

$("input[type=button]").button();

You should also $("input[type=submit]").button(); to handle submit buttons.

4

You can assign a style to the ASP.NET buttons, then use the style as a selector to selectively (pardon the pun) apply the jQuery button. For example, if you set the attribute CssClass="special" on the buttons you want to modify, then you would put the following jQuery in your page:

$(function() {
    $(".special").button();
});

Hope that helps.

0
$(document).ready(function() {
$('#<%= Button1.UniqueID %>').click(function() {

    // do something
});

});
0

I'm pretty sure jQuery UI will work fine with button input, as well any other element.
You just need to select the desired element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.