Skip Navigation

[Resolved] Conditional display in views not affection the same field in search module

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 11 replies, has 2 voices.

Last updated by Waqar 4 months, 1 week ago.

Assigned support staff: Waqar.

Author
Posts
#2253447

Hello,

for the custom field B I set the conditional display when the value of A custom field is === 1
In the view I have the custom fields used for searching and even if the A field is not = 1 it is still showing the B field in the search form.
How may I tell the search form to show the field B only if A===1?

Best,
Gianni

#2253531

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Gianni,

Thank you for contacting us and I'd be happy to assist.

The conditional display rules for the custom fields are applied in the post/page edit screen in the back-end and in the front-end Toolset forms, but, not in the search form for the views.

To show or hide the specific fields in the search form based on the values from another field, you'll need to include some custom script.

If you could share the link to the page where this view and the search field can be seen, I'll be able to share some more specific pointers on how the custom script can be used.

regards,
Waqar

#2254011

Hi Waqar,
thanks for your reply.
Please take a look here hidden link the 4rd select should be visible only if first select is set to 1.
Please share a script to allow this.
Best regards,
Gianni

#2254717

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing the link.

Here is an example code snippet that you can include in the view's "Custom JS " field:


jQuery(document).ready(function( $ ) {
  // hide the 4th select field
  $('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
  // execute the function to see if the first field value is equal to 1 or not
  detactChangeField1();
  // execute the function to see if the first field value is equal to 1 or not, when the first field's value is changed
  $('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').on('change', function() {
    detactChangeField1();
  });

  // function to see if the first field value is equal to 1 or not and show or hide the 4th field accordingly
  function detactChangeField1() {
    // get the value of the first field
    var firstFieldVal = $('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').val();
    // if the first field value is equal to 1
    if (firstFieldVal == 1) {
      // show the 4th field
      $('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').show();
    }
    else
    {
      // hide the 4th field
      $('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
    }
  }

});

It will hide the 4th select field, and will only show it when the value of the first select field is equal to 1.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

#2254935

Hi Waqar,
thanks for your reply.
I added the code in the js editor of the view, but nothing has changed in the front end.
Could you please take a look?
Thanks,
Gianni

#2255759

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I've checked the page's source code and couldn't find that custom script.

Can you please share temporary admin login details, so that I can see how and where this script is included?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

#2256033

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing these details.

I noticed that the view "vistacorsi" is created inside the content template with ID "731" and has no title.

The custom code was added in the JS editor of this content template ( screenshot: hidden link ), but since this template is not loaded on the "corsi" page, the custom script was also not loading.

I've removed the script from the content template's "JS editor" and instead added it in the view's own "Custom JS" field ( screenshot: hidden link ) and it is working now.

Note: Since the option "Show only filter options that would produce results" is enabled in the view's custom search settings, I've added some changes to the custom script, so that it also works when the view's components are changed through the AJAX.

Updated script:


( function( $ ) {
	$( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function( event, data ) {
		// hide the 4th select field
		$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
		// execute the function to see if the first field value is equal to 1 or not
		detectChangeField1();
		// execute the function to see if the first field value is equal to 1 or not, when the first field's value is changed
		$('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').on('change', function() {
			detectChangeField1();
		});
	 });
		 
	// function to see if the first field value is equal to 1 or not and show or hide the 4th field accordingly
	function detectChangeField1() {
		// get the value of the first field
		var firstFieldVal = $('.wpv-filter-form select[name="wpv-wpcf-a-chi-e-rivolto-il-corso"]').val();
		// if the first field value is equal to 1
		if (firstFieldVal == 1) {
			// show the 4th field
			$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').show();
		}
		else
		{
			// hide the 4th field
			$('.wpv-filter-form .wp-block-toolset-blocks-grid > .wp-block-toolset-blocks-grid-column:nth-of-type(4)').hide();
		}
	}
})( jQuery );

Note: The custom script won't be affected if you'll include URL parameters.

#2257431

Hello dear Waqar,

thanks for you kind reply.
Let me check for it please.
Best,
Gianni

#2257683

Hello Waqar,

the script hide and show the field in the 4th position (wp-block-toolset-blocks-grid-column:nth-of-type(4)
Imagine that. if the first field is ==1 in the 4th position I have to show one custom fields, if it is ==2 in the 4th position I have to show another custom fields.
How may I achieve this result
Warm regsards,
Gianni

#2258321

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for writing back.

I'm afraid, I couldn't understand the requirement shared in your last message.

Can you please share some more details about what change are you planning?

#2258351

Let me try to explain.
Imagine the current scenario, the 4th field maybe shown or hidden based on the value of the first field. This is fine, but I can the value of the first field is 1 I need the hide the current custom field and show another one that is not currenly in the search custom fields. This is may help to show a specific field based on selection without leaving that column empty
Hope this help.
Best,
Gianni

#2259109

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing for details.

This is possible and you'll have to include the other search field in the same fourth column as the "Qual è l'area formative?" field.

When the page will load both fields will be part of that fourth column, but with the extended custom script, one of the fields will be hidden and the other will be shown.

And, when the value of the "A chi è rivolto il corso?" field will change, the hidden field will become visible and the visible field will become hidden.

As we can only share basic examples of the custom code over the support forum, to write the completely customized script/code for your requirement, you'll need to hire a professional developer.
( ref: https://toolset.com/contractors/ )