Home/ Questions/Q 6093861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T12:36:35+00:00

In order to load a jQuery mobile page using an anchor tag, one just

  • 0

In order to load a jQuery mobile page using an anchor tag, one just gives the page div’s id as the href

<a href="#page2">My link</a>
<div data-role="page" id="page2">
    <div data-role="header"></div>
    <div data-role="page"></div>
    <div data-role="footer"></div>
</div>

But this assumes that the page div was already loaded into the DOM. What if you want to generate pages and put them into the DOM like so:

$("body").append(newPageDivHTMLString);

I am trying to do it but keep getting a “Cannot call method _trigger of undefined”.

Stepping through the jQuery mobile (beta 1) source code, I found on line 2600 the following code:

page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );

where pageContainer is the HTML body element and dataUrl is my page div’s id. This computes to undefined and seems to be the source of my problem. Is it possible currently to insert a page div into a jQuery mobile page, in the manner that I am?

Thanks for reading a long question. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just tested on my local machine and this works for me:

    <html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<script>

function create_page(page_name) {
    $('body').append('<div data-role="page" id="' + page_name + '"><div data-role="content">Some content in here.</div></div>');
    //EDITED OUT, SEE BELOW $.mobile.changePage($('#' + page_name));
}

</script>
</head>
<body>



<div data-role="page">
<div data-role="content">
<a href="javascript:create_page('test_page_name');" data-role="button" style="padding:15px; font-size:30px;">TEST TEXT</a>
</div>
</div>

</body>
</html>

    —-EDIT—-
    also have this function:

    function change_page(page_name) {
   $.mobile.changePage($('#' + page_name));
}

    and use it to change to the dynamically created pages like so:

    <a href="javascript:change_page('test_page_name');" data-role="button" style="padding:15px; font-size:30px;">Change Page</a>

    There was some strange behavior with trying to link to the dynamically created page using a hash (href=”#test_page_name”). In firebug I saw that the create a page function properly appended the new page onto the body, but the change page button would create another page with the same id as the original page but a data-url that was set properly. The data-role=page div created by clicking on the change page link also had the same content as the first div, and the page created by the create_page function was just ignored.

    • 0