-1

I have a toggle switch from this website CSS Toggle on one of my pages and I'm trying to make it hide and show a select2 box, like a toggle.

So on Document Ready I hide the secondary box, as it's not needed, then the logic for the toggle switch:

$( "#s2id_author-search" ).hide();
$( "#searchSwitch_btn" ).click(function(){
    if($("#s2id_author-search").css('display') === 'none') {
        console.log("Showing author search: 1");
        $("#s2id_author-search").show();
        console.log("Hiding title search: 2");
        $("#s2id_title-search").hide();
    }
    else {
        $("#s2id_author-search").hide();
        console.log("Hiding author search: 3");
        $("#s2id_title-search").show();
        console.log("Showing title search: 4");
    }
});

When I click the toggle switch while looking at FireBug console, I can see all console.log messages showing up, which is telling me that the script is executing in its entirety, instead of just one or the other options.

P.S. I know using the toggle() command in jQuery is more efficient but this is how the code is now for troubleshooting.

Any ideas?

Matt Bryant
  • 4,841
  • 4
  • 31
  • 46
TuxMeister
  • 275
  • 1
  • 8
  • 20
  • 1
    You must have other JS conflicting with it. It is working fine in this fiddle http://jsfiddle.net/kevinPHPkevin/GyL6a/ – Kevin Lynch Aug 26 '13 at 17:36
  • It's bound twice. Figure out why it is bound twice and you'll have your answer. Given what you've provided, we cant' figure that out for you. – Kevin B Aug 26 '13 at 17:53
  • Also, the *"toggle() command in jQuery"* you are referring to doesn't actually exist anymore in current versions of jQuery, so the way you are doing it is preferred(mostly). You could reduce the handler portion of your code down to one line: `$("#s2id_title-search,#s2id_author-search").toggle()` rather than having that if statement. – Kevin B Aug 26 '13 at 18:11

4 Answers4

0

Change your condition from:

    if($("#s2id_author-search").css('display') === 'none'){

to:

    if($("#s2id_author-search").is(':visible')){
Guerra
  • 2,792
  • 1
  • 22
  • 32
0

Well, try this 

$( "#s2id_author-search" ).hide();

        $( "#searchSwitch_btn" ).click(function(){
            if($("#s2id_author-search").is(":visible")){
                 $("#s2id_author-search").hide();
                console.log("Hiding author search: 3");
                $("#s2id_title-search").show();
                console.log("Showing title search: 4");
            }
            else {               
                console.log("Showing author search: 1");
                $("#s2id_author-search").show();
                console.log("Hiding title search: 2");
                $("#s2id_title-search").hide();
            }
        });
Username
  • 367
  • 1
  • 4
  • 13
  • I'm getting the same result. – TuxMeister Aug 26 '13 at 17:46
  • @TuxMeister, are you sure... I'm running the code and the divs are alternating. Make sure to copy the exact code I wrote. – Username Aug 26 '13 at 18:07
  • @TuxMeister, it's also logging perfectly fine in the FireBug Console. So once again copy the exact code I wrote. – Username Aug 26 '13 at 18:08
  • @TuxMeister, Hmmm.... could you possibly post the HTML that has to do with the divs your trying to hide? – Username Aug 26 '13 at 18:18
  • Copied it exactly the same way, still same result. I'm starting to go mad here lol – TuxMeister Aug 26 '13 at 18:18
  • It's a bit tricky to do that because the original HTML declares the elements to hide but then the select2 plug-in takes it and makes it into divs, but they start as input boxes. – TuxMeister Aug 26 '13 at 18:30
  • If you're modifying the dom after you bind your click element, you really should be using jQuery's on('click', , function(){}) api, and not just click(). – Jeff Paquette Aug 26 '13 at 18:42
  • @TuxMeister, I can't really do anything without knowing your HTML code. Is it at least logging in the FIreBug console? – Username Aug 26 '13 at 18:47
  • You can access the page in question [here](http://nas.remotetechs.co.uk:81/persian/web/app_dev.php/search/by/publication), I haven't see anything weird from another place calling that event, but surely something is triggering it twice. – TuxMeister Aug 26 '13 at 21:49
0

Did you define the click event more than once? If so, that code will run twice, executing both conditions. I.E. Did you do this twice on the same page:

$( "#searchSwitch_btn" ).click(...)
zigdawgydawg
  • 2,046
  • 13
  • 10
  • Nope, that's the only event for that ID anywhere in the project. This is very weird. – TuxMeister Aug 26 '13 at 17:49
  • As a way to double-check, this will tell you which events are tied to an element: `$._data( $("#searchSwitch_btn")[0], "events" );` . Otherwise, I'm not sure what could cause all console.log events to print. – zigdawgydawg Aug 26 '13 at 17:53
  • How do I see the event properties? It's explained nowhere, I've seen this on another page as well and I can't get to that information in Chrome's inspector. – TuxMeister Aug 26 '13 at 18:11
  • [Here](http://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery) is another answer that describes how to find jQuery events that are bound to an element. Basically, run the following in the Chrome developer tools console tab and expand the Object that is outputted: `$("#searchSwitch_btn")[0], "events" );` . In Chrome, you can right-click the event's handler function and click "view function definition" to jump to the location where that function is defined. – zigdawgydawg Aug 26 '13 at 18:18
  • Awesome, that worked, but doesn't help unfortunately. I see three objects: one click event, one mouseover event, and one mouseout event, no duplication of a click event as we would've expected. – TuxMeister Aug 26 '13 at 18:25
  • One surefire way to determine if the click handler function is being called twice is to add another console.log line inside the function, but outside the conditional. So...add something like `console.log("click event fired");` just before your `if` statement. If that prints out twice, then the next question is: what is causing the second click event to fire? Maybe some code is calling `$( "#searchSwitch_btn" ).click();`. It's hard to know without seeing more code. – zigdawgydawg Aug 26 '13 at 18:31
  • I've done what you suggested and indeed the function is being called twice. You can access the page in question [here](http://nas.remotetechs.co.uk:81/persian/web/app_dev.php/search/by/publication) if that helps at all. – TuxMeister Aug 26 '13 at 21:47
0

Ok guys and gals, so I finally sorted it out. The code for the toggle itself is as follows: 

       <label class="checkbox toggle candy blue" style="width: 150px;" id="searchSwitch_btn">
            <input type="checkbox" id="searchSwitch" checked="true" />
            <p>
                Search by
                <span class="switchBtn">Title</span>
                <span class="switchBtn">Author</span>
            </p>
            <a class="slide-button"></a>
        </label>

In my initial post, I was binding the click event to the label itself which, probably because of bootstrap and Symfony, is designed to focus the field that it's paired with when clicked. So by simply adding the "swichBtn" class to both spans and using that as a click event binder element, the code now works correctly. Thank you all for your input into this!

TuxMeister
  • 275
  • 1
  • 8
  • 20