0

This error occurs when you first load the page at an anchor and then navigate back to the main page (first page found in the html file) that contains a navbar.

Anchor Page (Refresh the browser on your anchored page):

manager.html?accountId=5#page-device-settings

Use a link to navigate back to the main page.

a href="#page-dashboard"

Main Page

manager.html?accountId=5

Contains a navbar example taken from (https://api.jquerymobile.com/tabs/)

<div data-role="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
      <li><a href="#fragment-2">Two</a></li>
      <li><a href="#fragment-3">Three</a></li>
    </ul>
  </div>
  <div id="fragment-1">
    <p>This is the content of the tab 'One', with the id fragment-1.</p>
  </div>
  <div id="fragment-2">
    <p>This is the content of the tab 'Two', with the id fragment-2.</p>
  </div>
  <div id="fragment-3">
    <p>This is the content of the tab 'Three', with the id fragment-3.</p>
  </div>
</div>

In the chrome debugger you can see this error be thrown.

Uncaught Error: Syntax error, unrecognized expression: :nth-child
at Function.db.error (jquery-2.1.0.min.js?_=1516664627221:2)
at Object.CHILD (jquery-2.1.0.min.js?_=1516664627221:2)
at ob (jquery-2.1.0.min.js?_=1516664627221:2)
at xb (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.db (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.a.find (jquery.mobile-1.4.5.js:1367)
at Function.a.find.matches (jquery.mobile-1.4.5.js:643)
at Function.o.filter (jquery-2.1.0.min.js?_=1516664627221:2)
at x (jquery-2.1.0.min.js?_=1516664627221:2)
at o.fn.init.filter (jquery-2.1.0.min.js?_=1516664627221:2)

Versions:

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

Anyone know why this is occurring and how to fix it?

I'm not sure if this is important but it's interesting to note that using the Spy plugin in Chrome, i can see the following request fire twice. Once during the initial load of the anchored page, and then again when I navigate back to the main page. This only occurs once when navigating main page -> anchored page -> main page.

Method: Get    Type: html    URL: manager.html
Olmstov
  • 563
  • 7
  • 18

1 Answers1

0

So I gutted all my code and was able to get the intended functionality working with this basic example; therefore, the issue must be on my end.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dashboard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 
<body> 


<!-- DASHBOARD -->
<div data-role="page" id="page-dashboard">

    <div data-role="header">
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="tabs" id="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
          <li><a href="#fragment-2">Two</a></li>
          <li><a href="#fragment-3">Three</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>
    </div>
    </div><!-- /content -->

</div><!-- /page -->
<!-- END DASHBOARD -->

<!-- DEVICES -->
<div data-role="page" id="page-device-settings">

    <div data-role="header">
        <h1>Device Settings</h1>
        <a href="#page-dashboard" id="pds-done" class="ui-btn-right" data-icon="check" data-inset="true" data-direction="reverse" data-transition="slidefade">Done</a>
    </div><!-- /header -->

    <div data-role="content">
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

<script>
    var current_index = $("#tabs").tabs().tabs("option","active");
    $("#tabs").tabs('load',current_index);
</script>

Note 1: I was manually entering the link to start at the anchored page:

manager.html?accountId=5#page-device-settings

Note 2: The script code was required to refresh the actively selected tab, otherwise all the tabs would show at once.

Note 3: Get request was only called once

Method: Get    Type: html    URL: manager.html

SOLUTION EDIT: My code was fixed by adding the following block in the scripts section.

var current_index = $("#tabs").tabs().tabs("option","active"); $("#tabs").tabs('load',current_index);

This also prevented the page from performing that 2nd GET html request. Maybe someone can provide more details on what is going on there.

Olmstov
  • 563
  • 7
  • 18