I have been hitting my head against a wall for a few hours now, and still can't seem to get this to work.
I'm making a web application, using a multi page template (having multiple pages in my index.html.
Objective: dynamically create a new page, and then show this page on screen.
Problem: after creating the page, and trying to change to this page I get the following error: Error: Syntax error, unrecognized expression: :nth-child in jquery.mobile-1.4.5.js:1850:8
The relevant code can be found below:
JavaScript
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Change the page
$.mobile.pageContainer.pagecontainer('change', $('#' + pageId));
HTML
The page has been created and added to the <body>, so I will omit the HTML part.
I think the page might not be registered into the pagecontainer, which gives an error? I have looked, but there doesn't seem to be a pagecontainer refresh method.
Any ideas on how to fix this?
Edit 1:
Using the mentioned code to navigate to another page, for example the homepage works just fine. The only page not working is the newly created page.
Edit 2:
It seems the page I create produces the error. The code which was used to navigate to the page worked properly.
The code I use to create the page:
var page = $('<div/>', {
id: pageId,
'data-role': 'page',
'data-dom-cache': 'false',
});
var content = $('<div/>', {
'data-role': 'content',
});
var courseTabs = $('<div/>', {
'data-role': 'tabs',
});
var courseNavbar = $('<div/>', {
'data-role': 'navbar',
}).append($('<ul/>'));
var courseBtn = $('<a/>', {
href: '#',
class: 'ui-btn',
text: 'testbutton',
});
// Glue the page parts together in the page.
courseTabs.append(courseNavbar);
content.append(courseTabs).append(courseBtn);
page.append(content);
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Navigate to the page
$.mobile.pageContainer.pagecontainer("change", page, {
transition: "flip"
});
Above code produces the error.