JavaScript actions are not being triggered on new front end additions

[softforge]

I have just upgraded to the latest version on github but am having trouble with JavaScript on radio buttons from front end additions (only add label). I have the following very simple code set to trigger on the change action:

alert(this.value);

This works great for any of the predefined options but if I click the add button and add a new option, the action of adding or manually selecting it does not cause the alert box to fire.

Looking at the code that is produced for the option, we have this:

<label class="fabrikgrid_I will simplify my medicine routine" for="smp_goals_meds___goal_NaN">
  <input type="radio" value="test" name="smp_goals_meds___goal[]" class="fabrikinput radio" id="smp_goals_meds___goal_NaN"><span>test</span>
  </label>

NaN looks wrong and stops other additions being selected if they are added as their ids are not unique. This may also be related to the change action not being triggered.

Ideally, clicking the Add button that actually adds the new option should fire the change action because it is actually changing the selection. Also selecting the new option should fire it as well.

It looks like the checkboxes are suffering from the same problem. I haven?t tested select lists.

Thanks for looking into this.

 

[softforge]

Friendly bump

 

[cheesegrits]

Hmmm, yeah, that NAN isn't right. Obviously when we derive the ID for the new option, something is getting borked.

Can you point me at the page? It'd be quicker than me setting up a test case. Make sure Fabrik Debug is enabled in your preferences (button top right of Lists tab).

-- hugh

 

[softforge]

Sure, you can access the page on the diabetes site at this URL (I have just rePMed the login details):

/tools/goals/taking-my-medicines

I have alert(this.value) running on change which works great for the pre-defined values. If you click "Add your own goal", type something and then click "Add", I would expect this to trigger the action, but it does not.

If you click another option and then click the new one again, it also doesn't trigger.

Thanks for investigating!

 

[softforge]

Friendly bump

 

[softforge]

If you want to set up a test case for this, you can do so with the following steps:

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

Now when you click the Add icon and then the Add button from the frontend, the change action doesn't trigger. You can also see this on the diabetes site I sent you access details for.


I hope this helps.

 

[rob]

hi this one should now be fixed, the NaN was a different issue, as we are not assigning ids to the sub option elements now

I also added some additional stuff to the add options behaviour:

* the widget itself now clears the sub-options
* esc key will now hide the add options widget
* enter key will now submit the add option section and not the entire form
* for checkboxes the widget was not closing when you added a new option
* And finally the js events are now added via an event delegation on the parent div, making the js code cleaner and more succinct.

 

[softforge]

This is awesome stuff, thanks Rob!

I have given it a good test and it all seems to be working great. The only issue I have is that when you submit the add option, it doesn't trigger the change action even though it sets it as selected.

This is a problem because I have some important things happening in the change action which don't happen when adding new options.

Would it be possible to trigger the change action when adding a new option? It does actually change the selected option so it makes sense.

Alternatively, don't check the new option when adding it so the user has to select it manually and therefore trigger the change action.

Many thanks.

 

[softforge]

I have just upgraded to 3.0.6.1 but the change action is still not being triggered on adding a new option.

Can we get it so that any change action fires when clicking the add button please?

Otherwise the system makes a change but bypasses any logic that is in the change action.

Many thanks

 

[softforge]

Friendly bump

 

[softforge]

Friendly bump

 

[rob]

try updating now - I think I have fixed this

-Rob

 

[softforge]

Thanks Rob, I have just updated to the latest version on github which includes your i.fireEvent('change'); addition but sadly it had made no difference. Adding a new element still does not trigger the change action.

I have also noticed that now clicking on a checkbox gives me this error in Web Developer:

Timestamp: 28/08/2012 17:00:22
Error: TypeError: e is null
Source File: media/system/js/mootools-core.js
Line: 294

I hope this helps...

Thanks

 

[softforge]

I have tried many variations of i.fireEvent('change') but I just cannot get the change action to fire.

Any ideas?

 

[softforge]

I really need this to work so I have done some more investigation. I can confirm that the change action also doesn't trigger for adding new options to dropdowns.

Does this help?...

http://stackoverflow.com/questions/...ired-events-not-working-with-event-delegation

Many thanks

 

[softforge]

OK, partial success!

I added this line:

document.id(this.element.id).fireEvent('change', {stop:$empty});

Below this line:

this.addNewOption(val, label);

In this file:

plugins/fabrik_element/dropdown/dropdown-min.js

And now the change action is triggered when adding an option for dropdowns!

Also, the dropdown add new option box doesn't slide away when it is added (like radio button and checkboxes do) but this can be easily solved by adding this code in the same place:

if (this.mySlider) {
    this.mySlider.toggle();
}

However, I have tried everything I can think of but cannot get the same result for radio buttons or checkboxes. This post helped me solve the dropdown version:

http://www.garrickcheung.com/mootools/mootools-tip-event-stop/

Any help would be much appreciated.

 

[softforge]

OK something strange is going on. I have 5 checkboxes in 1 form and I added alert(this.value) as a change action to just the first checkbox element but it is triggering on all 5 checkbox elements!

It seems as though all checkbox actions are being applied to all checkboxes which would explain why I am getting the JavaScript error that I mentioned before.

You can see this on the diabetes site I send you access details to on this page:

/tools/diary/care-pathway/form/15/0

Thanks for looking into this

 

[softforge]

Friendly bump

 

[softforge]

I've done some more testing and I can confirm that any change action on a radio button element fires for all radio button elements in that form. The same goes for checkboxes.

 

[softforge]

Friendly bump