Element Javascript....function

[Mono]

Is it possible to invoke a function in a js file from the Element Javascript page in Fabrik?

I have 4 check boxes that onclick invoke the function with different parameters.

I think it would save having the code entered 4 times in the element javascript box.

Thanks

 

[cheesegrits]

Create a file called form_X.js )where X is your numeric form ID) in ./components/com_fabrik/js. That file will get automatically included whenever your form is loaded. You can then define functions in it ...

function doMyThing() {
}

... and call that function from the element JS.

Typically you would pass 'this' in as an arg to your function, which is the element object, that you can then do things with ...

function doMyThing(el) {
   // get the element value ...
   var v = el.getValue();
}

... called from your element JS event as ...

doMyThing(this);

-- hugh

 

[Mono]

Thanks Hugh

I thought that was the way to do it.

but however I do I get this error even when I pasted your code in.

VM10800:1 Uncaught ReferenceError: doMyThing is not defined
    at eval (eval at <anonymous> (elementlist.js:3), <anonymous>:1:1)
    at Object.<anonymous> (elementlist.js:3)
    at HTMLFormElement.dispatch (jquery.min.js?4485bc…9b18011bfb1cf66ed:2)
    at HTMLFormElement.v.handle (jquery.min.js?4485bc…9b18011bfb1cf66ed:2)

I'm guessing that its because the doMyThing is referenced in the form_1.js, but I'm only learning javascript.

Does it matter that i have a repeat group in my form?

Mono

 

[cheesegrits]

Assuming your element is on form id 1, it should work.

Have a look in the debug console in your browser, see if there's errors on page load when form_1.js tries to load.

-- hugh

 

[Mono]

hello Hugh
I created a new form with only 1 element, a check box.

I entered this code in the onclick event

var v = event.target.get('value');




if (v === '1' && event.target.checked) {if (v === '1' && event.target.checked)
  doMyThing('this');
}else{
  console.log('No Check')
}

The code in my form_X.js is

requirejs(['fab/fabrik'], function (fabrik) {


   function doMyThing(el) {
   // get the element value ...
   var x = el.getValue();
  console.log(x);
}
});

In the firefox debugger when the page loads there is a long line of information that is too long to post here

but this is from the beginning

!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,functio

In the console

ReferenceError: doMyThing is not defined[Learn More] elementlist.js line 3 > eval:1:116
Empty string passed to getElementById().

I don't really know what I'm doing wrong?

 

[cheesegrits]

OK, you don't need the requirejs() stuff, that's only needed if you need to run code that has to wait until the Fabrik init has happened, and all the various Fabrik objects exist.

So as I said in my first reply, just ...

function doMyThing(el) {
   // get the element value ...
   var x = el.getValue();
  console.log(x);
}

And I'm not sure where you copied the code you put in the click event from, but it's not right.

Just call your function (again, as I said in my first post) ...

doMyThing(this);

Then in your function,m the el.getValue() will tell you what is checked.

-- hugh

 

[Mono]

Hugh
Thank you, I feel both stupid and happy at the same time!!!

Thanks again

 

[cheesegrits]

Well yeah, you could have just done what I suggested, rather than adding a bunch of unnecessary code.

Glad it's working for ya.

-- hugh

 

[Mono]

I realise I didn't realise this was a reserved word and I was making it more complicated than it needed to be, worst thing to do when coding!

Thanks again Hugh

 

[cheesegrits]

Yes, 'this' (without quotes) in Javascript is a very special variable, and is always set to the context your code is running in. So in the element JS, it's the Fabrik element object. Hence passing it as an arg to your function, doMyThing(this) .... and in the function definition give it a more meaningful name (el) and inside the function you can then get at the element object, and do useful stuff like ...

// get el value
var v = el.getValue();
// update the element's value ...
el.update('some new value');
// access the element's form object, for example to get other element (like, to check their value)
var anotherEl = el.form.formElements.get('yourtable___some_other_element');
var anotherElValue = anotherEl.getValue();

-- hugh

 

[Mono]

Hi Hugh
Is there a way to get the names of all the elements in a repeat group?

I bet its really simple, but I've got no idea of how to even search it?

 

[cheesegrits]

What do you mean by "names"?

All of the element objects are in el.form.formElements (assuming we're running the code inside you doMyThing where we take the 'el' arg). If you know the numeric group ID ...

function doMyThing(el) {
   jQuery.each(el.form.formElements, function(key, element) {
      if (element.groupid === 123) {
         // this element is in group 123 ... base element id is in element.baseElementId
        // so do your thing here
      }
   });
}

Note that there will be multiple copies of elements where you have multiple repeats of the group.

-- hugh

 

[Mono]

Hugh
I think that's exactly what I want!! Fantastic!!

Thanks again