Related data popup form - custom form JS

[danielbidala]

I use custom form_x.js to show/hide and reset elements in my form. When I open the form in popup (add related data link in list view) the js is working as expected but only the first time.

If I save the form or close the popup and open another popup form from the list (without page reload) the js doesn't work. There is no js error in the console. The js file contains jQuery.

I use latest github build. Any idea?

 

[cheesegrits]

What event are you firing your code on?

The form_X.js files do indeed only get included once, like any other Javascript file. It's actually quite a lot of hard work to ensure that this is the case. Remember that popups are just a graphical "illusion", they aren't iframes or any other separate entity, they are just part of the main page DOM, so any given Javascript file can only be included once, otherwise all hell breaks loose. So when a popup opens, only JS files which haven't yet been loaded on the page will be loaded. This distinction doesn't matter in form_X.js files when loading a form on it's own page, but does if it's loading in a popup.

So if you need code to run when a form opens, rather than when your file gets included on the page, you have to trigger your code with a suitable event, like 'fabrik.form.loaded' ...

// make sure the Fabrik framework has been loaded before trying to use it (requirejs will defer automatically if it hasn't)
requirejs(['fab/fabrik'], function() {
   // now tell Fabrik to put a listener on the fabrik.form.loaded event
   Fabrik.addEvent('fabrik.form.loaded', function(form) {
      // make sure it's the form we want, by looking at the id
      if (form.id === 2) {
         // do our stuff (no need to Fabrik.getBlock(), as we have the form object already, passed in as an arg)
         alert ("From id 2 done been loaded!");
      };
   })
})

It's possible you may need to use the 'fabrik.form.elements.added' event rather than fabrik.form.loaded. Dues to the async nature of JavaScript, sometimes not all the element adding code will have finished when form.loaded gets fired, so if you code references element objects, you may need to wait until they are explicitly done initializing.

Also note the test for the form ID. There are various cases where different forms might get loaded in a popup on the page that aren't the one you are specifically interested in, so you need to make sure which one is being added.

-- hugh

 

[danielbidala]

Thanks again Mister. I tought popup uses iframe, so I ran my function on $( document ).ready() and on $('#myselect').change(). With fabrik.form.loaded event everything works fine

 

[cheesegrits]

Yeah, when we first introduced popups, we tried using iframes, but it was a major pain. In some ways it's easier, as you don't have to worry about what JS should and shouldn't be included. The problem is having the main page knowing anything about what's going on in the iframe, and vice versa. So, say, you edit a list row in a popup form, the list has to know when you save the form so it can update the data in the list display for that row. There's ways to work round it, but it just became a nightmare, so we implemented out own popup window manager, and handle JS inclusion with the RequireJS AMD loader.

-- hugh