0

I have tabs on a page that are giving me trouble. I think it is in the js code. Sometimes you have to doubleclick on the tabs, sometimes you don't.

This is using HAML in Rails, which I am not as familiar with. I also didn't write the original code. I am taking over on a project.

Here are the codes: HAML

#myTabs
 %ul.tab-buttons.tab-buttons--boxed.tab-buttons--left.js-tabs.nav-tabs
   %li.active.tab-button
    %a#tab1.tab-button-link.active{"data-toggle" => "tab", "data-projects" => "not_archived"} Current Projects
   %li.tab-button
    %a#tab2.tab-button-link{"data-toggle" => "tab", "data-projects" => "archived"} Archived Projects

.tab-content
 #tab1C.container
  %ul.list-project
   = render @projects
 #tab2C.container
  %ul.list-project

JS

$('.js-tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();

  $('.js-tabs li a').click(function(){
    var that = this;
    var t = $(that).attr('id');
    $.get("/projects", {projects: $(that).data("projects")}, function(){},'json')
      .done(function(data){
        var projects = data.projects;
        if($(that).hasClass('inactive')){
          $(that).removeClass('inactive');
          $(that).addClass('active');
          $('#'+t+'C .list-project').html(projects);
          $('.container').hide();
          $('#'+ t + 'C').fadeIn('slow');
        } else {
          $(that).removeClass('active');
          $(that).addClass('inactive');
          $('#'+t+'C .list-project').html(projects);
          $('.container').hide();
          $('#'+ t + 'C').fadein('slow');
      };
        $('.open-popup-link').magnificPopup(magnificPopupOptionsPermissionEmail);
      })
  });

I tried to show the codes in codepen but it isn't showing accurately. Codepen

LaFrish
  • 33
  • 1
  • 8

1 Answers1

1

Are you finding that you have to double click if you just entered the page, but single click if you refresh the page?

If so, then turboloading may be the problem. A common fix is as follows:

var ready;
ready = function() {
    // add your functions and calls here
}
$(document).ready(ready);
$(document).on('page:load', ready);
Okomikeruko
  • 1,123
  • 10
  • 22
  • Unfortunately, It is not on just the page load. It appears to be more like the tab is showing on one click and then the content is showing on a second click. – LaFrish Jul 09 '16 at 17:18
  • Another issue I've had with some browsers is if content is trying to load simultaneously, it sometimes doesn't work. I've had to add a 10 millisecond delay on occasion to make sure everything moves correctly. You can find out more here: http://stackoverflow.com/questions/17883692/how-to-set-time-delay-in-javascript – Okomikeruko Jul 11 '16 at 17:12