jquery mobile loadPage not working

well, i did this <strong>question</strong> fill days ago, but dont know if i was clear.

so, i made something more simple now using another function $.mobile.loadPage

what i'm trying to do is just load a content from another file to a div, just like $.ajax using normal jquery.

<strong>in my main page:</strong>

<div data-role="page"> <button id="load" style="border: solid blue;">Click here to load</button> <div data-role="content" id="target"> <!-- ajax load here --> </div> </div>

<strong>this is the html from another file:</strong>

<div id="secondPage" style="border:solid red;"> <p>test</p> </div>

<strong>and finally, the js:</strong>

$("body").on("click", "#load", function () { $.mobile.loadPage("mobile/favorites", { pageContainer: $('#target'), type: 'post', reloadPage: true }); });

no erros appears to me, the url load the content as i checked in the chrome debug.

so, what i'm missing ?


Your code is attempting to load one page within another page. The second page (id="secondPage") is missing is data-role="page" attribute.

I have never tried to accomplish what you are attempting here but it seems confusing based on the docs.

The method loads a page, inserts it in the DOM inside of a container (not another page). The reloadPage parameter forces the loaded page to refresh if it is already in the DOM (having previously been loaded). Not what you want to do.

You will have better luck loading content via jQuery, inserting into the DOM $("#myDiv").load("ajax/test.html"); and then refreshing the current page with $("#myPage").page("destroy").page(); Note that this last bit may not be needed if you are simply inserting html that is not enhanced by jQuery Mobile.


  • How can a flex item keep the same dimensions when it is forced to a new row?
  • UIButton Borders Function Only Gives Back White Borders
  • Function JavaScript : on Menu CSS HTML
  • Select inner HTML item in CSS
  • How to add closing tag for canvas in three js rendered Canvas?
  • Responsive left sidebar open close
  • Cut the background to expose the layer below
  • How to add a focus style to an editable ComboBox in WPF
  • Sonar maven jacoco code coverage for Multimodule project
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • onBackPressed() not being executed
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • How to clear text inside text field when radio button is select
  • Android fill_parent issue
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Change JButton Shape while respecting Look And Feel
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Shallow update not allowed (git > 1.9)
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unanticipated behavior
  • Data Validation Drop Down Box Arrow Disappearing
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • How to include full .NET prerequisite for Wix Burn installer
  • json Serialization in asp
  • 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?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How to stop GridView from loading again when I press back button?
  • Qt: Run a script BEFORE make
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?