"Stay on tab" after save

[lcollong]

Hi,

We have a pretty huge form divided in groups with a tab layout. We don't want to use the paginate solution.
We have a "save" button as well as a "save & close" one.
The idea is to let the user save his form from time to time without leaving it.
After clicking on save, the form is submitted and reloaded. Fine.
But it the user was on the third tab while clicking "save", it would be nice if it could stay on this third tab. In other word, probably save the current tab in a session var and use it on load and fire some js to display back the right tab.
Did someone already do that ? Would it be possible ? Any suggestion welcome.

Thanks.

 

[lcollong]

Friendly bump

 

[cheesegrits]

It could be done, but not entirely trivial. Session data wouldn't really work, as that is too transient. You'd have to do it with a cookie. So you'd need a custom JS file, and add a Fabrik event on form submission, which finds the currently active tab and stores it in the cookie, and an event on something like fabrik.loaded which then reads the cookie and simulates a button click on the tab.

Off the top of my head, something like this ...

window.addEvent('fabik.loaded', function() {
  var active_tab = Cookie.read('active_tab_' + Fabrik.getBlock('form').id);
  if (active_tab) {
      document.id(active_tab).click();
  }
});
 
Fabrik.addEvent('fabrik.form.submit.start', function(form) {
  var active_tab = document.getElements('.nav-tabs > li.active')[0].id;
  Cookie.write('active_tab_' + Fabrik.getBlock('form').id, active_tab, {duration: 7});
});

... although this probably won't work as-is (I'm not very good at writing JS off the top of my head), that's the approach I'd take.

-- hugh

 

[cheesegrits]

OK, that click() won't work with document.id (it needs to fire the jQuery event) and also it looks like the event is on the A tag not the list item, so so try this:

window.addEvent('fabik.loaded', function() {
  var active_tab = Cookie.read('active_tab_' + Fabrik.getBlock('form').id);
  if (active_tab) {
      jQuery(active_tab).click();
  }
});
 
Fabrik.addEvent('fabrik.form.submit.start', function(form) {
  var active_tab = document.getElements('.nav-tabs > li.active a')[0].id;
  Cookie.write('active_tab_' + Fabrik.getBlock('form').id, active_tab, {duration: 7});
});

Also, that may need to be a Fabrik.addevent('form.form.loaded'), not window.addEvent('fabrik.loaded').

-- hugh

 

[lcollong]

I wish I could write js off the top of my head....;-)

Anyway, I spent an hour to make it running this way :

/**
* Ensure that Fabrik's loaded
*/
 
requirejs(['fab/fabrik'], function () {
 
Fabrik.addEvent('fabrik.form.submit.start', function(form) {
        var active_tab = document.getElements('.nav-tabs > li.active a')[0].id;
        Cookie.write('active_tab_' + Fabrik.getBlock('form').id, active_tab, {duration: 7});
        console.debug ("cookie ?crit = " + active_tab);
    });
 
});
 
 
window.addEvent('fabrik.loaded', function() {
 
  //var active_tab = Cookie.read('active_tab_' + Fabrik.getBlock('form').id);
  var test_it = Fabrik.getBlock('form').id;
  console.debug (test_it);  // undefined....
  var active_tab = Cookie.read('active_tab_31');  // so let force it
  console.debug ("cookie lu =" + active_tab);
  if (active_tab) {
      jQuery('#'+active_tab).trigger("click"); // need the sharp
  }
});

I haven't been able to get the form id (undefined) so I replace it by a constant which is not so relevant as these lines are stored in a file named "form_31" so I know the id.

That's pretty fine as it is. However, it should only work on "apply", not on "save and close". So, each time you modify another record (from the row's list), it should not trigger the "click", staying on the first tab as usual.
Not sure there is a way to differentiate "apply" and "save" ?...

Another way could be to name the cookie with rowid (or to store the rowid inside the cookie). Thus the "click" would be fired only if the row opened is the one which has been recently modified. If one wanted to modify a totally different record (row), the form will open and stay on the first tab.

Any advice ?

 

[rob]

However, it should only work on "apply", not on "save and close".

I would replace the 'fabrik.form.submit.start' with a click event on the apply button :

document.getElement('button[name=apply]').addEvent('click', function () {
  var active_tab = document.getElements('.nav-tabs > li.active a')[0].id;
  Cookie.write('active_tab_' + Fabrik.getBlock('form').id, active_tab, {duration: 7});
});

 

[lcollong]

Hi Rob,

Nice to see you again on the forum !

With the highly valuable help of both of you, my test drive is perfectly doing with the folowing code :

/**
* Ensure that Fabrik's loaded
*/
 
requirejs(['fab/fabrik'], function () {
   
    document.getElement('button[name=Submit]').addEvent('click', function () {
        Cookie.write('active_tab_' + Fabrik.getBlock('form').id, '', {duration: 7});
        console.debug ("cookie ?ffac?");
    });   
   
    document.getElement('button[name=apply]').addEvent('click', function () {
        var active_tab = document.getElements('.nav-tabs > li.active a')[0].id;
        Cookie.write('active_tab_' + Fabrik.getBlock('form').id, active_tab, {duration: 7});
        console.debug ("cookie ?crit = " + active_tab);
    });   
 
});
 
 
window.addEvent('fabrik.loaded', function() {
    var active_tab = Cookie.read('active_tab_31');   
    console.debug ("cookie lu =" + active_tab); 
    if (active_tab) {
        jQuery('#'+active_tab).trigger("click");
    }
});

I had to add a "cookie clear" event on submit in order to prevent the next row opening to be set on an unwanted tab.

However, for some reason, when I try this code on the real site, the "cookie clear" function does not work. It seems that the "click" event is not fired (or the function added as the form is normally processed). The "cookie write" and the "cookie read" functions work as expected.

I don't see any js error using firebug. There is the same redirect form plugin on both site. There are 2 php plugin making some SQL tasks on the "real site". Also the real site is using https instead of http.

The Fabrik realesed are the same but the real site is around 3 month old github version compare to the test drive.

Any idea or test I could drive to solve this issue ?

Thanks

 

[cheesegrits]

I'd have to see your page to have any idea of what the problem is.

-- hugh

 

[lcollong]

I understand. Unfortunatly, I can't grant access to the "real site". I'll try to replicate this behavior on my test drive but for now, it's working perfectly well ! :-( ....

 

[cheesegrits]

OK. Wish I could help, but JS debugging is hard to do without access to the JS.

-- hugh

 

[lcollong]

Indeed ! Lol. I'll firstly upgrade Fabrik to the same github level on the "real site". Then I'll try to disable plugin and features hoping I'll get it to work as well as the test drive. We'll see...

By the way, do you know why my window.addevent (post #5) was not able to use the fabrik framework and recover the form id to build the cookie name (Fabrik.getBlock('form').id is undefined) as the event is "fabrikLoaded" ??

 

[juuser]

Hi,

Hope i'm not hijacking the thread. I would like to do the same thing and i see a working (in one site) code here. But how do i add javascript event on form submission?

Thanks

 

[lcollong]

Hi,

You have to create a file name form_X.js where X is your form id in the directory com_fabrik/js. Just add these bits of code inside it. Currently I'm facing a difficulty to retrieve the form id within this js (on load) so I've replaced it with a constant.

Hugh idea was to be able to have the same js running whatever is the form as the cookie name include the form id. In my solution the js has to be specific to the form... but it works !

 

[juuser]

Thank you for the explanation! Unfortunately not working for me. My form id is 34. I created file called "form_34.js" in "components/com_fabrik/js" folder and added the code above. Changed "active_tab_31" to "active_tab_34". Still jumps to first tab after Apply

BR,
Martin

 

[lcollong]

Using a debug tool such as firebug for Firefox and displaying the console panel ("all" ) you should see the message saying if the cookie is read, written or erased (lu, ?crit et ?ffac? in French ). I suspect you may have some js errors from elsewhere which can discard your code. Depends of your Fabrik version, you may try to rename your file just "34.js" instead of "form_34.js"

 

[juuser]

Thanks for the hint I get the following error lines:

"cookie lu =null" form_34.js:23:5
"Fabrik form::addElementFX: Element "plastone_dokman_tegevusplaan___viimati_muutis" does not exist. " fabrik-min.js:2:122
"Fabrik form::addElementFX: Element "plastone_dokman_tegevusplaan___kande_kuupaev" does not exist. " fabrik-min.js:2:122
"Fabrik form::addElementFX: Element "plastone_dokman_tegevusplaan___date_time" does not exist. " fabrik-min.js:2:122
"Fabrik form::addElementFX: Element "plastone_dokman_tegevusplaan___autor" does not exist. "

Seems that for some reason it doesn't set the cookie.

 

[juuser]

Strange, works in IE. I now read that it might be something to do with local site which is not setting cookies properly in Chrome and Firefox . Anyway thanks for the help. I now try to find the solution myself as this is already out of Fabrik area.