[Resolved] Looking to Use a View to Act as Filter Options for Another View

[Author]

Posts

[zacharyL]

Tell us what you are trying to do? I'm trying to filter a view by using specific taxonomy terms output by a different view. This I've accomplished, but as a next step, I'm trying to have the filter view reload the results of the other view by triggering the AJAX rather than reloading the page.

Is there any documentation that you are following? I was referring to this support thread, to see if I could trigger the AJAX refresh without reloading the page, but was unsuccessful at implementing the trigger.

What is the link to your site? hidden link

I've put together a taxonomy view that outputs terms which have no parent, thus controlling what terms would display for the filter controls, as we intend on using sub category terms to identify specific departments that the posts were going to be associated with. The subcategories are intended more for visuals rather than functionality.

My first thought was to output the terms as list items with anchors with the href attribute populated with the necessary URL parameters to filter the view results:

<ul id="portfolio-depts" class="proxima-nova">
    <!-- wpv-loop-start -->
        <wpv-loop>
            <li><a href="?wpv-department=[wpv-taxonomy-slug]&wpv_aux_current_post_id=5134&wpv_aux_parent_post_id=5134&wpv_view_count=954">[wpv-taxonomy-title]</a></li>
        </wpv-loop>
    <!-- wpv-loop-end -->
</ul>

This works, if the page is reloaded, but my goal with this was to reload the view results by triggering the AJAX, instead of reloading the page. So I was trying to utilize jQuery's preventDefault(); to prevent the page from reloading, and add the href attribute values into the address bar, as seen below:

var portfolioDept = '#portfolio-depts li a';


$(portfolioDept).click(
    function(e){  
        var href = $(this).attr('href');

        e.preventDefault();
        $(portfolioDept).removeClass('active');
        $(this).addClass('active');   

        window.history.replaceState(null, null, href);
    }
);

What I can't figure out is how to trigger the AJAX. The support thread that I'm referring mentions two variables that need to be adjusted in order for a trigger to happen. I get the view_number, but I don't know what "fil" is supposed to represent.

When I dead-ended on that, I tried to replicate the exact form markup from the radio filter controls I generated with Toolset's filter shortcodes:

<form id="portfolio-depts" autocomplete="off" name="wpv-filter-954" action="/our-work/?wpv_view_count=954" method="get" class="proxima-nova wpv-filter-form js-wpv-filter-form js-wpv-filter-form-954 js-wpv-form-full js-wpv-dps-enabled js-wpv-ajax-results-enabled" data-viewnumber="954" data-viewid="954" data-viewhash="eyJuYW1lIjoicG9ydGZvbGlvLWZlZWQifQ==" data-viewwidgetid="0" data-parametric="{"query":"normal","id":"954","view_id":"954","widget_id":0,"view_hash":"954","action":"\/our-work\/?wpv_view_count=954","sort":{"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":""},"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":"","ajax_form":"","ajax_results":"","effect":"fade","prebefore":"","before":"","after":"","attributes":[],"environment":{"current_post_id":5134,"parent_post_id":5134,"parent_term_id":0,"parent_user_id":0,"archive":{"type":"","name":"","data":[]}},"loop":{"type":"","name":"","data":[],"id":0}}">
    <input type="hidden" class="js-wpv-dps-filter-data js-wpv-filter-data-for-this-form" data-action="/our-work/?wpv_view_count=954" data-page="1" data-ajax="enable" data-effect="fade" data-maxpages="0" data-ajaxprebefore="" data-ajaxbefore="" data-ajaxafter="">
    <input class="wpv_view_count wpv_view_count-954" type="hidden" name="wpv_view_count" value="954">
    <!-- wpv-loop-start -->
        <wpv-loop>
            <label for="department-[wpv-taxonomy-slug]" class="transition">
                <input id="department-[wpv-taxonomy-slug]" class="js-wpv-filter-trigger" type="radio" name="wpv-department" value="[wpv-taxonomy-slug]">
                [wpv-taxonomy-title]
            </label>
        </wpv-loop>
    <!-- wpv-loop-end -->
</form>

It triggers the AJAX, but it changes my filter view to the actual filter controls, which presents undesirable behavior.

So my focus with this inquiry is to see which method is the best way to handle my current problem, which is to filter the view results by triggering the AJAX.

I have a Duplicator package prepared in case you would like access to my site, but asking for help doesn't allow me to add private data to this message.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Let me tell you that there is no such feature available to trigger the Ajax request manually, as view can trigger Ajax request when the view is set to submit with ajax or filters are set to updated with ajax when changed.

The normal view's behavior is to filter it's own results and that is how views are expected to work. Views are not designed to filter the other views results and that's actually you are trying to do and which may require custom programming.

The code you shared is custom code and as per our support policy, we are not allowed to work on custom edits. If you want custom programming for your project, please feel free to contact our certified partners: https://toolset.com/contractors/

However, what if you try to add the CSS class js-wpv-filter-trigger to the element to which you want to trigger the ajax on click. Do you see it fires a ajax request?

[zacharyL]

Unfortunately that doesn't work. I was just seeing if there was some insight I could get on this, if there was a trigger that I could use to manually refresh the AJAX. I already have the URL parameters outputting to the address bar, I just need the AJAX to fire off so it reflects the filters present in the URL parameters.

What about the feedback from this support ticket (that I initially forgot to link back to)? https://toolset.com/forums/topic/ajax-filtering-with-jquery-call-ajax-filtering-with-jquery/

Waqas says, "This is a work in progress that we did start. However, and related to the particular query by this user, we do have a javascript API for this, or specifically, we do have a javascript event that you can trigger to trigger a parametric search change:

$( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
    // data.view_unique_id (string) ID of the View that you want to update - usually in data.form.data( 'viewnumber' )
    // data.form (mandatory) jQuery object corresponding to the form you want to trigger the parametric search at
    // data.force_form_update (optional) boolean
    // data.force_results_update (optional) boolean
}

With that custom event triggering the whole mechanism of parametric search update, it can be used to start it all from wherever you want.

this event is triggered when you make a change in the parametric search, so the search itself is triggered. But the power of custom events is that you can trigger them yourself.

In this case, the user can just do:

// Fill the "view_number" and "fil" variables with the right values
$( document ).trigger( 'js_event_wpv_parametric_search_triggered', [ { view_unique_id: view_number, form: fil, force_form_update: true, force_results_update: true } ] );

and that will trigger all the workflow for the parametric search."

Is there something I can use in this that will allow me to tie into the AJAX API to fire off an AJAX refresh?

[Minesh]

Yes, view supports the javascript triggers. Please check the following link:
=> https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

Views offers the following events:
- The AJAX pagination has been completed
- The custom search has been triggered
- The custom search data has been collected
- The custom search form has been updated
- The custom search results have been updated

More info:
hidden link

You should check if that help I did not shared because you wanted to fire the ajax event on your own but if you want to update something on

[zacharyL]

What do I do with this? Do I edit the comments that are output by the frontend events option that I selected? How do I link this to my filter view?

[zacharyL]

You know what? It doesn't matter now. The solution was so simple, that I can't believe it didn't occur to me when I was planning this out. I ended up adjusting my jQuery to trigger a click of the filter radio fields by connecting the two items by the id of the field and the taxonomy term slug. Here's what what my filter view looks like:

<ul id="portfolio-depts" class="proxima-nova js-wpv-ajax-results-enabled">
    <!-- wpv-loop-start -->
        <wpv-loop>
            <li><a href="?wpv-department=[wpv-taxonomy-slug]&wpv_aux_current_post_id=5134&wpv_aux_parent_post_id=5134&wpv_view_count=954" data-department="department-[wpv-taxonomy-slug]">[wpv-taxonomy-title]</a></li>
        </wpv-loop>
    <!-- wpv-loop-end -->
</ul>

I added a data attribute to the anchor populated with "department-[wpv-taxonomy-slug]" which reflects the id selector name of the actual filter's field. I probably don't actually need the href attribute populated with anything, but I left it in there, just in case I need it for later.

var portfolioDept = '#portfolio-depts li a';

$(portfolioDept).click(
    function(e){  
        var departmentSlug = $(this).data('department'),
            departmentFilter = 'input#' + departmentSlug;
        
        // Prevents Default Action of Anchor
        e.preventDefault();
        
        // Remove Active Class and Add it to Clicked Element in View
        $(portfolioDept).removeClass('active');
        $(this).addClass('active');   

        //Trigger Click of Corresponding Toolset Filter Field
        $(departmentFilter).trigger('click');
    }
);

And then I pull the data attribute's value with jQuery and tell the corresponding filter field to trigger a click on the click of the element in my view that represents my custom filter selections.