Search code examples
jquerycssjquery-mobilejplayerdocument-ready

Jquery mobile and Jquery Jplayer conflict

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?

Solution

  • 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");