Question

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="true" 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.

Answer 1

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).