2017-02-23 78 views
0

我与引导nav-tabs,当触发标签的展示活动的工作,我做了一个if测试,如果失败了我所说的e.preventDefault();如下:避免对引导标签Show事件

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    if(test){ 
     e.preventDefault(); 
     return false; 
    } 
}); 

其中一期工程在这种情况下。

在另一种情况下我叫AJAX功能,它会还给我一个结果,根据这个结果我想阻止Show事件的默认行为,如下:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    checkPageLayoutsAreSelected(); 
    window.getLayoutAreSelectedResult = function(xhr, status, args) { 
     if(args.returnedValue === false){ 
      e.preventDefault(); 
      console.log('Hello.'); 
      return false; 
     } 
    }; 
}); 

的checkPageLayoutsAreSelected()函数将执行ajax调用,如果成功,它将调用window.getLayoutAreSelectedResult()函数。 请注意,在这种情况下会打印Hello记录的消息。

这里的问题是即使我打电话给e.preventDefault();也总是显示标签。

我认为在ajax调用完成之前show事件已经触发。

我该如何解决这个问题?

我认为是完成此另一种方法,这是要记住的最新选择的选项卡,然后,而不是调用我们显示当前选中的标签前的最新选定的选项卡的e.preventDefault(),所以以下:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 

    //TODO : get the latest selected tab before this current selected tab 

    checkPageLayoutsAreSelected(); 
    window.getLayoutAreSelectedResult = function(xhr, status, args) { 
     if(args.returnedValue === false){ 
      var tab = $(".tabs").find("[data-target='"+latestSelectedTab+"']")[0]; 
      $(tab).tab('show'); 
     } 
    }; 
}); 

但我不知道如何才能在当前选定的选项卡之前获取最新的选定选项卡。

回答

0

原则上我建议避免链接页面导航与ajax调用,因为这会在您的用户界面中添加一个“打嗝”,这意味着该选项卡将等待,直到通话完成,然后做你想做的任何事情。

我建议你加载确定标签内容是否显示在页面加载而不是在标签点击时应该显示的值。你可以将这些值存储在隐藏的输入或者数组上,然后检查这些值,你的浏览体验就没问题。

+0

不幸的是,如果你想这样做,我不能这样做,因为'checkPageLayoutsAreSelected'不能在页面加载 –

+0

被称为 “我认为还有另一种方法来完成这一点,这是要记住最新然后不是调用e.preventDefault(),而是在当前选定的选项卡之前显示最新选定的选项卡,因此可以使用以下语句:“ ”您可以声明一个变量,例如 '变种selectedTab' ,然后更新它,当示出像 '$( '一个[数据肘节= “标签”]')。在( 'show.bs.tab',函数的标签(例如){ 如果(args.returnedValue ===假){ $(selectedTab)的.tab( '节目'); } selectedTab = selectedTab = $(e.target).attr(的 “href”); }); –