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

  • 0
  • 1
  • Question
  • Updated 7 months ago
  • Answered
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();
Photo of Manny

Manny

  • 0 Points

Posted 2 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,044 Points 20k badge 2x thumb
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/
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
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');
}}
}}}

(Edited)
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
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.
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
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[i].href.includes("&z=")) {
//using regexp replace the z with the nexturl
resToPro = daTagz[i].href.replace(regexPrd,lstVisResSS);
//apply the attribute to the element
daTagz[i].setAttribute('href', resToPro);
} else if (daTagz[i].href.includes("&nexturl=")) {
//this updates previously set urls with the latest tab
resToPro = daTagz[i].href.replace(regexNuR,lstVisResSS);
daTagz[i].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[i].attributes.onclick !== 'undefined') {
var edPgVa = daTagz[i].attributes.onclick.value;
if (regexEdPg.test(edPgVa) !== false) {
var pgEdVa = edPgVa.replace(regexEdPg,lstVisResSS);
daTagz[i].setAttribute('onclick', pgEdVa);
} else if(regexNeD.test(edPgVa) !== false) {
var pgEdNr = edPgVa.replace(regexNeD,lstVisResSS);
daTagz[i].setAttribute('onclick', pgEdNr);
}
}
}}}}


Photo of zvi bock

zvi bock

  • 240 Points 100 badge 2x thumb
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();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,964 Points 20k badge 2x thumb
> 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.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 29,964 Points 20k badge 2x thumb
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.
(Edited)