Search jQuery

jQuery Forum

caching with dynamic html

in jQuery Mobile • 5 months ago

Hello

In my app a page I cache one page (data-dom-cache="true") with its form components (checkbokes) are dynamically created when "beforeCreate" triggers by reading some value from local storage.

The page is shown correctly but if I navigate to other pages and later I go back to this cached page the markup is all messed up (see attachment).

Any idea of what's going on?

Thank you in advance

Attachments

jqm.JPG
Size : 38.83 KB Download : 452

Replies(13)

watusiware

Re: caching with dynamic html

5 months ago

Impossible to tell from a screenshot. We'd need to see a complete example.

dariospad..

Re: caching with dynamic html

5 months ago

My js code:

$('#sitClientiEffetti').live('pagebeforecreate', OnSitClientiEffettiPageCreate);
function OnSitClientiEffettiPageCreate() {
//read data from localstorage:
var sitCli = new SitClientiEffetti();
var distintaTipi = sitCli.GetDistintaTipi();
var distintaStati = sitCli.GetDistintaStati();
var distintaEffetti = sitCli.GetDistintaEffetti();
var i;
if (distintaTipi)
for (i = 0; i < distintaTipi.length; i++)
$("#cgDistintaTipi").append('<input data-mini="true" tipo="{0}" class="distTipi" type="checkbox" name="distintaTipi-{0}" id="distintaTipi-{0}" checked="checked" /><label for="distintaTipi-{0}">{1}</label>'.format(distintaTipi[i].cod, distintaTipi[i].nome));
var filtroStati = '<fieldset data-role="controlgroup" data-type="horizontal" class="fieldSetTipi" >';
if (distintaStati)
for (i = 0; i < distintaStati.length; i++)
filtroStati += '<input data-mini="true" tipo="{0}" type="checkbox" id="distintaStati_{0}_{1}" checked="checked"/><label for="distintaStati_{0}_{1}">{0}</label>'.format(distintaStati[i].cod,i);
filtroStati += "</fieldset>";
if (distintaEffetti)
for (i = 0; i < distintaEffetti.length; i++) {
$("#tableFiltri").append(
'<tr><td width="200"><select tipo="{0}" name="switchTipoEffetto_{0}" id="switchTipoEffetto_{0}" class="switchTipoEffetto" data-role="slider" data-mini="true" ><option value="off">{1}</option><option value="on" selected>{1}</option></select></td><td width="300" id="cellTipiEff_{0}">{2}</td></tr>'.format(distintaEffetti[i].cod, distintaEffetti[i].nome, filtroStati));
}
}

and html page (multi-page template):

<div data-role="page" id="sitClientiEffetti" data-dom-cache="true">
<div data-role="header" >
<a href="#" data-icon="back" data-rel="back" >Indietro</a>
<h1 id="sitClientiEffetti_title"></h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="false" data-content-theme="d" data-mini="true">
<div data-role="fieldcontain">
<table width="100%">
<tr>
<td width="160" height="42">
<select name="switchTipoDoc" id="switchTipoDoc" data-role="slider" data-mini="true">
<option value="off">Tipo Documento</option>
<option value="on" selected>Tipo Documento</option>
</select>
</td>
<td>
<fieldset data-role="controlgroup" data-type="horizontal" id="cgDistintaTipi" data-mini="true" >
</fieldset>
</td>
</tr>
</table>
</div>
....
<div data-role="fieldcontain" >
<table id="tableFiltri" class="tableFiltri">
</table>
</div>
<a href="#" data-role="button" id="btnFiltraSitCliEffetti" data-mini="true" data-theme="b">Filtra</a>
</div>
</div>
</div>

As I said the page displays correctyly the first time it is showed; in subsequent shows it's messed up.

Thank you in advance

Dario

watusiware

Well, that's still not a complete example, since you say it is a multi-page template, and I don't see the other pages. Nor do I see the content of <head>. It is very difficult to diagnose JQM problems from incomplete examples.

When the user clicks on a link where you have this problem, is that link to a page within the multi-page template, or outside of it?

If the user clicks on a link otuside of the multi-page template, then the content of that link will replace everything in the document, including all of your variables.

This is one of the many reasons I recommend against the use of multi-page documents.

dariospad..

Re: caching with dynamic html

5 months ago

I published the website here:

http://www.witbit.it/meta/index.html

To see the problem I'm talkin about follow these steps:

from home page, go to "Situazione clienti", then back to home again (click "indietro"); now go to "nuovo ordine" then back and then again to "Situazione clienti".

Thank you in advance

watusiware

Re: caching with dynamic html

5 months ago

I'm afraid I can't get that far. After clicking on nuovo ordine, I get the loading spinner, and never get a new page.

You have an error in your Javascript at form.js line 29, null is not an object.

You need to use Firebug or Web Inspector to debug your site.

dariospad..

Re: caching with dynamic html

5 months ago

I just fixed the bug on form.js, check now

Thank you

dariospad..

Re: caching with dynamic html

5 months ago

Anyone out there? ;)

John Chac..

Re: caching with dynamic html

5 months ago

I can see markups are different in both cases.

<input data-mini="true" tipo="2" class="distTipi" type="checkbox" name="distintaTipi-2" id="distintaTipi-2" checked="checked"><label for="distintaTipi-2" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="d" data-mini="true" class="ui-btn ui-mini ui-checkbox-on ui-btn-active ui-corner-left ui-btn-up-d"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Fatt. Vend.</span></span></label>

<input data-mini="true" tipo="2" class="distTipi ui-input-text ui-body-d ui-corner-all ui-shadow-inset ui-mini" type="checkbox" name="distintaTipi-2" id="Checkbox1" checked="checked"><label for="distintaTipi-2" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="d" data-mini="true" class="ui-btn ui-mini ui-checkbox-on ui-btn-active ui-corner-left ui-input-text ui-btn-up-d"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Fatt. Vend.</span></span></label>

this can be something to do with appending dynamic content.

your applications got loads of js includes....

its not easy to somebody else to debug...

will be good if you can make a simple sample with 2-3 pages and only with minimum controls to replicate the issue.

Edit: also I can see .live() used extensively which can end up in unexpected results...

dariospad..