Richard Garfield Richard Garfield - 26 days ago 6
Javascript Question

.on("pagecreate") not being called

I'm trying to copy this code: http://jsfiddle.net/ezanker/5qe6g/1/

I'm using goolge blogger

I've got my imports in the template html

<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css' type='text/javascript'/>
<script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>
<script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>


problem is that "onpagecreate" is not being called. If I get rid of it like this:

function createList(menudata){
var html = '';
$.each(menudata,function(i,val){
html += '<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true">';
$.each(val.productoption,function(i,val){
html += '<li class="row">'+val.topping+'</li>';
});
html += '</ul></div>';
});
return html;
}

var menulistitem = createList(data);
$('#menu-content').empty().append(menulistitem);
$('div[data-role=collapsible]').collapsible();
$('div ul').listview();


It draws the menu, but its not collapsible. I'm assuming that the reason its not collapsible is that the timing is off

Anyone know how to fix this?

Thanks!

Answer

The problem is in head tag of your html file. First of all you don't need multiple load of same files. Problem is that you put jquery.mobile-1.4.5.min.css CSS file in script tag. CSS file need to come in link tag:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

After clearing some unnecessary loading of jquery your head tag from external resources only need this:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Check out working code : codePen