[Resolved] triggering radio with jquery goes wrong

[Author]

Posts

[Ido Angel]

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

[Luo Yang]

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

[Ido Angel]

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!

[Luo Yang]

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

[Luo Yang]

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

[Ido Angel]

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

[Luo Yang]

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.

[Ido Angel]

My issue is resolved now. Thank you!