0

I am having an issue with Jquery Mobile and Jquery Jplayer conflicting with each other. The problem I am facing is that When you include Jquery Jplayer into a Jquery mobile website and you click the button to start listening to an audio, it changes the button html and that changes the look and feel of the website because Jquery mobile doesn't just change the html, it adds the following code.

<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Continue</span>
</span>

Everytime I try to overwrite it, by including the following script:

$(this).html('Continue');

It just doesn't work. Any idea what to do in this situation?

ElliotDurden
  • 49
  • 1
  • 6
  • exclude jquery mobile specific attributes from your container, that might work(in this case probably the data-role='button' attribute) – Th0rndike Jun 25 '12 at 15:14
  • but by doing that it takes away the whole Jquery mobile inserted styling on it and leaves it not looking like a button anymore. – ElliotDurden Jun 25 '12 at 15:18
  • those spans that you are hating ARE the jquery mobile styling... – Th0rndike Jun 25 '12 at 15:21
  • I am not hating on them, all i am trying to understand or achieve is to include these spans automatically when I change the text or more accurately when the Jplayer changes the text of these buttons. That's all. – ElliotDurden Jun 25 '12 at 15:31

2 Answers2

1

If you have downloaded JQM with themes then JQM will override basic elements in your styles and any plugin styles.

There is a download for structure only JQM css: http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.css

There are a few options here:

1) Go into your CSS and do JQM overrides to achieve consistent styles if they are different than the boxed themes.

2) Create your own JQM theme.

3) Question if you really need to use the JQM framework. Many times I start with JQM, only to replace much of the functionality with micro javascript/jQuery solutions. If you find yourself stripping JQM functionality out and replacing it with something else then you should question if using JQM is the best approach.

Lowkase
  • 5,631
  • 2
  • 30
  • 48
0

To update jQuery Mobile UI elements you have to call .refresh() on the items after modifying the source element (only works with form elements, not link buttons).

$(this).html('Continue').button('refresh');

Or Change button text jquery mobile

$("#consumed .ui-btn-text").text("Mark New");

.

If your element is a button:

$(this).closest(".ui-btn").find(".ui-btn-text").text("Continue");

If its a link:

$(this).find(".ui-btn-text").text("Continue");
Community
  • 1
  • 1
Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
  • This solution gave me the following error "uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'refresh'" – ElliotDurden Jun 25 '12 at 15:30
  • I've update the answer. See if it helps. Also, post the relevant code on the question as and edit, please. – Ricardo Souza Jun 25 '12 at 15:58
  • This solution worked perfectly. It was all a matter of finding the correct span and then changing it's text. Thank you sir! – ElliotDurden Jun 25 '12 at 18:34