Place:<...">
Geek Answers Handbook

JQuery Mobile: dynamically change title text of collapsible div?

<div data-role="collapsible" data-content-theme="e" id="collapsePlace"> <h3>Place:</h3> <!--things...--> </div>

How can I dynamically change the title text <h3> ("Location:") in a collapsible div?

I tried:

 $('#collapsePlace').children('h3').text('new text');

And he changes the text - but loses the whole style!

+8
jquery jquery-mobile
source share
4 answers

The actual structure of HTML dumped in jQuery Mobile 1.0RC2 is as follows (after the framework has made its HTML pass):

 <div id="collapsePlace" data-content-theme="e" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed"> <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-c" href="#" data-theme="c"> <span aria-hidden="true" class="ui-btn-inner ui-corner-top ui-corner-bottom"> <span class="ui-btn-text">Place: <span class="ui-collapsible-heading-status"> click to expand contents</span> </span> <span class="ui-icon ui-icon-plus ui-icon-shadow"></span> </span> </a> </h3> <div class="ui-collapsible-content ui-body-e ui-collapsible-content-collapsed" aria-hidden="true"> <!--things...--> </div> </div>

The nested <span> element in the <span class="ui-btn-text"> element makes this a bit more complicated. If you want to save the structure of the <span class="ui-btn-text"> element, you need to save the nested <span> element, overwrite it and then replace it:

 //run code on document.ready $(function () { var num = 1; //add click handler to link to increment the collapsible header each click $('a').bind('click', function () { //cache the `<span class="ui-btn-text">` element and its child var $btn_text = $('#collapsePlace').find('.ui-btn-text'), $btn_child = $btn_text.find('.ui-collapsible-heading-status'); //overwrite the header text, then append its child to restore the previous structure $btn_text.text('New String (' + num++ + ')').append($btn_child); }); });

Here is the jsfiddle from the solution above: http://jsfiddle.net/jasper/4DAfn/2/

+5
source share

1.3.2 shows the following:

 <div id="MyID" data-role="collapsible" > <h3><span id="MyHeaderID">My Header</span></h3> <!-- My Content --> </div>

JQuery:

 $("#MyID h3 #MyHeaderID").text("Your New Header");

Happy coding!

+4
source share

A simple solution would be

 $('#collapsePlace .ui-btn-text').text("hello ");

Check out the script at http://jsfiddle.net/AQZQs/1/

+2
source share

An easy option is to provide h3 with a user id / class, for example:

 <div data-role="collapsible" data-content-theme="e" id="collapsePlace"> <h3 id='h3Text'>Place:</h3> <!--things...--> </div>

Thus, you only need to:

 $('#collapsePlace #h3Text').text('new text');
0
source share

More articles:


All Articles