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?

4
  • exclude jquery mobile specific attributes from your container, that might work(in this case probably the data-role='button' attribute)
    – Th0rndike
    Jun 25, 2012 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. Jun 25, 2012 at 15:18
  • those spans that you are hating ARE the jquery mobile styling...
    – Th0rndike
    Jun 25, 2012 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. Jun 25, 2012 at 15:31

2 Answers 2

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.

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");
3
  • This solution gave me the following error "uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'refresh'" Jun 25, 2012 at 15:30
  • I've update the answer. See if it helps. Also, post the relevant code on the question as and edit, please. Jun 25, 2012 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! Jun 25, 2012 at 18:34

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.