Forum Discussion

ArchiveUser's avatar
ArchiveUser
Qrew Captain
8 years ago

Can jquery tabs return back to same tab once I update the form?

I am using Dan's jquery code below. I love it and my users love it. However, we noticed that once we update the form the tab code returns us to the first tab instead of taking us back to the tab we were in.

Is there a way to modify the code so it returns us to the current tab instead of returning to the first tab?

Thanks guys!



"<img qbu=\"module\" src=\"/i/clear2x2.gif\" " &

"onload=\"javascript:if(typeof QBU=='undefined'){QBU={};$.getScript('" &

URLRoot() &

"db/" &

Dbid() &

"?a=dbpage&pagename=module.js&rand='+Math.random())}\">"

on the Code Page I have this code:

Page name is module.js


Code:

 var markup = "";

    markup += "<ul>";

    $("#formContents div.sectionDiv").each(function(index){

      markup += "<li><a href='#tab_" + (index+2) + "'>" + $("span.sectionTitle",this).text() + "</a></li>";

    });

    markup += "</ul>";



    $("#formContents").prepend(markup);



    $("#formContents div.sectionDiv").each(function(index){

      $(this).attr("id","tab_" + (index+2));

      $("div:lt(2)",this).hide();

    });



    $("#formContents").tabs();
  • You would have to save the current tab in localStorage after every tab change and read it back in when the form reopens and set the current tab. This is how QuickBase remembers open sections on a per user basis.

    This is not something I would contribute publicly so if you want to pursue a solution feel free to contact me off-world using the information in my profile:

    https://quickbase-community.intuit.com/users/513/
    • JoshuaTate's avatar
      JoshuaTate
      Qrew Cadet
      Hey Dan, 
      Heres a solution to the above question, so long as #tab_TXX is in the RURL that is set before the user creates a new record etc this function can be run on page load via BOL/IOL etc 

      function returnToTabz(){
      //Step1 - find the hash in the URL and make it match the tab naming convention
      var rmHas = document.location.hash.replace("#", '');
      //add link to end of the variable
      rmHas += "_link"
      //Step2 - Generate an array from tablist
      var finoActivo = document.querySelector('#formTabsList').childNodes
      var moloActivo = Array.from(finoActivo);

      //Step3 - iterate through each confirming the expected result is not the current tab viewed else make it the active tab.
      var moloLen = moloActivo.length-1;
      for (var ps = 0; ps < moloLen; ps++) {
      if (moloActivo[ps].nodeName !== "#text") {
      if (moloActivo[ps].classList.contains('ui-state-active') === true ) {
      if(moloActivo[ps].id !== rmHas) {
      var rmBoA = moloActivo[ps].id.replace('_link', '');
      var rmBoB = rmHas.replace('_link', '');
      //if current active is not the target then make it so
      var rmGiv = document.querySelector('#'+rmHas).classList;
      var rmBoAcl = document.querySelector('#'+rmBoA).classList;
      var rmBoBcl = document.querySelector('#'+rmBoB).classList;
      var liteBe = moloActivo[ps].classList;
      liteBe.remove('ui-state-active', 'ui-tabs-selected');
      rmGiv.add('ui-tabs-selected', 'ui-state-active');
      rmBoBcl.remove('ui-tabs-hide');
      rmBoAcl.add('ui-tabs-hide');
      }}
      }}}

    • JoshuaTate's avatar
      JoshuaTate
      Qrew Cadet
      more to follow on the whole local storage thing soon :) this is one of the biggest pain points for people on quickbase, figure i will just give out the solution as it SHOULD have been a standard feature in quickbase.
    • JoshuaTate's avatar
      JoshuaTate
      Qrew Cadet
      So the Quickbase Tab Handler doesn't work as expected in most situations. if anyone has this issue the below code block will give you a starting hand in getting a solution to the problem which you could extend to other purposes. I have also provided a code flow diagram. This script is used in conjunction with the function in the above comment with both applied to either a IOL or BOL tag.

      //Add an event listener on all href tags which include #tab, this will trigger the function to run every time you change tabs.
      $('a[href^="#tab"]').on('click', sendMeBackRight(event))

      //lets define our function thats run on each event trigger above
      function sendMeBackRight(event) {
      //below we set our realm variable
      var realmName = "unimatrix001"
      //gets the hash from the event
      var EvName = event.target.hash;
      //Below setsup all Regular Expressions required for the whole function
      var regexEdPg = new RegExp(/(&z=.+?.{1,10}(?='))/);
      var regexP = new RegExp(/(\?a=.+?(?=&))/);
      var regexPt = new RegExp(/(\?a=.+?.{1,6})/);
      var regexPrd = new RegExp(/(&z=.+?.{1,10})/);
      var regexNuR = new RegExp(/(\&nexturl=.+?.{1,100})/);
      var regexNeD = new RegExp(/(\&nexturl=.+?.{1,100})(?=')/);
      //setup variable for the location
      var regLocS = document.location.search;
      //below we test 2 situations and set a variable accordingly, we look for the action and make it a variable to apply to the return string.
      if (regexP.test(regLocS) !== null) {
      var regRedV = regLocS.match(regexP)[0];}
      if (typeof regRedV === 'undefined') {
      if (regexPt.test(regLocS) !== null) {
      var regRedV = regLocS.match(regexPt)[0];}}
      if (typeof regRedV !== undefined) {
      //Only if the action type is found and set to variable do we move on to encode and build the next url string to be applied to all href tags in scope as well as onclick event for edit record buttons. does apply to new records but gets overwritten by the onclick function - you can write your own handler for this if you like.
      if (regRedV !== null) {
      var conChe = encodeURIComponent(EvName);
      var conChD = encodeURIComponent(regRedV);
      //Below is the literal block to build our return path
      var lstVisResSS = '&nexturl=https%3A%2F%2F${realmName}}.quickbase.com%2Fdb%2F${gDBID}${conChD}%26rid%3D${kRid}${conChe}';

      //set a variable with selector to obtain then loop through each add href tag in the form that contains text 'Add' and the class 'vibrant', just add a code block for other URLs like save and close etc for edit forms back to same tab in view record and so on.
      var daTagz = $("a:contains('Add')[class='Vibrant']");
      let vibUrlLen = $("a:contains('Add')[class='Vibrant']").length;
      for (let i = 0; i < vibUrlLen; i++) {
      var resToPro = "";
      //if the href tag includes the z redirect we strip it and add the current tab info
      if (daTagz.href.includes("&z=")) {
      //using regexp replace the z with the nexturl
      resToPro = daTagz.href.replace(regexPrd,lstVisResSS);
      //apply the attribute to the element
      daTagz.setAttribute('href', resToPro);
      } else if (daTagz.href.includes("&nexturl=")) {
      //this updates previously set urls with the latest tab
      resToPro = daTagz.href.replace(regexNuR,lstVisResSS);
      daTagz.setAttribute('href', resToPro);
      //the below block similar to above handles onclick href in add and edit screens, remember it works for edit, for add you will need to extend to handle add or remove it from scope only in this situation.
      } else if (typeof daTagz.attributes.onclick !== 'undefined') {
      var edPgVa = daTagz.attributes.onclick.value;
      if (regexEdPg.test(edPgVa) !== false) {
      var pgEdVa = edPgVa.replace(regexEdPg,lstVisResSS);
      daTagz.setAttribute('onclick', pgEdVa);
      } else if(regexNeD.test(edPgVa) !== false) {
      var pgEdNr = edPgVa.replace(regexNeD,lstVisResSS);
      daTagz.setAttribute('onclick', pgEdNr);
      }
      }
      }}}}


  • Hi I am facing the same issue I have tabs but need a way modify the code so it returns us to the current tab. I don't see anything in Dan's profile that would allow me to contact him. If Dan or anyone else can help me  would appreciate it. 

    My code is 

    var markup = "";    markup += "<ul>";
        $("#formContents div.sectionDiv").each(function(index){
          markup += "<li><a href='#tab_" + (index+1) + "'>" + $("span.sectionTitle",this).text() + "</a></li>";
        });
        markup += "</ul>";

    $("#formContents").prepend(markup);

        $("#formContents div.sectionDiv").each(function(index){
          $(this).attr("id","tab_" + (index+1));
          $("div:lt(2)",this).hide();
        });

      $("#formContents").tabs();
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      > I don't see anything in Dan's profile that would allow me to contact him. 

      That is very strange as I have contact information in my profile that I can edit:


      It is probably due to the forum censor playing a practical joke on everyone.

      Note that with the new forum software there are new URL to the profile page:

      https://community.quickbase.com/quickbase/people/dandiebolt

      It appears that the forum overseer reconfigured the forum to suppress the tagline info for everyone.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      As to your question, you have to place some additional code in the page to store the selected tab settings into local storage on a per user basis. When you visit a page information is saved in various places in your browser including cookies, local storage, session storage, indexdb, memory and disk cache, and most recently servcie workers etc.

      These storage locations contain information that is helpful for you next visit to the site by remembering information or speeding up a process. Also since I am obsessing about Service Workers for the next 30 days, I will just mentioned that you can think of a Servcie Workers are just a JavaScript file stored on your computer to help you during subsequent visits to the same site. They are perfectly safe and just represent a natural evolution of web technology.