Jquerymobile 'data-scroll=true' Does Not Work On Dynamically Injected Pages
data-scroll='true' works fine if the page is static page, but if I add page dynamically using javascript it does not work. My Header section is : ).scrollview();
I had the same problem, worked for me.
Better later than never :-)
Solution 2:
After a long research, what I found is-
we need to load the dynamic HTML, for each scroll block, to unique container s.
for eg.-
HTML
<div data-role="content"id="container">
<div id="scrollContainer"></div>
<div id="anotherContainer"></div>
</div>
JS
if we loaded a scrollview on 'scrollContainer' at first,
$('#scrollContainer').html(loadHtml);
$("#scrollContainer").scrollview();
$("#scrollContainer").trigger('create');
then next time, we need to load in a different container-
$('#anotherContainer').html(loadHtml);
$("#anotherContainer").scrollview();
$("#anotherContainer").trigger('create');
Optional
To again dynamically load into #scrollContainer
, we can remove & recreate the <div>
.
after executing the second code block
$('#scrollContainer').remove();
$('#container').append('<div id="scrollContainer"></div>');
//$('#scrollContainer').empty(); // simply making this DIV empty WILL NOT WORK, we need to REMOVE DYNAMIC CLASSES, STYLES also. So, its better to recreate the LOADCONTAINER
other solutions should be there, but this one really works.
Solution 3:
You need to JQM apply that page - try
$(page).appendTo($.mobile.pageContainer).page();
or even
$(page).appendTo($.mobile.pageContainer).trigger('create');
Hope this helps
UPDATE: here's the JQM documentation on how to officially do this
Post a Comment for "Jquerymobile 'data-scroll=true' Does Not Work On Dynamically Injected Pages"