When debugging in Fabrik, use expanded custom JS code

[PtrNrs]

Problem: It is difficult to debug Fabrik JS code (in Firebug or similar) because the newline characters are removed and the whole code is presented as one line (was that the same in Fabrik 2.x?)

Suggestion: That the custom JS code be expanded (re-expanded?) when in Fabrik debug mode (fabrikdebug=1).

Stop gap solution (eg for databasejoin element): In databasejoin.js, edit the function addNewEventAux to replace the code

(typeOf(js) === 'function') ? js.delay(0, this, this) : eval(js);

with

js1 = js.replace (/;/g, ';\n').replace (/}/g, '}\n');
(typeOf(js) === 'function') ? js.delay(0, this, this) : eval(js1);

thus reappending a newline character to all semicolons & closing curly brackets. Not perfect, but allows debugging. As the edit is only done in databasejoin.js not databasejoin-min.js, this code only runs when fabrikdebug=1.

I realise that editing of the expanded js file and not the compressed js file is not viable as the latter is created from the former.

Suggested solution: I can't work out where it's happening, but somewhere newlines are being removed from the code field in #__fabrik_jsactions before being inserted into the page HTML. Is it possible not to remove newlines when fabrikdebug=1?

 

[troester]

There's a3rd fabrik option/Debugging/Allow fabrikDebug = debugJS
which should always load uncompressed fabrik JS files.

Is this what you are looking for?

 

[PtrNrs]

Thanks troester. That looked really optimistic, but I'm not sure that is the answer.

Here's the Firebug screen dump of my custom JS code.

 

[PtrNrs]

Friendly bump.

 

[PtrNrs]

And again a bump.

 

[rob]

is that js thats been entered via a plugin or similar? If so then I fear that we may remove the line breaks to get the js to store correctly in the db (and be re-renderable inside J's parameters)
Perhaps try moving the js to an external js file, wrap it in a function and then just put the call to the plugin in the Fabrik/Joomla parameter textarea?

 

[PtrNrs]

Thanks, Rob.

Yes, the suggestion to move the JS code is a good one. I'm not too flash on JS, that's why I haven't done it!

Please reconsider for a moment though, my first proposal of reexpanding the JS code if we're debugging (hence the variable fabrikdebug):-

if(fabrikdebug) {
  js1 = js.replace (/;/g, ';\n').replace (/}/g, '}\n');
}
else {
  js1 = js;
}
  (typeOf(js) === 'function') ? js.delay(0, this, this) : eval(js1);
}

What I don't know is a neat JS way to determine that fabrikdebug is enabled.

 

[cheesegrits]

I'm not keen on messing with JS like that, and even if we do that, it's still a lot harder to debug than having your JS in a file. Really, Rob's suggestion is the best approach, and the way I always insert JS if it's more than a couple of lines. So in an X.js file ...

function doMyThing() {
   // my code here
}

... and then in the inline JS box in the Fabrik backend, just do ...

doMyThing();

Then you can easily insert breakpoints and step through the code in X.js.

-- hugh

 

[PtrNrs]

Thanks Hugh, I'll go with that 'cept . . .

I'm a JS nuffy and I have no idea how to include a file in JS. I assume I need to put an include statement into the inline JS . . . if so, what's the syntax? And where do you recommend locating the JS file?

 

[PtrNrs]

Whoop! I found the answer (where to put custom JS files) in an unlikely spot: at plugins/fabrik_form/js/readme.html.

To quote the file:-

. . . add event listeners in components/com_fabrik/js/X.js where X is your form id.

and yes it works!

A little tip: the called function loses the context of the inline JS, so (it seems) you need to pass any objects you might need.

So, my inline JS

formIDNext_change(this);

calls

function formIDNext_change(ctl) {
    var thisText = ctl.options.data[ctl.element.value].toLowerCase();
    ctl.form._getButton('submit').value = 'Go to ' + thisText + ' form';
}

in components/com_fabrik/js/23.js (23 being my form ID).