73887

Re-initialize all elements of Jquery Mobile after ajax Request?

Question:

I have the following page,

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" href="<%= ResolveUrl("~/css/jquery.mobile-1.3.0.min.css") %>" /> </head> <body> <form id="form1" runat="server"> <div> <div data-role="page" id="newsDeatils"> <div data-role="content"> <h3 id="newsTitle"></h3> <p id="newsCategory">

<div id="newsDescription"></div> </div> </div> </div> </form> <script src="<%= ResolveUrl("~/js/jquery.min.js") %>"></script> <script> $(document).bind("mobileinit", function () { $.mobile.autoInitializePage = false; }); </script> <script src="<%= ResolveUrl("~/js/jquery.mobile-1.3.0.min.js") %>"></script> <script src="<%= ResolveUrl("~/js/knockout-2.2.0.js") %>"></script> <script src="<%= ResolveUrl("~/js/NewsDetails.js" )%>"></script> <script> $.mobile.initializePage(); </script> </body> </html>

NewsDetails.js will send an ajax request then fill the newsDescription div with a table. But nothing is working?

Answer1:

Rather than delay initialising the whole page it would be better to allow it all to be initialised, then initialise just the new code. In jQm v1.3.2 and earlier you could do this by adding the following code to your success callback.

$('#newsDescription table').trigger('create');

This will allow the whole page to initialise and prevent a flash of an unstyled page to the user if they have a slow network connection which could cause your ajax request to take a while.

Answer2:

I have put $.mobile.initializePage(); inside success callback every thing works then.

Recommend

  • rename javascript object in order to use a php array
  • How to load an image in ASP.NET from a database as a file in a web browser?
  • libcurl compile errors
  • How do I deploy my Node.js app with a opencv4nodejs dependency to Heroku?
  • cordova build android throws error on Ubuntu 12.04
  • What do I do with this error when I run tests in rails?
  • How do I add a UIAlertController in app delegate (obj-c)
  • Unique SMS sender id?
  • jQueryMobile, Ajax Navigation, and MVC
  • Which browser have this strange user agent? (IOS device)
  • Segmentation Fault on MySQL2 / Ruby 1.9.3 / Rails 3.2
  • Is it possible to define rest argument in OCaml?
  • Center align outputs in ipython notebook
  • c# open webrowser in many tab
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • java inputstream
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Play WS (2.2.1): post/put large request
  • Email format validation in mvc3 view
  • Modifying destination and filename of gulp-svg-sprite
  • jQuery tmpl and DataLink beta
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Numpy divide by zero. Why?
  • How to disable jQuery.jplayer autoplay?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • SQL merge duplicate rows and join values that are different
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • apache spark aggregate function using min value
  • How to Embed XSL into XML
  • Converting MP3 duration time