Menu
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.
361
I believe this issue needs to be clarified:
This isn't a jQuery error, this is a jQuery Mobile error. The
error message posted in the question is wrong, because the
jquery.mobile.js library has been renamed to jquery.js.
By using the standard jquery.mobile-1.4.5.min.js the error message
is:
Uncaught Error: Syntax error, unrecognized expression: :nth-child at jquery.mobile-1.4.5.min.js:3
but be aware, the line number may vary if a custom download is used or if the debug version is used.
This error has less to do with the dynamic page creation, because it also arises in a static page. This can be easily tested with following markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="navbar">
<ul>
<!-- no <li> here -->
</ul>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
Solution: at least one <li> shall be inside the Navbar <ul>.
If the static template works, then put the HTML pieces together. I'd like to use a simple text concatenation, but this is just a matter of personal programming style and preference (don't take this too seriously) - at least, if you are dealing with a big template, the tag nesting is immediately clear.
var html = [
'<div data-role="navbar">',
'<ul>',
'<li><a href="'+link1+'" class="ui-btn-active">'+text1+'</a></li>',
'<li><a href="'+link2+'">'+text2+'</a></li>',
'</ul>',
'</div>'
].join("");
At the end, use append() just only one time.
If someone is interested, it would be nice to hear some feedback about the performance of the different methods for HTML template/fragment creation.
the question contained in the title of this post has been already answered by Omar long time ago: jquery mobile Dynamically Injecting Pages
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
