jQuery Mobile: Refresh input widget value in Webkit Browsers
I'm building a web-app using jQuery Mobile. I'm trying to use javascript to set the value of an input widget in a function bound to the "pageshow" event. It works in Firefox but fails in Webkit browsers (Safare, Mobile Safari, Chrome...).
The following is defined as part of the $(document).ready() function:
$('#decimal').live('pageshow', function(event, ui){
$('#dLat').val(gps.latitude)
$('#dLong').val(gps.longitude);
gps.altitude = null;
});
The html for the JQM "page" is:
<div data-role="page" id="decimal" data-theme="c" >
<div data-role="header" data-backbtn="false">
<h1>Decimal Entry</h1>
</div>
<div data-role="controlgroup" class="dInput">
<label for="dLat">Lat: </label>
<input type="number" class="dInput" name="dLat" id="dLat" value=""><br>
<label for="dLong">Lon: </label>
<input type="number" class="dInput" name="dLong" id="dLong" value=""><br>
</div>
<a href="#manual" data-role="button" data-inline="tr开发者_开发技巧ue" id="btnDecimalSubmit"> Done </a>
</div>
Do Webkit browsers require an additional refresh of some sort? If so, how do I do that for <input...> elements?
The submit pseudo-button also fails to close the dialog, but only on Webkit browsers.
I tested your code by laying it out in a stand-alone page as follows (with jQM alpha), and this works in WebKit. I appreciate that this isn't running as a dialog, but I'm not aware of any differences in WebKit due to this.
I suspect part of the issue may be that you have the pageshow
stuff wrapped in $(document).ready
-- you don't need to do that. Here's how the Javascript section in my test page looks:
<script type="text/javascript">
$('#decimal').live('pageshow', function(event, ui){
$('#dLat').val(55.5603);
$('#dLong').val(56.1356);
});
</script>
(I removed the gps
variable and set hard-coded values because obviously I don't have that piece of the code).
Hey there I ran into this problem before. Try using the mobileinit event instead of the document ready event.
$(document).bind("mobileinit", function() {
$("#somePage").live( 'pageshow', function( event ) {
Do some stuff here
That fixed a similar problem for me I hope it helps.
精彩评论