[Resolved] triggering radio with jquery goes wrong

This thread is resolved. Here is a description of the problem and solution.

Problem:

Setup custom JS codes to setup image radio field.

Solution:

It is a custom JS codes problem, see details here:

https://toolset.com/forums/topic/triggering-radio-with-jquery-goes-wrong/#post-1602417

Relevant Documentation:

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 7 replies, has 2 voices.

Last updated by Ido Angel 2 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1601275

hey,
I have a set of images which trigger, respectfully, a set of hidden radio buttons in a search. The code goes like this:

jQuery(".radio-trigger").click(function() {
  var triggerIndex = jQuery(this).index();
  var targetIndex = jQuery(".form-check").eq(triggerIndex);
   targetIndex.find("input").trigger('click');
});

the correct radio is being triggered, but once the view results are updated, somehow the first radio button is being automatically triggered again, which messes up the results. Where am I wrong?

You can see this happening here: hidden link

cheers
Ido

#1602213

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hello,

I assume we are talking about these hidden radio inputs:
- תמורתיות
- פרסונליות

I have tried it in the URL you mentioned above:
Click one of images, for example: גלוקליות

It works fine, I see the radio input "פרסונליות" is checked, see screenshot radios.JPG

Is there any missing? please provide detail steps to duplicate the same problem, thanks

#1602279

try going to the link again but don't change any filter values other than pressing the images (so that you can see all radio button appearing - there are 6). then play around and see that if you press, for example, the fourth image - what happens.
thx Luo!

#1602367

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Since it is a custom JS codes problem, please provide your website credentials in below private message box, I need to test and debug it in a live website, thanks

#1602417

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Thanks for the details, I have done below modifications in your website:
Edit JS Code "Search":
hidden link

replace line 7 from:

jQuery(".radio-trigger").click(function() {

With:

jQuery(".radio-trigger").click(function(e) {
  e.preventDefault(); 

So click the images won't be able to trigger Views AJAX search, but change the radio input values will trigger Views AJAX search, it is only an example for your reference.

More help:
hidden link

#1602461

hey
thx - but issue persists. try clicking on the 3rd icon two times, for example
cheers
ido

#1603795

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

I have checked again in your website:
1) Deactivate custom JS Code "Search":
hidden link

2) Edit the post view "tracks1"
hidden link
in section "Search and Pagination", click "JS Editor", change the JS codes, add a line:

console.log(triggerIndex);

3) Test it in front-end:
hidden link
Click the 3rd image, and check it in my Chrome browser, I see two results:

0
3

It should output only one result: 3, it conducts the problem.

Then I have checked the source HTML codes of above problem URL:
view-source:hidden link

There are 12 HTML elements are using CSS class name "radio-trigger", as I understand from your JS codes, there should be only 6 HTML elements using this CSS class name, I suggest you remove the CSS class name from other those unused HTML elements.

#1606263

My issue is resolved now. Thank you!