[Resolved] Display body of child post selected by drop-down list

[Author]

Posts

[mikeL-12]

Tell us what you are trying to do?
I am adding functionality to my site and it's my first foray into parent/child posts. I have created a 3-generation post hierarchy, TV Series->Season->Episode. At each level of the hierarchy I have added content (TV Series has a post body, Season has a post body, and Episode has a post body, they are rules to follow when watching), and the idea is to visit the page for TV Series and then have two drop-down selectors on that page allowing you to select a particular season of the show, which would add the body of that particular "season" child post to the page, and then select a particular episode of the show, which would add the body of that particular "episode" grand-child post to the page. When both are selected the page would have built a complete list of rules to follow for that particular episode.

I'm having trouble creating the View because when I select the "Seasons" post type to display with that view and then go into the query builder, I only have the ability to select the parent relationship, which makes the drop-down options the TV Series name(s), and (somewhat) correctly displays the post body of the season(s), but actually displays the post bodies of all of the seasons, or I have the option to select the Episode relationship, which correctly shows me the seasons in the drop-down menu, but once selected, it similarly displays the post bodies of all of the episodes in that season.

Is there any documentation that you are following?
I have been looking for some to follow for this but either I'm not understanding the functionality correctly or seems to be a somewhat unique scenario.

Is there a similar example that we can see?
I don't have one handy, though I can see if I can search other sites for a similar type of functionality if needed.

What is the link to your site?
The site is hidden link, my specific test post for this is located here hidden link, I've made it public so that it is available for you to view if desired.

Attached is a screenshot of roughly how I'd like it to look/work (apologize for the lack of formatting so far), even though it is currently not functional in this state.

Thank you!!!!
Mike

[Waqar]

Hi Mike,

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

To suggest the best way to achieve this, I'll need to see how these post relationships and the content template for the TV show is set up in the admin area.

Can you please share temporary admin login details in reply to this message?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[mikeL-12]

Also, the backup has been completed, so we can make any changes necessary to find the solution to my issue.

[Waqar]

Hi Mike,

Thank you for waiting and I apologize for the delay in getting back on this.

I'm currently performing some tests on my website with similar post relationships and will update you with the results, shortly.

Thank you for your patience.

regards,
Waqar

[Waqar]

Hi Mike,

Thank you for waiting.

Based on my tests, for what you are planning, it would be best to create a form with the dropdown for the Seasons and Episodes section using two post views. These will be the steps:

Step 1: "View to show Seasons":

- You'll create a post view, and set it to show "Seasons" posts.

- In the "Query Filter" section, you'll add a post-relationship filter for the "TV Series -> Seasons", linked to "The post where this View is shown"
( screenshot: hidden link )

This filter will ensure that only seasons related to the current TV series are returned by this view.

- In the "Loop Editor" section, you'll need to construct the view's output in a way that it includes a form with the seasons and episodes select/dropdown fields.

[wpv-layout-start]
	[wpv-items-found]
		<form action="" method="GET">
			<div class="form-group">
				<label for="wpv-season">Seasons</label>
				<select name="wpv-season" class="season-select">
					<option value="">-select-</option>
					<!-- wpv-loop-start -->
					<wpv-loop>
					<option value="[wpv-post-id]" [wpv-conditional if="( '[wpv-search-term param="wpv-season"]' eq '[wpv-post-id]' )"]selected="selected"[/wpv-conditional]>[wpv-post-title]</option>
					</wpv-loop>
					<!-- wpv-loop-end -->
				</select>
			</div>
			[wpv-conditional if="( '[wpv-search-term param="wpv-season"]' ne '' )"]
				<strong>Season Description:</strong><br>
				[wpv-post-body view_template='None' item='[wpv-search-term param="wpv-season"]']	
			[/wpv-conditional]
			<hr>
			[wpv-view name="view-to-show-episodes"]
		</form>	
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Note: You'll replace "view-to-show-episodes" with the actual slug of the view that will be created in the next step.

- In the "JS editor" tab under this "Loop Editor" section, you'll need to include some custom script, that will reset the episode selector/dropdown and submit the form when season selector/dropdown is changed:

jQuery('select.season-select').on('change', function() {
	jQuery('select.episode-select').val('');
	this.form.submit();
});

- Please also make sure that "Disable the wrapping DIV around the View" option is also checked just above the "Output Editor" section.

Step 2: "View to show Episodes":

- You'll create another post view, and set it to show "Episodes" posts.

- In the "Query Filter" section, you'll add a post-relationship filter for the "Seasons -> Episodes", linked to the URL parameter "wpv-season".
( screenshot: hidden link )

This filter will ensure that only episodes related to the Season post whose ID exists in the URL parameter "wpv-season" are returned.

- In the "Loop Editor" section, you'll need to construct the view's output in a way that it includes a select/dropdown field for the available episodes:

[wpv-layout-start]
	[wpv-items-found]
		<div class="form-group">
			<label for="wpv-episode">Episodes</label>
			<select name="wpv-episode" class="episode-select">
				<option value="">-select-</option>
				<!-- wpv-loop-start -->
				<wpv-loop>
				[wpv-conditional if="( '[wpv-search-term param="wpv-season"]' ne '' )"]
				<option value="[wpv-post-id]" [wpv-conditional if="( '[wpv-search-term param="wpv-episode"]' eq '[wpv-post-id]' )"]selected="selected"[/wpv-conditional]>[wpv-post-title]</option>
				[/wpv-conditional]
				</wpv-loop>
				<!-- wpv-loop-end -->
			</select>
		</div>
		[wpv-conditional if="( '[wpv-search-term param="wpv-episode"]' ne '' )"]
			<strong>Episode Description:</strong><br>
			[wpv-post-body view_template='None' item='[wpv-search-term param="wpv-episode"]']	
		[/wpv-conditional]
		<hr>
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

- In the "JS editor" tab under this "Loop Editor" section, you'll need to include some custom script, that will submit the form when episode selector/dropdown is changed:

jQuery('select.episode-select').on('change', function() {
	this.form.submit();
});

- Please also make sure that "Disable the wrapping DIV around the View" option is also checked just above the "Output Editor" section.

Once both these views are ready, you can include the parent view created in Step 1, in your content template for the single TV Series page:

[wpv-view name="view-to-show-seasons"]

I hope this helps and please let me know if any step or segment is not clear.

regards,
Waqar

[mikeL-12]

This works perfectly! Thank you so much Waquar!!!