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
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.