[Resolved] Using a type's title to filter the content of the page

[Author]

Posts

[nelsonT-2]

Hi,

It looks like there is something that should be easy to do is really hard for me...

Here's what I have: a job listing with the job title as the title and everything else in the body...

What I would like to do is use the job's title as a button/link that when clicked will change the content on an area below depending on which was clicked... I.e. I guess it's simply an AJAX call that would change the content (innerHTML) of a div below...

But it looks like I don't know how to do that with Views...

I first tried to create a View with a filter and I would have used the title (that I formatted to look like a button) to filter the content below... But the problem is that there is no way to use that as a filter (besides maybe use a text search, but that's not how I want to use it... I want a list that is formatted as buttons).

I then tried to use two Views: one that simply displays all the jobs (i.e. post title) and another one that would display the title and body based on which one was clicked above... And this is where I'm mixed... The options that I have are just ids, and I can specify a specific Id, use a url attribute or view attribute... I have the feeling that I would have to do that with jQuery where I put links and onClick, instead of going to another page, change a div's content... But using View should make it easier, so, don't know what I do wrong...

I even tried to create a third View, where the filter would be the first View (list of job titles) and the content would be the second View (display of title and body) using the parent View, but with no success...

So, can you point me in the right direction?

Nelson

[Luo Yang]

Hello,

There isn't such a built-in feature within Views plugin, it needs at lest two views + custom codes, for example
1) 1st post view list all posts, display the post title as link, and pass post ID as the URL parameter "post_ids"
2) 2nd post view with custom search form list only one post, filter by:
Include only posts with IDs determined by the URL parameter "post_ids" eg. yoursite/page-with-this-view/?post_ids=1
display the post content
https://toolset.com/documentation/user-guides/filtering-views-query-by-post-id/

When user click the post title link, setup some custom JS codes to update a hidden field "post_ids" value to the post ID, and submit the form automatically, then it will pass the URL parameter "post_ids" to the 2nd post view.

More help:
hidden link
hidden link

[nelsonT-2]

Hi,

I've spent many hours trying to figure it out without success... It is easy to do if I don't bother refreshing the page, but that's not what I want, so then it gets complicated...

I have three Views:
1- The first one that lists all the job postings' title and I have used some html to create a link with the id, as you mentioned (<a href="[wpv-post-id]" class="btnPostes">[wpv-post-title]</a>)
2- The second one displays 1 result (to be sure when the page first loads) and uses the filter id by url; in it, I show the title and body of the custom type;
3- An "overall" View where I use the first View as the filter (can we really do it? It shows the "Fields and Views" button, but when we add it, it doesn't create any Query Filter like a "regular" filter would do) and the second View above the loop (inside [wpv-items-found], because if I don't do that, it loads the first element five times...)

The third View is set to use a filter; the Custom Search Settings is set to "AJAX results update when visitors change any filter values).

If I leave it like that, it does work, but always reloads the page (well, actually, if I put the full url; if not, it just tried to load the sitename/id) and end up on a 404 page...

So, I added <input type="hidden" name="post_ids" id="post_ids"> in the Search and Pagination section and this code in the JS section (on the filter) (the first level function is just to be able to use "$" instead of always typing "jQuery"):

(function($) {
    $('.btnPostes').click(function (event){
    	event.preventDefault(); // needed, or the page always loads the full page, i.e. no AJAX call but the entire page is reloaded
       $('#post_ids').val($(this).attr('href')); // adds the id to the hidden field
      	$(document).submit();
    });
})( jQuery );

That doesn't work... I tried adding some code to see if the event is triggered:

jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.form (object) The jQuery object for the View form
	* data.update_form (bool) Whether the custom search form will be updated
	* data.update_results (bool) Whether the custom search results will be updated
	*/
	alert('triggered');
});
jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	*/
	alert('started');
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.view_changed_form (object) The jQuery object for the View form after being updated
	* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
	* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
	*/
	alert('search form updated');
});
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	alert('results updated');
});

Nothing is triggered... Even if I try to add another component like a drop-down, the trigger event is raised, but not the others...

Since when we add a "regular" filter, it aslo add some code to the "Query Filter", I tried adding the post_ids URL parameter, but it still didn't work.

Since there is not <form> tag added to the filter, I changed my code (for the hidden input) to:
<form id="postes">
<input type="hidden" name="post_ids" id="post_ids">
</form>

And then used $('#postes').submit(); instead of the document... Again, it works, but reloads the entire page (so defeats the whole purpose of those manipulations)...

So, my guess is that I'm trying to use a View as the filter, but I don't really have the choice to be able to use the post name as my buttons...

Can you help me on that?

Thank you.

[Luo Yang]

It needs custom JS codes, please provide a test site with the same problem, also point out the problem page URL and view URL, I need a live website to test and debug the codes. thanks

[Luo Yang]

Thanks for the details, I have done below modification in your website, it needs only two post views:
1) Title list view "liste-des-postes-disponibles":
hidden link

in the content template, display the link as below:

<a href="#" class="btnPostes js-wpv-filter-trigger-delayed" post_id="[wpv-post-id]">[wpv-post-title]</a>

2) the main view "Contenu des postes à afficher":
hidden link

In section "Search and Pagination", display the above view + a single line field "post_ids" + submit button:

	[wpv-view name="liste-des-postes-disponibles"]
	<div class="hide-it">
		[wpv-control-postmeta type="textfield" url_param="post_ids"]
		[wpv-filter-submit output="bootstrap"]
	</div>

click "JS Editor", add below codes:

(function($) {
    $('.btnPostes').click(function (event){
      event.preventDefault(); // needed, or the page always loads the full page, i.e. no AJAX call but the entire page is reloaded
      $('input[name="post_ids"]').val($(this).attr('post_id')); // adds the id to the hidden field
      //$('form[name="wpv-filter-8605"]').submit();
      $('input.js-wpv-submit-trigger').click();
    });
})( jQuery );

Which user click the post title, it will change the "post_ids" field value, and click the submit button.

3) Put above main view into a page and test:
hidden link

You can use some CSS codes to hide the single line field "post_ids" + submit button

[nelsonT-2]

Thank you sooo much... I've spent few hours trying to figure it out... Hopefully I'll understand more the coding behind it and be able to do it myself...