I have a bizarre problem maybe someone can help me with. I am coding an app using PhoneGap 2.5/jQueryMobile 1.3.2/jQuery 1.9.1 for an iOS application. In the app, whenever I use the slider widgets they appear twice on screen. I tried reproducing this in a separate html file (including just jQuery/jQuery mobile) and it works just fine (widgets do not appear twice on screen). I tried refreshing the widgets (doesn't do anything) and even loading the files using the deferred feature as mentioned here. Regardless, the problem is still appearing. Any help? Here is the relevant code in question (I included headers just incase)
<html>
<head>
<title>Rate That Movie!</title>
<link rel="stylesheet" href="_/css/mystyles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=default-width, height=default-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
$(document).bind('mobileinit', function () {
jqd.resolve();
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/movieRetrieval.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
dd.resolve();
}
function doInit() {
alert('Ready');
}
</script>
</head>
<body>
<div id="actor0" data-theme="a" data-role="page5" data-title="View Source: results">
<div data-role="header"
data-theme="a"
data-position="fixed"
data-id="vs_header">
<h1>...</h1>
<a href="#home"
id ="screen_one"
data-icon="home"
data-iconpos="notext"
data-transition="slide"
data-direction="reverse"
>Home</a>
<a href="#genre-director"
id="to_genre_director"
data-icon="right-arrow"
data-iconpos="notext"
data-transition="slide"
data-direction="forward"
>next</a>
</div> <!--end of header-->
<h1>demo rating page</h1>
<br/>
<div data-role="contain">
<div data-role="fieldcontain">
<p id="label0"></p>
<input type="range"
id="slider-mini1" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label1"></p>
<input type="range" name="slider-mini"
id="slider-mini2" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label2"></p>
<input type="range" name="slider-mini"
id="slider-mini3" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label3"></p>
<input type="range" name="slider-mini"
id="slider-mini4" value="0" min="-10" max="10"
data-highlight="true" />
</div> -->
</div><!-- end of container -->
</div> <!--end of actor page -->
</body>
</html>
