Hi,
I have a form with the following setup (all in a repeating group):
1) field element "dob" (date of birth)
2) field element "age" (calculated value based on "dob" and programmatically updated using element javascript)
3) radio button "season"
4) radio button "payment"
5) dbjoin dropdown "Product list" - with WHERE clause conditions using age, season, and payment to display specific product choices based on the combination of those values.
My workflow is as follows:
User enters their date of birth in the dob field and the age field gets automatically calculated and displayed correctly. User then selects both season and payment radio button choices.
The dbjoin dropdown element contains a WHERE clause with conditions that depend on "age", "season" and "payment" values to display the correct product options in the dropdown list.
Upon entering the dob (age is calculated and updated correctly), and selecting the radio buttons, the dbjoin shows the correct products in the dropdown list.
All works perfectly to this point.
Now, if the user changes the date of birth (dob), the age is once again calculated correctly and the new age displayed in the age field, however the options in the dbjoin dropdown list are not updated.
If I manually hit the enter key in the age field after changing the value, the dropdown list refreshes with the correct options. Also I notice if I manually change the age value and click anywhere outside of the age element in the white space of the form, the dropdown also refreshes .
So, I think I need to trigger an "enter" event to the age field after a new value is calculated and the field updated or trigger a "click" event on the form after the age value changes.
Here is the inline js code on the dob element which updates the age field. Full credit to @juuser for this solution.
***
var i = this.getRepeatNum();
var dobEl = Fabrik.getBlock('form_x').formElements.get('table___dob_'+i);
dob = dobEl.get('value');
jQuery.ajax({
url: 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=CalculateAge&userdob='+dob,
method: 'get',
context: this
}).done(function (myresult) {
var UsersAgeEl = this.form.formElements.get('table___age_'+i);
UsersAgeEl.update(myresult);
});
***
I've tried adding the following to the code in an attempt to simulate an "enter" key press but get the following error in the console: "UsersAgeEl.trigger is not a function"
var e = jQuery.Event( "keypress", { which: 13 } );
UsersAgeEl.trigger(e);
Any thoughts if I am going about this correctly to get the dropdown options to refresh and/or suggestions on how to achieve the key press "enter" event after the value is updated?
Thanks.
I have a form with the following setup (all in a repeating group):
1) field element "dob" (date of birth)
2) field element "age" (calculated value based on "dob" and programmatically updated using element javascript)
3) radio button "season"
4) radio button "payment"
5) dbjoin dropdown "Product list" - with WHERE clause conditions using age, season, and payment to display specific product choices based on the combination of those values.
My workflow is as follows:
User enters their date of birth in the dob field and the age field gets automatically calculated and displayed correctly. User then selects both season and payment radio button choices.
The dbjoin dropdown element contains a WHERE clause with conditions that depend on "age", "season" and "payment" values to display the correct product options in the dropdown list.
Upon entering the dob (age is calculated and updated correctly), and selecting the radio buttons, the dbjoin shows the correct products in the dropdown list.
All works perfectly to this point.
Now, if the user changes the date of birth (dob), the age is once again calculated correctly and the new age displayed in the age field, however the options in the dbjoin dropdown list are not updated.
If I manually hit the enter key in the age field after changing the value, the dropdown list refreshes with the correct options. Also I notice if I manually change the age value and click anywhere outside of the age element in the white space of the form, the dropdown also refreshes .
So, I think I need to trigger an "enter" event to the age field after a new value is calculated and the field updated or trigger a "click" event on the form after the age value changes.
Here is the inline js code on the dob element which updates the age field. Full credit to @juuser for this solution.
***
var i = this.getRepeatNum();
var dobEl = Fabrik.getBlock('form_x').formElements.get('table___dob_'+i);
dob = dobEl.get('value');
jQuery.ajax({
url: 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=CalculateAge&userdob='+dob,
method: 'get',
context: this
}).done(function (myresult) {
var UsersAgeEl = this.form.formElements.get('table___age_'+i);
UsersAgeEl.update(myresult);
});
***
I've tried adding the following to the code in an attempt to simulate an "enter" key press but get the following error in the console: "UsersAgeEl.trigger is not a function"
var e = jQuery.Event( "keypress", { which: 13 } );
UsersAgeEl.trigger(e);
Any thoughts if I am going about this correctly to get the dropdown options to refresh and/or suggestions on how to achieve the key press "enter" event after the value is updated?
Thanks.