Apply button behavior

[lcollong]

Hi,

Since some time (can't say when) the behavior of the button "Apply" seems to have changed. In one of my customer site it's acting exactly as the regular "submit" button. It save the form and go back to the list.

On a test drive (using protostar and Fabrik 3.8.1), apply works as expected but hitting submit button after apply, don't go back to display the list. Staying on the form as Apply does. Thus, once you hit apply once, you'll never close the form.

 

[cheesegrits]

Do you have a redirect?

If you don't have a redirect plugin, after Submit, we'll go the the "referring page" (in the PHP globals sense), the page from which the form was loaded (basically the "previous page"). If you've hit "Apply", then the form has submitted, and returned to itself. So the "referring page" is now the form. The only way round it is to add a redirect plugin, which redirects back to the list.

I remember trying to fix that a long time ago, and tying myself into hopeless knots, going round in circles. I just had a peek at the code, and how we handle setting the 'fabrik_referer' hidden variable on forms to override PHP's global in certain circumstance, and I might maybe one day have another hack at fixing it so after an Apply, we set that. But for now .... the workaround is to use a redirect.

-- hugh

 

[lcollong]

Indeed. I added some weeks ago a redirect line at the end of the onAfterStore php plugin without testing if we came from submit or apply.
Now I differentiate between submit and apply and that works as expected :

$apply = JRequest::getVar('apply', 'bidon');
if ($apply != 'bidon') return true; // nothing to do if apply
.... rest of the code here in case of submit

It seems 'apply' is not set in $_REQUEST if submit button is hit whereas it is set to an empty string if apply button is hit.

BTW I have some js that run on this form to store the current tab and display it back to the user in case of "apply" thus allowing the user to save his data while staying on the current tab :

requirejs(['fab/fabrik'], function () {
   
    document.getElement('button[name=Submit]').addEvent('click', function () {
        Cookie.write('active_tab_' + Fabrik.getBlock('form').id, '', {duration: 7});
        console.log ("cookie effac?");
    });   
   
    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.log ("cookie ?crit = " + active_tab);
    });   

});


window.addEvent('fabrik.loaded', function() {
    var active_tab = Cookie.read('active_tab_7');
    console.log ("cookie lu =" + active_tab); 
    if (active_tab) {
        jQuery('#'+active_tab).trigger("click");
    }
});

I get the message in the console on the load event but none of the ones tied to the click submit/apply ones. And of course, the functionality does not work. This was set a year or 2 ago (Rob's idea). Don't know if it was still working recently. Just realized it doesn't. Any idea ?

 

[cheesegrits]

It seems 'apply' is not set in $_REQUEST if submit button is hit whereas it is set to an empty string if apply button is hit.

Correct. That's just an HTML forms thing, not a Fabrik thing. Only the button used to submit the form goes in the post data.

I get the message in the console on the load event but none of the ones tied to the click submit/apply ones. And of course, the functionality does not work. This was set a year or 2 ago (Rob's idea). Don't know if it was still working recently. Just realized it doesn't. Any idea ?

As with anything to do with JS, I'll need to see the page to debug it.

It could probably be improved, as I added some helper functions for getting and and selecting tabs since that code was written.

-- hugh

 

[lcollong]

I've set up credential on mySites "FORM".
On the front-end, choose english language then appointments, choose an appointment and edit it. Save & close is "submit". Save is "apply". The purpose of the js is to stay in the current tab while using the "Save" button.
The relevant form is #7. JS is in form_7.js

 

[lcollong]

Friendly bump

 

[lcollong]

Friendly Bump

 

[cheesegrits]

I'm not entirely sure why your button click code isn't running, although I suspect it may be because we get the event first, and submit the form.

But easiest way is to use the Fabrik fabrik.form.submit.start event.

Also, the Window.addEvent('fabrik.loaded') won't always work, as fabrik.loaded fires asyncronously, and you may get it before the form itself has finished building things. Although as you aren't using any Fabrik block specific stuff, it may be OK. But you could use the fabrik.form.loaded event instead.

requirejs(['fab/fabrik'],function(){
   Fabrik.addEvent('fabrik.form.submit.start', function(form, e, btn) {
       if (btn.name === 'Submit') {
           Cookie.write('active_tab_'+ Fabrik.getBlock('form').id,'',{duration:7});
           console.log("cookie effac?");
      };
   
       if (btn.name === 'apply') {
          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.log("cookie ?crit = "+ active_tab);
      };
   }

   Fabrik.addEvent('fabrik.form.loaded', function(form) {
      var active_tab = Cookie.read('active_tab_7');
      console.log("cookie lu ="+ active_tab);
      if(active_tab){
           jQuery('#'+active_tab).trigger("click");
      }
   });
});

Note that we do have some tab specific helper functions in the form class, although apparently I haven't added getActive() for some reason. I may do that. Then you could just call form.getActiveGroupTab() and form.selectGroupTab(), without having to know anything about the DOM structure. I'll let you know if I get round to doing that.

-- hugh

 

[lcollong]

Thanks for these "events collapsing" explanations. I have to learn how to figure out these events things rising at wrong moment...
There is a little typo in your code (missing ")" after the first event). Here is the correct one in case it might interest some one :

requirejs(['fab/fabrik'],function(){
   Fabrik.addEvent('fabrik.form.submit.start', function(form, e, btn) {
       if (btn.name === 'Submit') {
           Cookie.write('active_tab_'+ Fabrik.getBlock('form').id,'',{duration:7});
           console.log("cookie effac?");
      };
  
       if (btn.name === 'apply') {
          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.log("cookie ?crit = "+ active_tab);
      };
   });

   Fabrik.addEvent('fabrik.form.loaded', function(form) {
      var active_tab = Cookie.read('active_tab_7');
      console.log("cookie lu ="+ active_tab);
      if(active_tab){
           jQuery('#'+active_tab).trigger("click");
      }
   });
});

 

[cheesegrits]

I was half asleep when I wrote that. Note that you can use the passed 'form' arg in those function, rather than getting the block, like form.id, instead of Fabrik.getBlock('form').id.

Also note that when using fabrik.form.foo events, if you have multiple forms on a page (like a form in a module on the same page as a Fabrik form component page), you need to test which form the event fired for, so wrap you code inside the event handler with a check for the form ID you want. if (form.id == 7).

-- hugh