CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Liondancer
Liondancer

Reputation: 16489

active class does not change with javascriptfunction

I want my tabs to be correctly correlated when I click either the Join button or the sign in button. Currently, when the join button is clicked, the li tag with id="signin-tab" always has the class="active" and also id="signin-pane" has an active class as well. I thought my function joinIsSelected would handle this but it is not doing so. The tab is being active on the Sign in tab even when I click on the Join button. It is only supposed to active when I either click on the Sign in tab or Sign in button

Here is a jsfiddle:

http://jsfiddle.net/s5vcx0we/

HTML:

<nav class="navbar nav-default navbar-fixed-top">
    <div class="container">
      <ul class="navbar-left">
        <li><a>LOGO</a></li>
      </ul>
      <ul class="logged-out-nav nav navbar-nav navbar-right">
        <li><a id="join-btn" data-toggle="modal" data-target="#modal" class="btn">Join Spark</a></li>
        <li><a id="signin-btn" data-toggle="modal" data-target="#modal" class="btn">Sign in</a></li>
      </ul>
    </div>
  </nav>

  <!-- Modal -->
  <div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <!-- tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" id="signin-tab"><a href="#signin-pane" role="tab" data-toggle="tab">Sign in</a></li>
            <li role="presentation" id="new-account-tab"><a href="#signup-pane" role="tab" data-toggle="tab">New Account</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in" id="signup-pane">
              <form class="signup-form" method="post">
                {% csrf_token %}
                <input id="signup-firstname" type="text" placeholder="First Name">
                <input id="signup-lastname" type="text" placeholder="Last Name">
                <input id="signup-email" type="email" placeholder="Email">
                <input id="signup-password" placeholder="Password">
                <input id="signup-confirm-password" placeholder="Confirm Password">
              </form>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="signin-pane">
              <form class="signin-form" method="post">
                {% csrf_token %}
                <input id="signin-email" type="email" placeholder="Email">
                <input id="signin-password" type="password" placeholder="Password">
              </form>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="reset-password-pane">
              <input id="forgot-email" type="email" placeholder="Email">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

JS:

var join_btn = document.getElementById("join-btn"),
        signin_btn = document.getElementById("signin-btn"),
        signin_tab = document.getElementById("signin-tab"),
        new_account_tab = document.getElementById("new-account-tab"),
        signin_pane = document.getElementById("signin-pane"),
        signup_pane = document.getElementById("signup-pane"),
        reset_password_pane = document.getElementById("reset-password-pane");

    join_btn.addEventListener("click", joinSelected());
    signin_btn.addEventListener("click", signInSelected());

    function joinSelected() {
        $(new_account_tab).addClass("active");
        $(signup_pane).addClass("active");
        $(signin_pane).removeClass("active");
        $(signin_tab).removeClass("active");
        $(reset_password_pane).removeClass("active");

    }

    function signInSelected() {
        $(new_account_tab).removeClass("active");
        $(signup_pane).removeClass("active");
        $(signin_pane).addClass("active");
        $(signin_tab).addClass("active");
        $(reset_password_pane).removeClass("active");
    }

Upvotes: 1

Views: 169

Answers (4)

Artur Filipiak
Artur Filipiak

Reputation: 9157

The main problem of your code has been explained in another answers.

However, this is only a partial fix, as when you click any of the tabs buttons inside modal, all tab contents (except the coresponding one) will be hidden.
The tab content will not be "unhidden" when clicking your custom links then (it will stay hidden unless a tab button is clicked).

I'd show another, simplier way to achieve this, since there's no visible reason of mixing pure Javascript and jQuery:

$(document).ready(function() {
    $("#join-btn").click(joinSelected);
    $("#signin-btn").click(signInSelected);

    function joinSelected() {
        $('[href="#signup-pane"]').trigger('click');
    }
    function signInSelected() {
        $('[href="#signin-pane"]').trigger('click');
    }
});

JSFiddle

Another way:

Replace your custom buttons data attributes, add coresponding tab href and custom class:

<li><a href="#signin-pane" role="tab" data-toggle="tab" class="btn custom-toggle">Join Spark</a></li>
<li><a href="#signup-pane" role="tab" data-toggle="tab" class="btn custom-toggle">Sign in</a></li>

Your custom buttons will toggle tabs, and you just trigger the modal using jQuery:

$(document).ready(function() {
    $(".custom-toggle").click(function() {
        $('#modal').modal('show');
    });
});

JSFiddle

Upvotes: 2

Abhishek Pachal
Abhishek Pachal

Reputation: 554

JavaScript

$(document).ready(function() {

    $("#signin-btn").click(function(){
         $("#new-account-tab").removeClass("active");
        $("#signin-tab,#signin-pane").addClass("active");

    });
    $("#join-btn").click(function(){
        $("#new-account-tab,#signup-pane").addClass("active");
        $("#signin-tab").removeClass("active");
    });

});

Upvotes: 2

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9386

Here is your error.

join_btn.addEventListener("click", joinSelected());
signin_btn.addEventListener("click", signInSelected());

You are executing the functions, instead of just passing a reference to them, which has unpredictable results, manifesting themselves as the error you experience.

Do it like this instead

join_btn.addEventListener("click", joinSelected);
signin_btn.addEventListener("click", signInSelected);

Upvotes: 2

emha
emha

Reputation: 300

Don't "call" the functions when you set the eventlistener.

Your code:

join_btn.addEventListener("click", joinSelected());
signin_btn.addEventListener("click", signInSelected());

Should be:

join_btn.addEventListener("click", joinSelected);
signin_btn.addEventListener("click", signInSelected);

The difference are the "()" behind "joinSelected" and "signInSelected". When you load the page, you call these functions so the sign in tab is set to active. After that the function won't get called correctly so the tabs don't change when you click on the "join" button.

Upvotes: 1

Related Questions