За последние 24 часа нас посетил 22461 программист и 1185 роботов. Сейчас ищут 729 программистов ...

использование localStorage на bootstrap вкладках

Тема в разделе "JavaScript и AJAX", создана пользователем AlexsaiL, 25 май 2017.

  1. AlexsaiL

    AlexsaiL Активный пользователь

    С нами с:
    23 дек 2016
    Сообщения:
    327
    Симпатии:
    23
    при перезагрузке страницы мне нужно отображение этой же(текущей) вкладки, но отображается всегда первая. прописываю скрипт на сайте:
    Код (Javascript):
    1. <script type="text/javascript">
    2.         $(function() {
    3.     $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
    4.     // сохраним последнюю вкладку
    5.     localStorage.setItem('lastTab', $(this).attr("rel"));
    6.   });
    7.  
    8.   //перейти к последней вкладки, если она существует:
    9.   var lastTab = localStorage.getItem('lastTab');
    10.   if (lastTab) {
    11.     $('li[rel="' + lastTab + '"]').tab('show');
    12.   }
    13.   else
    14.   {
    15.     // установить первую вкладку активной если lasttab не существует
    16.     $('li[data-toggle="tab"]:first').tab('show');
    17.   }
    18. });
    19.     </script>
    на чистом проекте тестирую (там с тегами <a data-toggle="tab"> все работает и там в место $(this).attr("rel")) применял $(this).attr("href"))), все работает с bootstrap вкладками, но использую на рабочем проекте где еще применяется другой скрипт на вкладки, перестает работать, ошибки не выдает в браузере.
    подскажите в чем может быть ошибка несовместимости при использовании localStorage скрипт:
    Код (Javascript):
    1. <script type="text/javascript">
    2.         $(function() {
    3.     $('li[data-toggle="tab"]').on('shown.bs.tab', function () {
    4.     // сохраним последнюю вкладку
    5.     localStorage.setItem('lastTab', $(this).attr("rel"));
    6.   });
    7.  
    8.   //перейти к последней вкладки, если она существует:
    9.   var lastTab = localStorage.getItem('lastTab');
    10.   if (lastTab) {
    11.     $('li[rel="' + lastTab + '"]').tab('show');
    12.   }
    13.   else
    14.   {
    15.     // установить первую вкладку активной если lasttab не существует
    16.     $('li[data-toggle="tab"]:first').tab('show');
    17.   }
    18. });
    19.     </script>
    и скрипта для работы со вкладками на разных расширения экрана:
    Код (Javascript):
    1. (function($){
    2.     //Attach this new method to jQuery
    3.      $.fn.extend({
    4.        
    5.          //This is where you write your plugin's name
    6.          champ: function(options) {
    7.             //Iterate over the current set of matched elements
    8.  
    9.              var defaults = {
    10.                 selector:"tab_wrapper",
    11.                 plugin_type: "tab",
    12.                 side:"",
    13.                 active_tab:"1",
    14.                 controllers:"false",
    15.                 ajax:"false",
    16.                 show_ajax_content_in_tab:"false",
    17.                 content_path:"false"
    18.             }
    19.  
    20.  
    21.             var obj = $.extend(defaults, options);
    22.  
    23.             var li_rel = 1, div_rel = 1;
    24.  
    25.             return this.each(function() {
    26.                
    27.                 var plugin_type = obj.plugin_type;
    28.                 var side = obj.side;
    29.                 var active_tab = obj.active_tab;
    30.                 var controllers = obj.controllers;
    31.                 var ajax = obj.ajax;
    32.                 var show_ajax_content_in_tab = obj.show_ajax_content_in_tab;
    33.                 var content_path = obj.content_path;
    34.  
    35.                 var tab_content_selector = $(this).find(" > div > div.tab_content");
    36.                 var tab_selector = $(this).find(" >ul li");
    37.                 var parent = $(this);
    38.                 var controller_parent = $(".controller").closest(".tab_wrapper");
    39.                 var con_siblings;
    40.  
    41.                 parent.addClass(side+"_side");
    42.  
    43.  
    44.  
    45.                 if (controllers == "true") {
    46.                     parent.addClass("withControls");
    47.                     parent.append("<div class='controller'><span class='previous'>previous</span><span class='next'>next</span></div>");
    48.                 }
    49.                
    50.                 if (plugin_type == "accordion") {
    51.                     //alert(34);
    52.                     parent.addClass("accordion");
    53.                     parent.removeClass(side+"_side");
    54.                     parent.removeClass("withControls");  
    55.                     $(".controller",parent).remove();              
    56.                 }
    57.  
    58.                 if (ajax == "true") {
    59.                     $.ajax({url: content_path, success: function(result){
    60.                         $(" .tab_content.tab_"+ show_ajax_content_in_tab, parent).html(result);
    61.                     }});
    62.  
    63.                     $( document ).ajaxError(function( event, request, settings ) {
    64.                       $(" .tab_content.tab_"+ show_ajax_content_in_tab, parent).prepend( "<h4 class='error'>Error requesting page " + settings.url + "</h2>" );
    65.                     });
    66.                 }
    67.  
    68.  
    69.                 function hide_controls(parent){
    70.                     if(parent.find(" >ul li:eq(0)").hasClass("actives")){
    71.                         $(".controller .previous", parent).hide();
    72.                     }
    73.                     else{
    74.                         $(".controller .previous", parent).show();
    75.                     }
    76.  
    77.                     if(parent.find(" >ul li").last().hasClass("actives")){
    78.                         $(".controller .next", parent).hide();
    79.                     }
    80.                     else{
    81.                         $(".controller .next", parent).show();
    82.                     }
    83.                 }
    84.  
    85.                 $(".controller .previous", $(this)).click( function(){
    86.                     con_siblings = $(this).closest(".controller");
    87.                     con_siblings.siblings("ul" ).find("li.actives").prev().trigger("click");
    88.                     hide_controls(controller_parent);
    89.  
    90.                 });
    91.  
    92.                 $(".controller .next", $(this)).click( function(){
    93.                     con_siblings = $(this).closest(".controller");
    94.                     con_siblings.siblings("ul" ).find("li.actives").next().trigger("click");
    95.                     hide_controls(controller_parent);
    96.                    
    97.                 });
    98.  
    99.                 $(this).find(" >ul li").removeClass("actives");
    100.                 $(this).find(" > div > div.tab_content").removeClass("actives");
    101.  
    102.                 if(active_tab==""){
    103.                     $(this).find(" >ul li:eq(0)").addClass("actives").show(); //set active tab on load  
    104.                     $(this).find(" > div > div.tab_content:eq(0)").addClass("actives").show(); //set active tab on load  
    105.                     hide_controls(parent);
    106.  
    107.                 }
    108.                 else{
    109.                     $(this).find(" >ul li:eq("+(active_tab-1)+")").addClass("actives").show(); //set active tab on load
    110.                     $(this).find(" > div > div.tab_content:eq("+(active_tab-1)+")").addClass("actives").show(); //set active tab on load
    111.                     hide_controls(parent);
    112.                 }
    113.  
    114.                 tab_content_selector.first().addClass("first");
    115.                 tab_content_selector.last().addClass("last");
    116.  
    117.  
    118.                 // add class to content div
    119.                 tab_content_selector.each(function(){
    120.                     var add_relation = "tab_"+div_rel;
    121.                     $(this).addClass(add_relation);
    122.                     $(this).attr("alt", add_relation);
    123.                     div_rel++;
    124.                 });
    125.  
    126.  
    127.                 // add relation attr to li and generate accordion header for mobile
    128.                 tab_selector.each(function(){
    129.                     var accordian_header = $(this).text();
    130.                     var add_relation = "tab_"+li_rel;
    131.                     var get_parent = $(this).closest(".tab_wrapper");
    132.                     $(this).attr("rel", add_relation);
    133.  
    134.                     var current_tab_class = $(this).attr("class");
    135.  
    136.                     tab_content_selector.each(function(){
    137.                         if($(this).hasClass(add_relation)){
    138.                            get_parent.find(" > div > div.tab_content." + add_relation).before("<div alt='" + add_relation + "' class='accordian_header " + add_relation + ' ' + current_tab_class +"'>" + accordian_header + "<span class='arrow'></span></div>");
    139.                         }
    140.                     });
    141.  
    142.                     li_rel++;
    143.                 });
    144.  
    145.  
    146.                 // on click of accordion header slideUp/DlideDuwon respective content
    147.                 $(".accordian_header").click(function(){
    148.                     var clicked_header = $(this).attr("alt");
    149.                     var content_status = $(this).next(".tab_content").css("display");
    150.                     var get_closest_parent = $(this).closest(".tab_wrapper");
    151.                    
    152.                     if (content_status == "none") {
    153.                         $(".accordian_header").removeClass("actives");
    154.                         $(this).addClass("actives");
    155.                         tab_content_selector.removeClass("actives").slideUp();
    156.                         get_closest_parent.find(" > div > div.tab_content."+clicked_header).addClass("actives").slideDown();
    157.                     }
    158.                 });
    159.  
    160.                 // on click of tab hide/show respective content
    161.                 tab_selector.click(function(){
    162.                     var clicked_tab = $(this).attr("rel");
    163.                     var get_new_closest_parent = $(this).closest(".tab_wrapper");
    164.                     get_new_closest_parent.find(" .accordian_header").removeClass("actives");
    165.                     get_new_closest_parent.find(" .accordian_header."+clicked_tab).addClass("actives");
    166.  
    167.                     tab_content_selector.removeClass("actives").hide();
    168.                     get_new_closest_parent.find(" > div > div.tab_content." +clicked_tab).addClass("actives").show();
    169.                     tab_selector.removeClass("actives");
    170.                     $(this).addClass("actives");
    171.                     hide_controls(get_new_closest_parent);
    172.                 });
    173.            
    174.             });
    175.         }
    176.     });
    177.          
    178. })(jQuery);
    в javascript не силен особо, подскажите что может перебивать localStorage.
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.230
    Симпатии:
    1.715
    Адрес:
    Молдова, г.Кишинёв
    отладку делать
     
  3. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.825
    Симпатии:
    738
    Адрес:
    Татарстан
    попробуйте в своем скрипте переменной другое имя дать, не lastTab а lastTabNew например. А так, да - отладка с просмотром локал стореджа наше все )
     
    denis01 нравится это.
  4. AlexsaiL

    AlexsaiL Активный пользователь

    С нами с:
    23 дек 2016
    Сообщения:
    327
    Симпатии:
    23
    попробовал, без изменений, буду отладку делать. может что то найду. Там скорее всего скрипт задает свои параметры, а скрипт локал сторедж их не перебивает.
     
  5. AlexsaiL

    AlexsaiL Активный пользователь

    С нами с:
    23 дек 2016
    Сообщения:
    327
    Симпатии:
    23
    Всем спасибо! решил возникшую ошибку. надо было заменить:
    Код (Javascript):
    1. $('li[rel="' + lastTabNew + '"]').tab('show');
    на этот код:
    Код (Javascript):
    1. $('li[href="' + lastTabNew + '"]').trigger('click');
    Вроде все заработало:cool: