CODEWITHSUNDEEP
javascriptjqueryjquery-uifirefox
Cobolt
Cobolt

Reputation: 952

JQuery UI working on chrome but not firefox

My code is simple. It can be found at this jsFiddle:

<div id="tabs">
<ul>
 <li><a href="#highlights">About</a></li>
 <li><a href="#fineprint">Fine Print</a></li>
 <li><a href="#location">Location</a></li>
</ul>
<div id="highlights">
  highlights
</div>
<div id="fineprint">
  FiNEPRINT
</div>
<div id="location">
  <ul>
    <li>
        <address>ADDRESS</address>
    </li>
    <li>
   MAP
    </li>
  </ul>

</div>


<button class="btn-placeorder"><span id="maplink">View map</span></button>

 <script>
 $(function(){
  $("#tabs").tabs();
 });
 $('#maplink').click(function(){
   $("#tabs").tabs("option","active",2);
 });
</script>

On Firefox you will notice, even in the fiddle the tabs don't change when the view map button is clicked.

I don't work with javascript much but I'd love to gain a better understanding of how to diagnose and solve these problems. Why is this happening, how can I solve it and how can I better educate myself?

Upvotes: 2

Views: 4545

Answers (4)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146410

First debugging tip: use tools. Most browser's nowadays include debugging tools you can call with F12. In Firefox, the short-cut is Cmd+Opt+K or Ctrl+Shift+K though I recommend you open the add-on manager and install Firebug.

Second tip: check whether your code runs. The console API is a good start:

$('#maplink').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

Nothing gets printed so your event is not being called. We can see it isn't attached directly to the button but to an inner <span>:

<button class="btn-placeorder"><span id="maplink">View map</span>
</button>

So we wonder: is there something wrong with onclick events on spans?

$("span").on("click", function(){
    console.log("click on span: %o", this);
});

Nothing printed, so there's apparently an issue. It is possible that the button is catching the onclick event?

<button class="btn-placeorder"><span id="maplink">View map</span>
    </button><span>Test span</span>

click on span: <span>

So that it's! Weird... Well, why do you need a <span> in the first place?

$('.btn-placeorder').click(function () {
    console.log("Button clicked");
    $("#tabs").tabs("option", "active", 2);
});

It works! All we need now is some cleanup, such as assigning a proper ID to the <button> and getting rid of the redundant <span>.

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

Even if other answers are also correct, there could be another problem, the on click event handler registration is happening outside dom ready.

Try

$(function() {
    $("#tabs").tabs();
    $('#maplink').click(function() {
        $("#tabs").tabs("option", "active", 2);
    });
});

Demo: Plunker

Upvotes: 0

DVM
DVM

Reputation: 1238

Replace the id of the span with the actual class of the button, like this:

 $('.btn-placeorder').click(function(){
   $("#tabs").tabs("option","active",2);
 });

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

Your #maplink selector matches your inner <span> element, not its <button> parent.

Try writing:

<button id="maplink" class="btn-placeorder"><span>View map</span></button>

Instead of:

<button class="btn-placeorder"><span id="maplink">View map</span></button>

Upvotes: 1

Related Questions