Search jQuery

jQuery Forum

jQuery Mobile

total_noob

data-role button doesn't work

in jQuery Mobile • 3 months ago

Hi all,

New to the forum so if I'm doing something wrong please tell me.

I'm trying to make a row of buttons and I've found that this works:

<center>
<a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" onclick="FunctionToDoTask1();">BTN1</a>
<a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" onclick="FunctionToDoTask2();">BTN2</a>
<a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" href="#popUp1" data-rel="popup">BTN3</a>
<a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" href="#popUp2" data-rel="popup" onclick="FunctionToDoTask3();">BTN4</a>
</center>

All the buttons display properly and the last three buttons does what its suppose to.

The issue is; button 1 doesn't. It seems I can't even click on the button and as if the button's not even there because it doesn't get highlighted when I hover over it. What does that mean then?

I'm using JQuery mobile 1.3 (with all libraries properly included as everything else seems to work fine) and was wondering if anyone can help.

Tell me if I'm not being clear or if you need more information.

Replies(8)

John Chac..

Re: data-role button doesn't work

3 months ago

First,

The <center> tag is not supported in HTML5. Use CSS instead.

The <center> element is deprecated in HTML 4.01.

http://www.w3schools.com/tags/tag_center.asp

second,

I don't see any issue

http://jsfiddle.net/johnchacko/aWE76/4/

(Note that I changed data-iconpos="notext")

Below is the simple markup for a button.

<a href="#" data-role="button">A simple Button</a>

What I see is you are trying to mix jQM enhanced style and data-role='button' together...

Which is not the right practice...

total_noob

Re: data-role button doesn't work

3 months ago

Hi John,

Thanks for the response.

I tried doing what you did and it worked if I didn't set data-inline to true. When I did, all the buttons became unresponsive and did not get highlighted when I hover over it.

Also, what does jQM enhanced style mean? And what would be best practice then?

watusiware

Re: data-role button doesn't work

3 months ago

Also, what does jQM enhanced style mean?

class="ui-link-inherit"

JQM adds styles like this itself where appropriate. You should not be setting these styles yourself. Where did you get the idea that you should?

Since you are showing us only selected parts of your page, it's hard to do any further diagnosis. We don't know where you put your popups, for example. Always better to provide a complete example, otherwise we are guessing.

total_noob

Re: data-role button doesn't work

3 months ago

Hi wastusiware,

I think I was looking at an example by inspecting the JQM demos and thought it should be there. Thanks for pointing that out for me.

I removed that from the buttons but nothing has changed. All the buttons are still unresponsive.

Does it make any difference that I'm using JQM 1.3 and these buttons are on a panel?

watusiware

Re: data-role button doesn't work

3 months ago

Does it make any difference that I'm using JQM 1.3 and these buttons are on a panel?

It may make a difference that JQM 1.3 is a beta test, and might be broken.

If you are just learning JQM, I'd advise sticking to the latest released version, 1.2.

total_noob