• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

[SOLVED] How to trigger "enter" on field element after update by js

trb

Member
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.
 
Hi @juuser,

Thank you.

I added the UsersAgeEl.fireEvent('change'); but it does not trigger a refresh of the product list dropdown. No error in the console.
I don't know if the change event includes simulating an "enter" keystroke in the field which is what I think may cause the refresh of the dbjoin dropdown
 
That is odd it triggers the first time, but not second. If "enter" really does the trick, I think the code should be:
var e = jQuery.Event( "keypress", { which: 13 } );
jQuery('#table___age_'+i).trigger(e);
 
Hi @juuser,

Thanks ... actually I now realize the dob calculation and update of the age field does not trigger an update of the product list dropdown at all ... not even the first time.
It is the subsequent selection of the season and payment radio button elements which triggers the update and this is why it works the first time through the workflow. Now if the user changes the dob, the age is updated but no triggering of the product list.

If I manually change the age and hit enter, I see the "loading " spinner appear above the product list element and the options are correctly updated which is why I believed simulating an "enter" would do the trick.... however I have adjusted the code as below and still not getting the product list to update when the dob is changed and age updates. The new age updates correctly in the age field, but not trigger happens and no "Loading.." spinner appears on the product list. No errors in the console. I thought perhaps I need a combination of "change" and "keypress" since I notice if the value of the age field is not changed, hitting enter in the field does not trigger an update.... the value must be changed and then followed by the "enter", so I also tried adding UsersAgeEl.fireEvent('change'); just before the keypress line, but still no trigger happens. ... thanks for any suggestions.

.done(function (myresult) {
console.log("this is retuned myresult from user_ajax in element dob = "+myresult);
var UsersAgeEl = this.form.formElements.get('jos_multiple_registrations_17_repeat___age_'+i);
UsersAgeEl.update(myresult);
var e = jQuery.Event( "keypress", { which: 13 } );
jQuery('#jos_multiple_registrations_17_repeat___age_'+i).trigger(e);
});
 
If you programatically change value in a filed will not trigger event (e.g. onChange) automatically. You have to write some code/trigger to update your dropdown element...I thing.

Simple but not user frendly solution is if user change 'dob' just reset/uncheck buttons 'season' and 'payment'. User must reselect those two buttons and the workflow will continue normaly. Of coure if you have season and payment in your WHERE querry and you have enable Ajax update.
 
Hard to say without seeing the actual setup. You can try deant's suggestion and see if this makes any difference
 
I found the solution which triggers a refresh of the dropdown when the date of birth is changed. Here is the line I needed.
UsersAgeEl.element.fireEvent(UsersAgeEl.getChangeEvent(), new Event.Mock(UsersAgeEl.element, UsersAgeEl.getChangeEvent()));

Found in this post: https://fabrikar.com/forums/index.p...ered-on-cascading-dropdown.40948/#post-249409

@juuser - you were correct that I need to fire the 'change' event - it was just the correct syntax that I was missing - thank you for your help.

@deant - your suggestion is a good one and I was able to make it work with the below , however it is not as user-friendly as the first approach. Thank you for your suggestion!
jQuery('#jos_multiple_registrations_17_repeat___payment_'+i +' input:radio').attr('checked',false);
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top