• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

form_X.js

TonyBenedetti

Hobbyist Programmer & Fabrik Fan
I'm a bit confused about how to arrange the code in my form_23.js file. I would like to move the JS from each of the "on" events into the external file.

My confusion stems from:
  • Why do examples in the forum use:
    JavaScript:
    requirejs(['fab/fabrik'], function() {
  • but the wiki shows "Fabrik" as a parameter:
    JavaScript:
    requirejs(['fab/fabrik'], function (Fabrik) {
Next -- The real question -- Should I have:
  • one function with the requirejs inside the outermost function:
JavaScript:
function gn_event (fromTab, fromElement, trigger) {
   requirejs(['fab/fabrik'], function (Fabrik) {
      <<<callback stuff>>> {
          { code for "loadOne" based on outermost function params }
          { code for "clickOne" based on outermost function params }
          { code for "loadTwo" based on outermost function params }
          etc., etc., etc.
      }
   });
}
  • OR -- a separate function for each "inline"
JavaScript:
function loadOne (fromTab, fromElement, trigger) {
   requirejs(['fab/fabrik'], function (Fabrik) {
      <<< callback stuff >>> {
         <<< code for "loadOne" >>>
      }
   }
}

function clickOne (fromTab, fromElement, trigger) {
   requirejs(['fab/fabrik'], function (Fabrik) {
      <<< callback stuff >>> {
         <<< code for "clickOne" >>>
      }
   }
}

function loadTwo (fromTab, fromElement, trigger) {
   requirejs(['fab/fabrik'], function (Fabrik) {
      <<< callback stuff >>> {
         <<< code for "loadTwo" >>>
      }
   }
}

etc., etc., etc.

As always -- I am "Puzzled Near Poughkeepsie"
 
Last edited:
The Fabrik as an arg thing is moot. It's available as a global variable. Doesn't really matter if you pass it in to the requirejs() or not.

The only time you need to do the requirejs() thing is if you need to use the Fabrik object in your loading code. For instance, if you are hanging an event on (say) a CDD element update, so you need to register an event handler with Fabrik.addEvent. If you try and do that before the Fabrik object is initialized, it'll blow up. And that's what requirejs is - it's a dependency manager, that handles making sure things you depend on are loaded before you run your code. So the example of the CDD update event ...

Code:
requirejs(['fab/fabrik'], function() {
   Fabrik.addEvent('fabrik.cdd.update', function(el) {
      alert("Hey, the CDD element got updated!  Woo hoo!");
   });
});

In that case, if you didn't have that wrapped in the requirejs(), and just had the Fabrik.addEvent(), that would get run on your page before Fabrik had loaded and initialized. The requirejs() wrapper basically queues your code up, and fires it when the 'fab/fabrik' module has been loaded.

In your case, if all you are doing is adding function which get called from element JS events, you don't need that. Just put the functions inline, and call them ...

Code:
function loadOne(el) {
   // your code here
}

function clickOne(el) {
   // your code here
}

No need for any requirejs() inside them.

And then call them as ...

loadOne(this);

... which will pass the element object, which you can then use to do whatever it is you want to do, like el.getValue(), el.form.formElements.get('some___other_element'), etc.

-- hugh
 
Super! Slick! Simple! I love simple because I am simple!

And THANKS for the explanation of the require.js code. If only the explanations I found on Web had been as clear as yours. But then again, I have been accused of explaining how to build a watch when asked "What time is it?"
 
RequireJS is phenomenally complex in the way it works, but the principle is very simple.

We have to use it, because of the way Fabrik works. We have no a-priori knowledge of what Javascript will be on the page - that depends entirely on what elements, plugins, etc the form or list uses. And our JS is chock full of dependencies, where one element depends on another plugin or module or file. So everything we load on a page tells requirejs what it depends on, and we let requirejs figure out what order to load things in.

-- hugh
 
Ah, things were so much simpler when I was coding IBM System/360 Basic Assembler Language back in the 1960s. You would code, then assemble, then link modules together to produce an executable program. Then watch your program go up in smoke, the spend some hours debugging, then race to a keypunch machine, then trip and scatter your card deck across the machine room floor, then pray that you had remembered to put sequence numbers in columns 73-80 ... Hmm, guess it really wasn't so simple back in the "good old days" after all!
 
I cut my teeth using punched paper tape, loading into an architecture using octal (9 bit bytes) machine code. :)

And have quite literally "patched" code. Cut out a section of tape, and glue a replacement section back in, with the new code punched with a manual hole punch device. That was necessary if we were in the field loading live radar rigs (this was real time radar data processing for military avionics) and realized we made a booboo, checked the line printed source code, figured out the fix, and didn't want to drive 50 miles back to the machine room and generate a new tape ... and very probably miss our time slot on the live rig and have to wait a month for the next slot.

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top