Tell us what you are trying to do?
I'm trying to hide or make a custom field unavailable when another custom field is selected in the custom search. I only want to make "Rua Centro RJ" available for choosing when "Centro" is chosen in "Bairro RJ."
Is there a similar example that we can see?
Your real estate page makes cities unavailable if a state is not chosen first. When a state is selected then only some cities are shown. I want to do that for my custom search. hidden link
There is no native way to show/hide custom search filter until you add custom JavaScript code.
I tried to visit the problem URL you shared but I do not able to see anything there, maybe I will require to login:
- hidden link
Can you please share admin access details and tell me what option you want to hide and what option you want to show and I'll review it and see if I can share any workaround.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site.
I have set the next reply to private which means only you and I have access to it.
Thank you for your valuable inputs but as a supporter its not our decision that what features should be taken in account and what should be added in queue as priority.
However - the good news is I've found the solution for you and here is it.
As you can see with the 2nd dropdown filter "Rua Centro RJ" - I've added the ID "showhidefilter" and class "hidefilter" as you can see with the following screenshot:
- hidden link
Then to your view's "Custom CSS and JS" seciton:
- I've added following CSS to custom CSS section:
.hidefilter { display:none; }
I've added the following custom JS code to the custom JS section:
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
*/
x = jQuery('#wpv_control_select_wpcf-bairro-rj').val();
if(x==2){
jQuery('#showhidefilter').removeClass('hidefilter');
}else{
jQuery('#showhidefilter').addClass('hidefilter');
}
});
Can you please check now: hidden link
I can see now the 2nd dropdown only available when you select the "Centro" option in "Bairro RJ."
Minesh I totally understand that you are only the support team, but I'm sure I'm not the only customer who demands a bit more from Toolset. But I appreciate your help and I would have never been able to code what you did. Maybe Toolset should change it's slogan to "No PHP coding needed, but lots of JS and CSS needed!" That would make a more accurate statement in my opinion.
Two things:
1) In this search I have not included the State, but in the future I will. Will I need to copy the whole code again and change the "#wpv_control_select_wpcf-bairro-rj" to the state one. Or is it possible to modify this code to include all the items I want to hide?
2) This is a band-aid solution and not exactly like the demo Real Estate site. hidden link
In the Real Estate site, you can see that the city is unclickable until you choose a state. Once the state is selected, only the cities in that state is shown in the dropdown. How can I achieve this please?
One more thing, which is not related to hiding or showing the field is that when I choose a street in "Rua Centro RJ" then I decide to change the neighborhood "Bairro RJ" to "Todos" (ALL), then it stays in the same result. I was expecting that it would clear everything and show all, independently if a street "Rua Centro RJ" is chosen previously.
I attached the two images to make my point but if you are not clear on what I mean do the following:
1) Choose "Centro"
2) Choose any street
3) Choose "Todos" in Bairro RJ and you will see what I mean.
1) In this search I have not included the State, but in the future I will. Will I need to copy the whole code again and change the "#wpv_control_select_wpcf-bairro-rj" to the state one. Or is it possible to modify this code to include all the items I want to hide?
==>
It depends on what option you want to show/hide the filters based on what dropdown selection.
2) This is a band-aid solution and not exactly like the demo Real Estate site. hidden link
In the Real Estate site, you can see that the city is unclickable until you choose a state. Once the state is selected, only the cities in that state is shown in the dropdown. How can I achieve this please?
==>
As shared before - there is no such feature available to display dependent dropdown filters using custom fields. The real estate site uses the related posts filter. And State and Cities are configured as post types and there is a one-to-many post relationship between State and City post types.
I'm trying to help you to offer you the best solution I can otherwise its custom code which is beyond the scope of our support policy.
So, I've tried to setup the things as per your requirement.
I've adjusted the code added to view's custom JS box as given under:
jQuery( document ).ready(function($){
jQuery('#wpv_control_select_wpcf-rua-centro-rj').prop("disabled",true);
});
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
*/
x = jQuery('#wpv_control_select_wpcf-bairro-rj').val();
if(x==2){
jQuery('#wpv_control_select_wpcf-rua-centro-rj').prop("disabled",false);
}else if(x=='' || x!=2){
jQuery('div.form-group').find('#wpv_control_select_wpcf-rua-centro-rj').prop("disabled",true);
}
jQuery('#wpv_control_select_wpcf-bairro-rj').on( 'change', function() {
val = jQuery(this).find(":selected").val();
if(val==2){
jQuery('select[name="wpv-wpcf-rua-centro-rj"]').prop("disabled",false);
}else if(val=='' || x!=2){
jQuery('div.form-group').find('#wpv_control_select_wpcf-rua-centro-rj').prop("disabled",true);
}
});
});
Minesh, you are a godsend! You did an amazing job and you need a raise my friend!
The real estate site uses the related posts filter. And State and Cities are configured as post types and there is a one-to-many post relationship between State and City post types.
=> Why would State and Cities be configured as Post Types? Is there a document explaining the reason and its usage?
How were you able to fix the selection when choosing the neighborhood again after selecting the street to show "Todas" again?
Glad to know that solution I shared help you to resolve your issue. Thank you for your kind words I really appreciate it. Pleaser feel free to share your feedback/experience when you mark resolve this ticket.
The real estate site uses the related posts filter. And State and Cities are configured as post types and there is a one-to-many post relationship between State and City post types.
=> Why would State and Cities be configured as Post Types? Is there a document explaining the reason and its usage?
===>
Because you can display dependent filters like State/City you have seen and its based on custom post type. There is no Doc about why its not possible with custom field but you can check the following Doc that might help you to understand the said feature:
- https://toolset.com/documentation/legacy-features/views-plugin/how-to-filter-by-related-posts/
How were you able to fix the selection when choosing the neighborhood again after selecting the street to show "Todas" again?
==>
By adjusting the JS code I shared.
1) Legacy view... does it work with Toolset Blocks? If so, is there an article about it? If not, what is the alternative?
2) As I thought about what you said regarding States and Cities being Post Types. I decided to test it out the Real Estate demo site created in discover-wp. At first I went through the setup in admin back end and looked at how everything was setup. I started to understand a bit more of what you meant about related post filters.
I decided to create a property to see and understand the flow. In the form, I noticed that it did not ask me the State or City this property was located. It did have an address field for the map, which I put a random address. When finished, I noticed that in the custom search, I could not choose the location of this new property I created. It's outside of the US so it is not in Arizona neither North Carolina. And there is no option to choose Arizona neither NC in the form (add new property). hidden link
A) Why wouldn't the form have a State or City option?
B) Why the address I put was not picked up by the custom search and added in the States and Cities?
It seems like it's hard to make a seamless experience for the user and admin with Toolset. 🙁
Two things:
1) Legacy view... does it work with Toolset Blocks? If so, is there an article about it? If not, what is the alternative?
==>
Yes - but you can install the Toolset Blocks and enable the legacy views. Here is the Doc, the same steps for Legacy views to enable blocks:
- https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/
2) As I thought about what you said regarding States and Cities being Post Types. I decided to test it out the Real Estate demo site created in discover-wp. At first I went through the setup in admin back end and looked at how everything was setup. I started to understand a bit more of what you meant about related post filters.
==>
You need to add it as frontend filter to filter by posts in relationship. I already shared the Doc:
- https://toolset.com/documentation/legacy-features/views-plugin/how-to-filter-by-related-posts/
May I ask you to kindly open a new ticket for every new question you may have. This will help other users searching on the forum as well as help us to write the correct problem resolution summery for the original issue reported with this ticket. Thank you for understanding.
