JavaScript actions are not being triggered on new front end additions

[rob]

try updating again, I've limited the events so that they only apply to the element that they belong to

 

[softforge]

I spent all of yesterday working on this as it is critical to a project I'm working on and I have finally fixed it once and for all!!!

;D

I have followed the video tutorial on submitting a pull request (thanks jason) for this issue which is here:

https://github.com/Fabrik/fabrik/pull/451

I have only changed the non minified version of the JavaScript files. What is the procedure for minifying them? Is this something that is done when you build Fabrik at your end or is there any easy way for me to submit both versions of the files from my end?

Many thanks

 

[rob]

hey thanks
I added one comment in git hub about why you did one thing, which if you could answer that would be cool.
So once that question is resolved, we can make the minified files here, by running the build.xml file in ant.

The tools are to run the build are the build.xml file and the yuicompressor and jshint in the fabrik_build folder.
However that does mean you have to set up ant with the required dependencies to run the build.xml file which is quiet a long process

 

[softforge]

Thanks for this, I will respond to your question on github.

 

[softforge]

I just found the work I have done relating to this had stopped working.

I reverted some of the changes and got it working again, this is the change I reverted which fixed the problem for me:

https://github.com/Fabrik/fabrik/commit/ffadafcdca5e13fdfeeac665092d2d3aeefeef15

So for some reason, var subEls = this._getSubElements(); does not seem to function in the same way even with .bind(this) as I get the following error when my JavaScript change code fires:

Error: TypeError: this.setStyle is not a function

So it looks like this in my JS change code is not in scope even when using bind.

Can you think of a way round this or could we just use the getElements which definitely works?

Here is the the code that works for me:

c.addEvent(delegate, function (event, target) {
    var subEls = document.id(subElsName).getElements('input');
    if (subEls.contains(target)) {
        typeOf(js) === 'function' ? js.delay(0) : eval(js);
    }
});

You can see it in action on the diabetes site on this page:

/staying-healthy/alcohol/planning-for-cutting-down/my-alcohol-goals-and-plans

Many thanks

 

[rob]

I'm unsure how I can create a test case for what you are describing?

There were good reasons not to use the getElements() directly as each element plugin needs to be able to define which fields actually are sub elements.

 

[softforge]

I totally understand why you want to use getSubElements but its not quite working correctly at the moment. Here are the steps to recreate the problem:

1. Create a new list
2. Add a new radio button or checkbox element
3. Add some sub options
4. Set Front end additions Enable to Yes
5. Set Only add label to Yes
6. Add a new JavaScript change action
7. Add alert(this.value); into the code and save

Now when you add an additional element, the alert is triggered so it feels very nearly correct but the alert is undefined and before it use to be the value of the element (hence breaking my code that uses 'this'):

This is the case when changing any sub elements (not just new ones) so in its current state 'this' does not reference the element being changed.

It feels so close, I hope you can work out this last issue.

Many thanks your all your work on 'this'

 

[rob]

thanks for those steps
I think this is to do with the even delegation that we included, this line

 var subEls = document.id(subElsName).getElements('input');

produced an error for me though - subElsName isnt defined.

for elements with subelements (radios, checkboxes etc) the "this" refers to the fabrik element class, so you can get the value with:

this.get('value')

if you want to access the actual checkbox / radio that was clicked then that is available in the variable 'target'

I've added this to the wiki - http://fabrikar.com/forums/index.php?wiki/elements/#Important_Note_on_.27this.27

 

[softforge]

Thanks for this Rob. I have been trying to convert my code to use this in the new way but I am having problems. Firstly this.get('value') brings back all of checked boxes not just the one that has been checked. This means when using the change trigger, I don't know which check box the user has just changed. This works differently to this.value which returns just the specific checkbox that was changed. I need to know which the user has clicked for my code to work.

The other problem is this.setStyle('...', '...'); does not work either. I have tried many variation of the target you suggested but no luck. The error I get is the following:

Error: TypeError: that.setStyle is not a function
Source File: /media/com_fabrik/js/elementlist-min.js

Note that 'this' has become 'that' so something is happening but I cant use setStyle on the changed element which I also need to do.

Any ideas?

Many thanks.