I have looked all over for the answer to what I thought would be a somewhat simple question. All the answers I have seen are saying to use '.text()' which does not work.
In Jquery mobile, I want to simply replace the header text in a listview with the text of a radio button that I select in that listview. For simplicity sake just dynamically changing the text of the header in the listview will suffice. The issue is that I cannot dynamically change the text of the header of the listview without removing some HTML. I have tried numerous suggestions from stackoverflow and other sites including:
Jquery Mobile: Dynamically change the text of the header of a collapsible div?
https://forum.jquery.com/topic/how-can-i-dynamically-change-the-text-of-a-collapsible
jQuery mobile: Dynamically updating collapsible heading causes loss of styling
I am testing on an android device using the following:
- Cordova 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 am trying to manipulate looks like before render:
<h2 id="h2-test-area">Area</h2>
The text "Area" is what I want to change.
This is what the HTML I am trying to manipulate looks like after 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 perform the above javascript it replaces the text I want it to but it also replaces the span that occurs after the text "Area" in the HTML. Why is everyone saying that '.text()' works when it clearly removes HTML? Thank you in advance for any help.
