I'm working in a dotcms v. 2.2 (dotcms is a content management system that we use for our website) environment and I will need to start adding mobile pages sometime in the near future, so I'm trying to develop some prototype code now, so I'll have it in the future when I need it.
I have the jquery.mobile-1.2.0 code library copied to a folder on our website. the code at the top of my new page's definition (according to the book JQuery Mobile Web - Development Essentials) all looks like this:
<!
DOCTYPE html>
<
meta
content
=
"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
name
=
"viewport"
/>
<
link
rel
=
"stylesheet"
href
=
"/global/jquery-mobile/jquery.mobile-1.2.0.min.css"
/>
<script type="text/javascript" charset="utf-8" src="/global/jquery/jquery-1.7.2.js"></script>
In conjunction with it I'm also currently using JQuery-1.7.2 (which is also referenced on the new mobile test page as shown above). The actual JQuery code that I have placed on the page is also currently setup to cause no conflicts with other libraries like this:
var j = JQuery.noConflict();
When I comment out the jquery.mobile-1.2.0.js reference the page functions properly with only the jquery-1.7.2.js reference being active and shows all of the correct labeling, controls, etc. But when I uncomment the reference to jquery.mobile-1.2.0.js , to make it active the page only displays as a completely blank page.
I would appreciate any suggestions as to how to better diagnose this problem. Thanks for the help.