[Resolved] Images disapear when clicking on All filter
This thread is resolved. Here is a description of the problem and solution.
Problem:
How to use images as radio button with view's filter
Solution:
View's offers AJAX filter callback events which you may use as callback to call your required custom JS.
When you visit view's Filter section's JS box - you will see a button "Frontend Events". When you click it it will allow you to choose ajax callback events for parametric search.
I'm wonder what is changing in the request when we use a regular filter (i.e. a radio option) vs the default "All" option...
Here's what we are doing: I want to be able to use images in the different filter options.
With some jQuery, I was able to do it and it works fine... When I open the page and click on any option, the filter works well AND the images are always there (using AJAX to refresh the results)... BUT when I click back on ALL, then the images disappear...
The first top section is to make sure that the filter is shown as selected... Since it changes on every AJAX request, I've put it outside a function (for when the page loads) and again inside an ajaxComplete event...
The second part is to insert the image... Again, as I said, it works fine until we click the "All" default option (and of course, doesn't bring the images back after)... I tried to put that into an ajaxComplete again, but it outputs the images 2-3 times... and there's probably some ajax always in the background, because it adds some every few seconds...
SO, what's the difference between any option and the default one? What kind of code can I put for my images to stay there no matter the option selected?
Nelson
P.S. The site is not listed in my account, so my client probably used her own account... The page is hidden link (not translated yet)...
Hello. Thank you for contacting the Toolset support.
Well - View's offers AJAX filter callback events which you may use as callback to call your required custom JS.
When you visit view's Filter section's JS box - you will see a button "Frontend Events". When you click it it will allow you to choose ajax callback events for parametric search.
Please check following image:
=> hidden link
For example:
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
YOUR CUSTOM CODE GOES HERE
});
Thank you, but it basically does the same thing as what ajaxComplete does... So, the problem is sill there.
I tried adding a code to delete the image and it does work when I click on the "All" option, but when I click any of the other options, it still doubles every image...
I even added a code to delete all the images before adding it again, and the result is the same...
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
jQuery('#filtreRealisations .radio label').each(function(){
jQuery('#filtreRealisations .radio label').remove('img');
var slug = jQuery(this).find('input').val();
jQuery(this).prepend('<img src="/wp-content/uploads/2018/02/' + slug + '.png">');
});
});
I also had to keep the inside code one in order for the images to appear when we first load the page...
Could you please share exact problem URL where I can see the behavior you shared?
Also, please share all required details, which view you are using.
Also, few screenshots will be helpful to understand what is your issue and what should be the expected results.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).
I have set the next reply to private which means only you and I have access to it.
Please note that - this is custom jQuery code, I'll try to check and try to guide you with solution but there is no promise on that as this is custom code and it's beyond the scope of our support policy.
I've added following event as well to your view's JS box:
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/
jQuery('#filtreRealisations .radio label').each(function(){
jQuery('#filtreRealisations .radio label').remove('img');
var slug = jQuery(this).find('input').val();
jQuery(this).prepend('<img src="/wp-content/uploads/2018/02/' + slug + '.png">');
});
And I can see that now it's working even if you click on "TOUT" (or "ALL").
Because I don't know why, but on my end I don't see the same thing as you do: not only does the images disappear when I click on "TOUT" (after selecting one of the filters), but now the selected element doesn't get highlighted anymore (it was previously)...
Just to make sure we are talking about the same thing: I'm not talking about the images in the white area (i.e. the results), but in the red area (i.e. the filters)...
If you will check your view's JS box - You will see the code I've added:
=> hidden link
You should try to delete your browser cache or try with another browser and check if that help to resolve your issue. I've tested this on Chrome and FireFox and its working fine.
