jquery mobile loadPage not working

Question

well, i did this question 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.

in my main page:

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

this is the html from another file:

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

and finally, the js:

 $("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 ?

@rahul but i dont need to pass anything. its just to change the page. — Ricardo Binns, Nov 19 '12 at 12:23
@KiroConeski did, but nothing, funny that cheking the chrome debug, in the html structure, the content is there, but dos not appear. if i refresh the page, the content comes up. but without all the css properties... — Ricardo Binns, Nov 19 '12 at 12:55

score 1 · Answer 1 · answered Nov 19 '12 at 17:34

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.

jquery mobile loadPage not working

1 Answers1

Linked