Uncaught Error: Syntax error, unrecognized expression: #job-results?Locations=Brisbane

[acha5066]

I have inherited a site built with jQuery Mobile and I'm getting an error when trying to use the back button on a page with multiple sections that are loaded on request. See below. My version of jQuery is 1.8.3, jQuery mobile is version 1.2.1

The workflow of this portion of the site is the user is taken to a job search form, they select a few options and submit. The values from the form are appended to a query string and a list of jobs are displayed. They click on a singular one and land on the detail page. Now if they want to go back they click the back button and the console throws this error, except the part of the ? could be different each time.

Uncaught Error: Syntax error, unrecognized expression: #job-results?Locations=Brisbane

The div in question below is the one with id job-detail

<?php get_header(); the_post(); ?>
<!-- Search Page -->
<div id="job-search" data-role="page">

    <div class="lcpl-header" data-id="header" data-role="header" data-position="fixed">
        <h1>Job search</h1>
        <a class="ui-btn-right" href="<?php echo get_site_url(); ?>/?home" data-iconpos="notext" data-icon="home">Home</a>
    </div><!-- /header -->

    <div class="job-search" data-role="content">

        <div id="job-search-filters">
            <div class="loading"><div class="loading-icon"></div>Loading filters</div>
        </div>

    </div><!-- /content -->

    <?php include 'footer-bar.php'; ?>

</div>

<!-- Results Page -->
<div id="job-results" data-role="page">

    <div class="lcpl-header" data-id="header" data-role="header" data-position="fixed">
        <a href="#" data-iconpos="notext" data-rel="back" data-icon="search">Search</a>
        <h1>Job search</h1>
        <a href="<?php echo get_site_url(); ?>/?home" data-iconpos="notext" data-icon="home">Home</a>
    </div>

    <div id="job-search-results" data-role="content">
        <h2 id="job-search-results-title"></h2>
        <div id="job-search-results-wrap" class="listings">
            <div class="loading"><div class="loading-icon"></div>Loading results</div>
        </div>
    </div>

    <?php include 'footer-bar.php'; ?>

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

<!-- Detail Page -->
<div id="job-detail" data-role="page">

    <div class="lcpl-header" data-id="header" data-role="header" data-position="fixed">
        <a href="#" data-iconpos="notext" data-rel="back" data-icon="back">Back</a>
        <h1>Job search</h1>
        <a href="<?php echo get_site_url(); ?>/?home" data-iconpos="notext" data-icon="home">Home</a>
    </div>

    <div id="job-detail-content" data-role="content">
        <div class="loading"><div class="loading-icon"></div>Loading details</div>
    </div>

    <?php include 'footer-bar.php'; ?>

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

<!-- Detail Email Page -->
<div id="job-email" data-role="page">

    <div class="lcpl-header" data-id="header" data-role="header" data-position="fixed">
        <a href="#" data-iconpos="notext" data-rel="back" data-icon="search">Search</a>
        <h1>Send job to email</h1>
        <a href="<?php echo get_site_url(); ?>/?home" data-iconpos="notext" data-icon="home">Home</a>
    </div>

    <div id="job-email-content" data-role="content">
        <p>Remind yourself about this job by sending it to your email address.</p>
        <form id="job-email-form" action="<?php echo get_site_url(); ?>/people/careers/job-search/?email">
            <input id="job_email_address" name="job_email_address" type="email" placeholder="Enter your email address">
            <input type="submit" value="Send &amp; return to job">
        </form>
    </div>

    <?php include 'footer-bar.php'; ?>

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


<?php get_footer(); ?>

[marti1125]

Hi @acha5066 any update about this issue?

[apsdehal]

Hi, this really doesn't seems an issue with jqm but a one with your implementation. Kindly provide the final html output (without any PHP code) using this template: http://jsbin.com/huvoraba/1/edit?html,output and reopen the issue.