4 Replies - 191 Views - Last Post: 05 June 2018 - 11:01 AM

#1 Srinethe   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 18

Clicking on link adds to the URL but does not work

Posted 04 June 2018 - 01:11 AM

I am using bootstrap tabs to perform my functions. When I click on a tab it adds to the URL but the changes are not applied to the page. The changes are applied when I open the link in a new tab.

The javascript code that i am using:
        $(function() {
              $( 'ul.nav li' ).on( 'click', function() {
                    $( this ).parent().find( 'li.active' ).removeClass( 'active' );
                    $( this ).addClass( 'active' );
              });

        });  

        $(document).ready(function() {
          /* Automagically jump on good tab based on anchor; for page reloads or links */
          if(location.hash) {
            $('a[href=' + location.hash + ']').tab('show');
          }

          $(document.body).on("click", "a[data-toggle]", function(event) {
            location.hash = this.getAttribute("href");
          });
        });

        $(window).on('popstate', function() {
          var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
          $('a[href=' + anchor + ']').tab('show');
        });



The first part is to change the class active according to the tab open. And the rest is to open the tab.

The HTML code that I am using is as follows:
                <div class="hr-divider m-y-md">
                  <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist" id="mynav">
                    <li class="active" role="presentation">
                      <a href="#weekly_exp" role="tab" data-toggle="tab" aria-controls="weekly_exp">Weekly</a>
                    </li>
                    <li role="presentation">
                      <a href="#monthly_exp" role="tab" data-toggle="tab" aria-controls="monthly_exp" >Monthly</a>
                    </li>
                    <li role="presentation">
                      <a href="#yearly_exp" role="tab" data-toggle="tab" aria-controls="yearly_exp" >Yearly</a>
                    </li>
                  </ul>
                </div>

                <div class="tab-content">

                      <div role="tabpanel" class="tab-pane active" id="weekly_exp" name="weekly_exp">
                          <div id="pieWeek"></div>
                      </div>

                      <div role="tabpanel" class="tab-pane" id="monthly_exp" name="monthly_exp">
                            <div id="pieMonth"></div>
                      </div>

                      <div role="tabpanel" class="tab-pane" id="yearly_exp" name="yearly_exp">
                            <div id="pieYear"></div>
                      </div>

                </div>
            </div>



Hope to get a suitable answer soon. Thanks in advance guys.

Is This A Good Question/Topic? 0
  • +

Replies To: Clicking on link adds to the URL but does not work

#2 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6549
  • View blog
  • Posts: 26,555
  • Joined: 12-December 12

Re: Clicking on link adds to the URL but does not work

Posted 04 June 2018 - 04:49 AM

"but the changes are not applied to the page"

I am not sure which part of your code is not working - what changes are you referring to?

Have you taken some debugging steps, using console.log and setting breakpoints?
Was This Post Helpful? 0
  • +
  • -

#3 Srinethe   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 18

Re: Clicking on link adds to the URL but does not work

Posted 04 June 2018 - 06:36 PM

View Postandrewsw, on 04 June 2018 - 04:49 AM, said:

"but the changes are not applied to the page"

I am not sure which part of your code is not working - what changes are you referring to?

Have you taken some debugging steps, using console.log and setting breakpoints?


There seems to be no error in the log.The problem is just that when I click a link my javascript perfectly adds the id to the URL but does not display the relevant data in the webpage.But when I right click the link and open it in another webpage,it works fine.Then I googled several forums and found that the problem arises with the bootstrap tabs and javascript.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 2030
  • View blog
  • Posts: 6,196
  • Joined: 15-January 14

Re: Clicking on link adds to the URL but does not work

Posted 05 June 2018 - 10:05 AM

Are there any Javascript error messages in the developer console?
Was This Post Helpful? 0
  • +
  • -

#5 Srinethe   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 18

Re: Clicking on link adds to the URL but does not work

Posted 05 June 2018 - 11:01 AM

View PostArtificialSoldier, on 05 June 2018 - 10:05 AM, said:

Are there any Javascript error messages in the developer console?


There was no error in the javascript console
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1