8

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.

18
  • 1
    Have you tried .pagecontainer("change", page); are you using jQuery 3.x? Can you add an example of the dynamic page?
    – Omar
    Commented Jul 8, 2017 at 19:06
  • @Omar Note that the pagecontainer functions works for every other page already there after initialization of the webapp. The jQuery I'm using is included in the download package of jQuery Mobile. It can be found like this: jquerymobile.com > download latest > extract files. After this in the extracted map: jquery.mobile-1.4.5 > demos > js > jquery.mobile-1.4.5.js. I did rename the file though (to jquery.js).
    – JiFus
    Commented Jul 8, 2017 at 19:28
  • 1
    How many pages do you have inside index? Are you navigating to other files other than index file?
    – Omar
    Commented Jul 8, 2017 at 20:08
  • 1
    Are you sure all tags all closed properly? Without your actual used markup we can't predict the problem.
    – Omar
    Commented Jul 9, 2017 at 12:46
  • 2
    plnkr.co/edit/f4CzrchKzHHsQ21GAUWj?p=preview I can add as many pages as I want without any issue.
    – Omar
    Commented Jul 9, 2017 at 13:08

1 Answer 1

3
+50

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.

  • Affected widget: Navbar
  • 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>.


Because this question has received many upvotes, here are my two cents about the dynamic creation of a HTML piece with JQM:

  1. Design and test the final resulting HTML snippet by using a JQM static page, in Plunker.
  2. 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("");
    
  3. 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.


A note aside:

the question contained in the title of this post has been already answered by Omar long time ago: jquery mobile Dynamically Injecting Pages

1
  • Thanks for you answer! I updated the question title + jquery mobile file for clarity's sake
    – JiFus
    Commented Jul 17, 2017 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.