Hi Christian, I have been looking at my problem with search filtering and I came up with another solution. To review, I am creating something like this: hidden link
I am creating a template. I have 4 views for my content type with specific filters I am interested in.
My template (simplified) is:
<a href="#" id="nav1">Link 1</a>
<a href="#" id="nav2">Link 2</a>
<a href="#" id="nav3">Link 3</a>
<a href="#" id="nav4">Link 4</a>
<div id="target"> </div>
<script>
$ (document).ready(function () {
$('#nav1').click(function(){
$('#target').load('call view 1');
});
$('#nav2').click(function(){
$('#target').load('call view 2');
});
$('#nav3').click(function(){
$('#target').load('call view 3');
});
$('#nav4').click(function(){
$('#target').load('call view 4');
});
});</script>
I would like to call each view with the specific click.
I can load post / page content this way, can it be done with a view?
There is not a simple way to directly load AJAX results like this. We offer the following API for rendering a View, but there is no endpoint set up for you to call with AJAX:
https://toolset.com/documentation/programmer-reference/views-api/#render_view
On the other hand, you could use Views to write all the possible content into the page, hidden with CSS. Then show and hide pieces of content when a link is clicked, instead of loading different results with AJAX.
This isn't pretty yet, but I have a solution: hidden link
My template code, in case someone else is searching for a similar solution:
<div class="wrap">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >S Link</a>
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >A Link</a>
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >W Link</a>
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" >C Link</a>
<p> </p>
<div class="newboxes" id="newboxes1" style=" display: block;padding: 5px; "><?php
$args = array(
'title' => 'S Staff'
);
echo render_view( $args );
?></div>
<div class="newboxes" id="newboxes2" style=" display: none;padding: 5px; "><?php
$args = array(
'title' => 'A Staff'
);
echo render_view( $args );
?></div>
<div class="newboxes" id="newboxes3" style=" display: none;padding: 5px; "><?php
$args = array(
'title' => 'W Staff'
);
echo render_view( $args );
?></div>
<div class="newboxes" id="newboxes4" style=" display: none;padding: 5px; "><?php
$args = array(
'title' => 'C Staff'
);
echo render_view( $args );
?></div>
<p> </p>
</div >
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
Thanks for helping talk me through this.
