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.
