CODEWITHSUNDEEP
javascripthtmljquery-mobile
Mark Burgoyne
Mark Burgoyne

Reputation: 1594

How to refresh/preserve HTML formatting after javascript edit using JQuery Mobile

I'm trying to setup the ability to support multiple languages, by running a javascript function to replace html with the different language(s). The script seems to run correctly, but in doing so I loose the formatting that comes with JQUery Mobile

I'm using the following form to do the replacement

for (var i = 1, e; e = document.getElementById("input1_" + i); ++i)
  e.innerHTML = input[2, 1];

Where I have id's of format input1_1, input1_2 ... etc to replace

I have a Fiddle to illustrate a worked example - see http://jsfiddle.net/eKXPU/4/

If you try the Fiddle, you will see that when you click on Russian, the "Properties" changes correctly, but loses the formatting. Clicking on the Russian equivalent still opens the collapsible content OK though, so it does appear to be a formatting issue only

Any assistance appreciated - I'm hoping it is as simple as a call to refresh the JQuery CSS, but dont know what that syntax is.

Thanks

Edit: Have tried adding 

$('#home').trigger('pagecreate');

After the script, keying off a reply at How do I refresh the CSS for a DIV loaded with external content in JQuery Mobile, but that also did not work

Upvotes: 0

Views: 748

Answers (1)

Nemo64
Nemo64

Reputation: 2683

Because you use jQuery Mobile which changes the html dynamically. After beeing processed your html looks like this:

<h3 id="input1_1" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-null" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="null" data-mini="false">
        <span class="ui-btn-inner ui-corner-top ui-corner-bottom">
            <span class="ui-btn-text">Properties
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </span>
            <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
        </span>
    </a>
</h3>

As you can see it is now impossible to just access the text. My solution would be to just wrap the text in another span that has no other meaning like this.

Upvotes: 1

Related Questions