[Resolved] Nested views use same search filter sorting doesn't work

[Author]

Posts

[Joe]

I'm using legacy Toolset Views. I'm not using the block editor with it.

I have a view nested inside another view's search and pagination custom search. Each view is used with a different content post type. I'm sharing a single search filter on the front end for both views. By design, the view nested inside another view doesn't show anything to users on the front end outside of a single search filter. It's just used to grab numeric data for the main view to use to run a calculation. The main view's looped content template is what's shown to users on the front end.

The two views sharing a single custom search works fine except for when sorting controls are added. When sorting controls are added, they don't work on the front end. They can be selected, but don't do anything when the submit button is clicked and the page updates. The only way the sorting control works is if I remove the nested view. Is this a limitation of Toolset Views or is there something I can do to get this working? Thanks.

[Waqar]

Hi,

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

To troubleshoot this, I'll need to see how these views are set up in the admin area.

Can you please share temporary admin login details, along with the page where these views are in use?

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

regards,
Waqar

[Waqar]

Thank you for sharing these details.

During troubleshooting, I noticed that if the nested view's shortcode is moved outside the '[wpv-filter-start hide="false"] ... [wpv-filter-end]' tags, the sorting controls start working correctly.
( screenshot: hidden link )

The idea is that the nested view's instance should be outside the search form that is managed by the parent view.

I hope this helps and feel free to test and let me know if this re-location of shortcode affects any other aspect of the setup.

[Joe]

Your change completely broke my search form. It no longer works as intended and in fact can't be used at all as intended. It now functions as two separate search forms that work independently from each other and update the view independently instead of together. I have undone your change so that the two search forms work together again, but sort remains broken.

[Waqar]

Ok, in that case, if sorting control is important, we may have to think of a completely different way to structure these views.

Can you please share the exact requirements around what calculations this nested view is performing? I'll be in a better position to suggest the next steps, accordingly.

[Joe]

You have admin access to the site and can see the views, and exactly what's being done and calculated. Please take a moment to review them.

The nested view returns a single value that the main view needs to run a calculation. There are conditionals inside the content template of the main view that shows this calculation.

[Waqar]

I reviewed and tested the view's setup and found out what was happening.

In the parent view, several child views are nested to calculate price values, based on the state. However, the actual state selection filter needed to be fetched from another post type. Hence, another view ( 'Tax calculator state & local taxes only with sorting controls toolset test' ) was needed.

The sorting controls on the other hand were not working, because nesting of forms within forms is not allowed and it makes the mark-up invalid.

Here is a way around that I made to work around that:

1. In the view 'MVNO Plans Card Design Outbound Plan Links Only TOOLSET Test', I moved the nested view's shortcode outside the form's control and in a special div with the class "shadow-form-hidden".

<div class='shadow-form-hidden'>[wpv-form-view name="tax-calculator-state-local-taxes-only-with-sorting-controls-toolset-test" target_id="self"  cached="off"]</div>

Also, in that view's old place, added an empty div with the class 'shadow-form-new':

<div class='shadow-form-new'></div>

Screenshot: hidden link

2. In this same parent view's "JS editor", I included this custom script, which copies the HTML from the div with the class 'shadow-form-hidden' to the div with the class 'shadow-form-new':

jQuery(document).ready(function ( $ ) {
   var a = $('.shadow-form-hidden form .form-main-data').html();
      console.log(a);
		$('.shadow-form-new').html(a);
  		$('.shadow-form-hidden').html('');
});

3. In the view 'Tax calculator state & local taxes only with sorting controls toolset test', I introduced another div with the class 'form-main-data':
( screenshot: hidden link )

<div class='form-main-data'>
.......
</div>

This step was necessary, because we wanted only the selected part of the form's HTML from this view copied through the script and not the entire form.

This setup seems to be working in my tests and feel free to run your tests too.

[Joe]

Thanks. It seems to be working with some of the tests I have done. I will have to run a little more in the next day before being able to mark this as resolved.

[Waqar]

Glad that it seems to be working and please take your time.

[Joe]

All set now. Thank you for getting this resolved.