JQuery mobile: change list title

Question

I looked through all the answers to what, in my opinion, would be a simple question. All the answers I saw say to use ".text ()", which does not work.

In jQuery mobile, I just want to replace the title text in the listview with the text of the radio button that I select in this list. For simplicity, simply dynamically changing the title text in the list will suffice. The problem is that I cannot dynamically change the text of the list title without removing some HTML. I have tried many suggestions from stackoverflow and other sites, including:

JQuery Mobile: dynamically change title text of collapsible div?

https://forum.jquery.com/topic/how-can-i-dynamically-change-the-text-of-a-collapsible

jQuery mobile: dynamically updating a collapsible header leads to a loss of style

I am testing on an Android device using the following:

• Cordoba Version: 6.3.1
• JQuery 1.11.0
• JQuery mobile 1.4.5

HTML:

<div data-role="page" id="test"> <div role="main" class="ui-content"> <div class="ui-grid-a multiple-inputs"> <div class="ui-block-a"> <ul data-role="listview" data-inset="true" data-shadow="false"> <li data-role="collapsible" data-iconpos="right" data-inset="false"> <h2 id="h2-test-area">Area</h2> <form> <fieldset data-role="controlgroup"> <input type="radio" name="rad-test-area" id="rad-test-area-0-1" value="0"> <label for="rad-test-area-0-1">Abdomen</label> <input type="radio" name="rad-test-area" id="rad-test-area-1-1" value="1"> <label for="rad-test-area-1-1">Arms</label> <input type="radio" name="rad-test-area" id="rad-test-area-2-1" value="2"> <label for="rad-test-area-2-1">Outer thigh</label> <input type="radio" name="rad-test-area" id="rad-test-area-3-1" value="3"> <label for="rad-test-area-3-1">Inner thigh</label> <input type="radio" name="rad-test-area" id="rad-test-area-4-1" value="4"> <label for="rad-test-area-4-1">Calves</label> <input type="radio" name="rad-test-area" id="rad-test-area-5-1" value="5"> <label for="rad-test-area-5-1">Flanks</label> <input type="radio" name="rad-test-area" id="rad-test-area-6-1" value="6"> <label for="rad-test-area-6-1">Chest</label> <input type="radio" name="rad-test-area" id="rad-test-area-7-1" value="7"> <label for="rad-test-area-7-1">Buttocks</label> <input type="radio" name="rad-test-area" id="rad-test-area-8-1" value="8"> <label for="rad-test-area-8-1">Back (lower and upper)</label> <input type="radio" name="rad-test-area" id="rad-test-area-9-1" value="9"> <label for="rad-test-area-9-1">Jaw line</label> <input type="radio" name="rad-test-area" id="rad-test-area-10-1" value="10"> <label for="rad-test-area-10-1">Chin</label> <input type="radio" name="rad-test-area" id="rad-test-area-11-1" value="11"> <label for="rad-test-area-11-1">Knee</label> </fieldset> </form> </li> </ul> </div> <div class="ui-block-b"> <ul data-role="listview" data-inset="true" data-shadow="false"> <li data-role="collapsible" data-iconpos="right" data-inset="false"> <h2>Relevant treatments:</h2> <form> <fieldset data-role="controlgroup"> <input type="checkbox" name="cb-test-1" id="cb-test-1-1"> <label for="cb-test-1-1">Fillers</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-2"> <label for="cb-test-1-2">Botox</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-3"> <label for="cb-test-1-3">Dermaroller</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-4"> <label for="cb-test-1-4">HydraFacial</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-5"> <label for="cb-test-1-5">FSR</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-6"> <label for="cb-test-1-6">Laser</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-7"> <label for="cb-test-1-7">Ping</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-8"> <label for="cb-test-1-8">Endymed</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-9"> <label for="cb-test-1-9">Chemical Peel</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-10"> <label for="cb-test-1-10">Aqualyx</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-11"> <label for="cb-test-1-11">Hyalase</label> <input type="checkbox" name="cb-test-1" id="cb-test-1-12"> <label for="cb-test-1-12">Tretinion and Hydroquinone (Obagi)</label> </fieldset> </form> </li> </ul> </div> </div><!-- /grid-a --> </div><!-- /content --> </div><!-- /test page --> 

This is what the HTML I'm trying to manipulate looks like the one shown in the image:

 <h2 id="h2-test-area">Area</h2> 

The text "Area" is what I want to change.

This is what the HTML I'm trying to manipulate looks like render:

 <h2 id="h2-test-area" class="ui-collapsible-heading"> <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-minus"> Area <span class="ui-collapsible-heading-status"> click to collapse contents</span> ::after </a> </h2> 

JavaScript:

 $("input[name='rad-test-area']").on("change", function() { $("#h2-test-area a.ui-collapsible-heading-toggle").text("new text"); }); 

When I execute the above javascript, it replaces the text I want, but it also replaces the range that occurs after the text "Area" in the HTML. Why does everyone say that ".text ()" works when it explicitly removes HTML? Thank you in advance for any help.

Answer 1

You can make your life easier by surrounding the text you want to change using the SPAN element:

 <h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2> 

Then you can easily use .text () in this range:

 $("input[name='rad-test-area']").on("change", function() { $("#h2-test-area-span").text("new text"); }); 

Demo

Answer 2

Try using html instead of text to save html content.

 $("input[name='rad-test-area']").on("change", function() { $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text"); });