Uncaught Error: Syntax error, unrecognized expression: [href = # "step2"]

Navigation
0

I was checking this example and implementing it in a project but I get an error, the source code is here; link

HMTL: 

<div class="container" id="myWizard">
   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
               <li><a href="#step4" data-toggle="tab">Step 4</a></li>
               <li><a href="#step5" data-toggle="tab">Step 5</a></li>
            </ul>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane active" id="step1">
         <p>Here is the content for the first step...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         <p>Here is the content for step 2...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         <p>Here is the content for step 3...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step4">
         <p>Here is the content for step 4...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step5">
         <p>This is the last step. You're done.</p>
         <a class="btn btn-success first" href="#">Start over</a>
      </div>
   </div>
</div>

The function is as follows; 

$('.next').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

});

What gives me error is the line: 

$('[href=#'+nextId+']').tab('show');

And the message is this: 

app.js:1541 Uncaught Error: Syntax error, unrecognized expression: [href=#step2]

I tried to change it for this but it still gives me an error: 

$('[href=#'+"\""+nextId+"\""+']').tab('show');
    
asked by Luis Hernandez 17.12.2018 в 16:58
source

2 answers

1

The problem is that the # is being interpreted as a special character instead of the literal # within the href . A quick solution would be to add quotation marks to the selector to delimit it correctly. So instead of doing this: 

$('[href=#'+nextId+']').tab('show');

You would do this: 

$('[href="#'+nextId+'"]').tab('show');

Which will generate the '[href="#step2"]' selector that will not fail with that error:

  

Note: I have added Bootstrap to make it look better that it already works (instead of giving a different error with the previous example I had) 

$('.next').click(function() {

  var nextId = $(this).parent('.tab-pane').next().attr("id");
  $('[href="#' + nextId + '"]').tab('show');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<div class="container" id="myWizard">
  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav nav-pills">
        <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
        <li><a href="#step2" data-toggle="tab">Step 2</a></li>
        <li><a href="#step3" data-toggle="tab">Step 3</a></li>
        <li><a href="#step4" data-toggle="tab">Step 4</a></li>
        <li><a href="#step5" data-toggle="tab">Step 5</a></li>
      </ul>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="step1">
      <p>Here is the content for the first step...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step2">
      <p>Here is the content for step 2...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step3">
      <p>Here is the content for step 3...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step4">
      <p>Here is the content for step 4...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step5">
      <p>This is the last step. You're done.</p>
      <a class="btn btn-success first" href="#">Start over</a>
    </div>
  </div>
</div>
    
answered by 17.12.2018 / 18:21
source
0

I understand that the correct selector for href should include the tag a, and also the # is a metacharacter so you should escape it with two bars like this: 

$('a[href=\#'+nextId+']').tab('show');

Can you try it and tell me if it works for you?

    
answered by 17.12.2018 в 17:05
How to do so that I do not repeat the elements of a RANDOM WITH ELEMENTS OF ARRAYLIST JAVA How can I use $ _SESSION?