Applying Jquery UI theme to Asp.net buttons

Question

I have an Asp.Net button and I am applying flick theme to my buttons and it's applying to it but on mouse hovering it doesn't change the colour.

Here is what I am doing?May be I am wrong Can anyone guide me through this as I am able to work with normal html button by using

<button>Click Me!</button>

This is how I am working with Asp.net button:

<asp:Button ID="Button1" runat="server" Text="Click Me!" CssClass="ui-button ui-state-default"/>

jQuery UI's button doesn't work with input type="submit" or input type="button", only the semantic button element. If you only want to apply the styles, you can refer to an ASP.NET element by using the 'ends-in' selector: $('input[id$="Button1"]') — Jim Schubert
– Jim Schubert, Commented Oct 10, 2011 at 17:23
Thanks for your reply and I have changed by simple adding a script tag (#btnSample).button;And in the code view i have removed my CssClass and changed it to <asp:button ID="btnSample></asp:button> and got working perfectly. — coder
– coder, Commented Oct 10, 2011 at 17:27

Darcy · Accepted Answer · 2011-10-10 17:07:17Z

5

In ASP.NET the ID get's transformed so you can't pass it as a selector. You could probably use a class instead.

So instead of

$('#Button1').button();

use

$('.MyButtonStyle').button();

EDIT:

BTW, you shouldn't be adding any jquery-ui classes to the button manually (your example looks like that's what you are doing). This is all done by the .js file included with jquery ui

answered Oct 10, 2011 at 17:07

Darcy

5,36812 gold badges55 silver badges79 bronze badges

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

3 Comments

coder Over a year ago

Thanks for your reply and actually still I couldn't get through your answer well I have changed in my script to $('MyButtonStyle').button; and Still I have the same problem.

coder Over a year ago

I got it working and changed the code and will post the answer soon.

Dan Over a year ago

If you need to use the id in the selector for ASP controls do this: $('[id$=myButtonIDGoesHere]')

coder · Accepted Answer · 2012-02-09 11:50:06Z

0

Anyways I found the answer and here is what I have did and worked well!

<script type="text/javascript">    
$('#btnSample').button();
</script>

Code for displaying:

 <asp:Button ID="btnSample" runat="server" Text="Click Me!"/>

edited Feb 9, 2012 at 11:50

answered Oct 12, 2011 at 8:08

coder

13.2k32 gold badges116 silver badges221 bronze badges

Comments

coder · Accepted Answer · 2014-04-09 12:38:18Z

0

try to set button property as

ClientIDMode="Static"

Then

edited Apr 9, 2014 at 12:38

coder

13.2k32 gold badges116 silver badges221 bronze badges

answered Apr 9, 2014 at 8:42

Agrawars

372 bronze badges

Comments

Hamzah Alzahrani · Accepted Answer · 2014-10-06 16:54:41Z

0

man its easy , just add the following and it will work just fine :

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

answered Oct 6, 2014 at 16:54

Hamzah Alzahrani

1

Collectives™ on Stack Overflow

Applying Jquery UI theme to Asp.net buttons

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related