I am attempting integrate jQuery Mobile into an existing mobile page. I want to use the collapsible element, and form features.
When I include the js file, and load the page, the page is rendered blank. When it is not included it is rendered correctly. I have added data-role="page" and "content" as below:
Looking in Firebug I see the body element has the 'ui-mobile-viewport' class on it and it's visibility is set to hidden; its child elements have display = none.
I am getting this error in the console when debugging (line 5014) of jquery-mobile-1.0.1.js:
$el.prop is not a function if ( $el.prop("disabled") ) { Code below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title><%=PageTitle%></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> <link rel="stylesheet" type="text/css" href="<%=CssPath%>/jquery.mobile-1.0.1.css" media="screen" /> <script type="text/javascript" src="<%=JsPathShared%>/jquery.js"></script> <script type="text/javascript" src="<%=JsPath%>/page.js"></script> <script type="text/javascript" src="<%=JsPath%>/jquery.mobile-1.0.1.js"></script> </head> <body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"> <div data-role="page" id="page-wrap" > <header> <%RenderBanner();%> </header> <div data-role="content" class="section-wrap"> <%Render();%> <footer> <nav> <%RenderNavigation();%> </nav> <%RenderFooter();%> </footer> </div> </div> <%=GoogleAnalytics()%> </body> </html>