JQM - How to get over TypeError: t.data(...) is undefined

Question

In JQuery Mobile, I created a dynamic listview that should create dynamic pages depending on which item is clicked. I managed to get the listview up and running but the dynamic page problem is giving me a headache because of this error:

TypeError: t.data(...) is undefined

...ollapsiblebound",!0).bind("expand collapse",function(t){var n=t.type==="collapse...

I get this on Firebug everytime I try and navigate to a dynamic page. The code I am using to create the listview is this one (and it seems to work fine):

for (i=0; i<contacts_list.length;i++) {
            var patient = contacts_list[i];
            output += "<li id=" + patient.id + "><a href='#update?patient=" + patient.id + "'><h2>" + patient.name + "</h2><a href='#' data-rel='popup' data-position-to='window' data-transition='pop'></a></li>";
        }
    }

$("#patlist").append(output).listview("refresh");

And the code I am using to create the pages from clicking in an item from the list view is very similar to the one on this page: http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html

$(document).bind("pagebeforechange", function (e, data) {

 // We only want to handle changePage() calls where the caller is
 // asking us to load a page by URL.
 if (typeof data.toPage === "string") {

     // We are being asked to load a page by URL, but we only
     // want to handle URLs that request the data for a specific
     // category.
     var u = $.mobile.path.parseUrl(data.toPage),
         re = /^#update/;

     if (u.hash.search(re) !== -1) {

         // We're being asked to display the items for a specific category.
         // Call our internal method that builds the content for the category
         // on the fly based on our in-memory category data structure.
         showPatient(u, data.options);

         // Make sure to tell changePage() we've handled this call so it doesn't
         // have to do anything.
         e.preventDefault();
     }
   }
});

function showPatient(urlObj, options) {
 var patientId = urlObj.hash.replace(/.*patient=/, ""),

     // Get the object that represents the category we
     // are interested in. Note, that at this point we could
     // instead fire off an ajax request to fetch the data, but
     // for the purposes of this sample, it's already in memory.
     patient = JSON.parse(storage.getItem("patients:" + patientId)),

     // The pages we use to display our content are already in
     // the DOM. The id of the page we are going to write our
     // content into is specified in the hash before the '?'.
     pageSelector = urlObj.hash.replace(/\?.*$/, "");

 if (patient) {
     // Get the page we are going to dump our content into.
     var $page = $(pageSelector),

         // Get the header for the page.
         $header = $page.children(":jqmData(role=header)"),

         // Get the content area element for the page.
         $content = $page.children(":jqmData(role=content)"),

         // The markup we are going to inject into the content
         // area of the page.
         markup = "<p>" + patient.name + "</p><ul data-role='listview' data-inset='true'>",

         // The array of items for this category.
         cItems = patient.name,

         // The number of items in the category.
         numItems = 1;

     // Generate a list item for each item in the category
     // and add it to our markup.
     for (var i = 0; i < numItems; i++) {
         markup += "<li>" + cItems + "</li>";
     }
     markup += "</ul>";

     // Find the h1 element in our header and inject the name of
     // the category into it.
     $header.find("h1").html(patient.name);

     // Inject the category items markup into the content element.
     $content.html(markup);

     // Pages are lazily enhanced. We call page() on the page
     // element to make sure it is always enhanced before we
     // attempt to enhance the listview markup we just injected.
     // Subsequent calls to page() are ignored since a page/widget
     // can only be enhanced once.
     $page.page();

     // Enhance the listview we just injected.
     $content.find(":jqmData(role=listview)").listview();

     // We don't want the data-url of the page we just modified
     // to be the url that shows up in the browser's location field,
     // so set the dataUrl option to the URL for the category
     // we just loaded.
     options.dataUrl = urlObj.href;

     // Now call changePage() and tell it to switch to
     // the page we just modified.
     $.mobile.changePage($page, options);
  }
}

Answer 1

You forgot to create a static page where you want to append your items to dynamically. You can create a page dynamically if you want this way, before navigating to it, upon selecting a list item.

if ($('body').find('[data-role=page]#update').length === 0) {
  $('<div/>', {
    'data-role': 'page',
     id: 'update',
    'data-theme': 'e'
  }).appendTo('body');
}