Dynamically updating contents of div element takes two or three tries

I'm trying to update the contents of a div, but it's not always working. I'm not sure if it's relevant to my problem, but I am using jquery mobile.

Background:

I have a select menu, which is used to choose a location. I also have a button which is used to get information about the chosen location. Ajax is used to fetch the data, which is shown within a div element on my page. I've found that I need to click the button twice for the div element to update. Oddly, if I add an alert just before I update the div it works fine (i.e. I only n开发者_如何学Goeed to push the button once).

Code:

$( function() {
  $("#weather_submit").click(function(){
    $.mobile.pageLoading();
    var formData = $("#getWeatherForm").serialize();
    $.ajax({
      type: "POST",
      url: "weather.php",
      cache: false,
      data: formData,
      success: onSuccessWeather,
      error: onError
    });
    return false;
  });
});

function onError(data, status) {
  $.mobile.pageLoading( true );
  alert('error');
}

function onSuccessWeather(data, status) {
  $.mobile.pageLoading( true );
  //alert(data);  // if I use this line of code I never have a problem (i.e. the weatherSummary div updates appropriately
  data = $.trim(data);
  $("#weatherSummary").html(data);
}

I initially found this problem using my Android EVO, but I've just tried firefox and it happens with that too.

I suspect it's something to do with the .html() not doing its job properly for some reason.

Any ideas?

Thanks!

Try:

$("#page_id_name").page();

But also I think there is a new method in the Beta 2 update:

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

So if you update to Beta 2 try something like this (untested):

$("#weatherSummary").html(data).trigger( "create" );