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