Skip Navigation

[Resolved] How to integrate a link to previous and next post inside a Forms (modification)

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a Form that is uesd to edit posts. I would like to include a next and previous post link so that I can edit the next or previous post easily without returning to a list of posts.

Solution: Create a paginated, filtered View that displays only 1 post, using AJAX pagination updates. In the Loop Output editor for this View, place an Edit Post Form. Place this View on a custom Page.

In another custom Page, place a filtered View that shows all the posts. Next to each post, create a custom edit post link that directs the User to the other custom Page, using a pagination URL parameter based on the loop iteration.

add_shortcode( 'loop-iteration', function( $atts ){
  
    global $loop_n;
  
    if ( !isset( $loop_n ) ) {
        $loop_n = 1;
        return $loop_n;
    }
  
    $loop_n++;
  
    if ( !isset( $atts['n'] ) ) {
        // no nth parameter, just return the current index
        return $loop_n;
    }
    else {
        $remainder = ( $loop_n + 1 ) % $atts['n'];
        return ( $remainder == 0 );
    }
  
});
<a href="/view-2-page?wpv_paged=[loop-iteration]">[wpv-post-title]</a>
This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 1.41 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 17 replies, has 3 voices.

Last updated by Pat 6 years, 4 months ago.

Assisted by: Christian Cox.

Author
Posts
#921663

Pat

Hello,

I have created a Forms used to modify the posts of a postype "objet"
I would like to integrate in this Forms the ability to move from a post to another (previews / next) without having to come back to the objet list.

That is interesting when you need to check if everything is OK and don't need to make modification on each posts.

Can you explain how I can do this?
Regards
Pat

#921927

This should be possible as follows:

- Create the Form to edit Posts, set it to submit by AJAX and keep display the form
- Create a View, that lists all posts
- Paginate that View by One
- Insert the Form in the Loop
- Insert the View in a Page
- Visit that page, submit the first form, paginate, submit again etc.

There are however some issues, if you do that with User Forms:
https://toolset.com/errata/views-ajax-pagination-url-parameters-are-added-to-cred-user-edit-links-in-a-user-view-loop/

Else, there are no issues as I tested this locally.

#922122

Pat

Hi Beda,

Perfect. Many thanks
Pat

#922138

Pat

Hi Beda,

Just another point concerning this ticket.
As mentioned, your solution works fine. But, the way I need to use it causes a little problem.

I need to access first a specific objet and then, be able to move previews / next.

So, I have a first Views that list all objets and a button to redirect to a page where I can modify it. Here is the link I have placed in the Views to access the specific objet :

This page (modification objet) contains actually the Cred modification :

[cred_form form='375' form_name='Modification objet antiquaire' post="[wpv-search-term param='post_id']"]

I have tried to replace this content with the news created Views, but it does not work
Which kind of solution could I use to have both functionalities :
- direct access to an objet
- possibility to move previews / next from this specific objet

Regards
Pat

Pat you can use the shortcodes wpv-post-next-link and wpv-post-previous-link to create these navigation elements on the single objet post:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-next-link
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-previous-link

#922268

Pat

Hi Christian,

Already done. Here is the code inserted inside the Views filter :

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]Précédent[/wpml-string][/wpv-pager-prev-page]
<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Suivant[/wpml-string][/wpv-pager-next-page]

[wpv-filter-end]

In fact, the issue is that I have a Views that lists all objets. This Views output some info from the objet and a specific link to edit it :

Thanks to Beda answer, I have also created a new Views in order to integrate the pagination. This new Views liste all objet and paginate with 1 and adds the pagination code I have show above.

The issue is that thanks to the link, the Cred is opened in a page (hidden link) and the id of the specific objet is given by the ?post_id=[wpv-post-id] argument.

This part works well. The issue is that when you are on this page (modification-objet/?post_id=[wpv-post-id]), the pagination does not work. For example, if I'm clicking on the "Next" button, here is the url I'm getting :
modification-objet/?post_id=3403&wpv_view_count=3784-TCPID394&wpv_paged=2

Normally, to work well, I should have something like :
modification-objet/?post_id=3404 where 3404 is the id of the next objet post.

Any idea?
Regards
Pat

Beda's solution requires that you place the Form directly inside the Loop Output of the View of posts. In your example, you have placed the Form in another page, and added a link to the edit Form. This will cause a problem because you can no longer paginate to the adjacent post on this external page.

If you want to paginate on an external page, the process is more complicated and I'm afraid I don't have a simple solution for you. You might be able to write a custom shortcode that determines the next and previous post IDs using the WordPress filters get_next_post_where and get_previous_post_where, then build your next and previous link URLs using those IDs.

#922652

Pat

Hi Christian,

I'm a little lost concerning the placement of the form.
Can you explain where I should place it in order to make it work correctly?
I have no specific requirement to place the form ina specific page. The only think I need is that the objet is seenable in the frontend (I have created a content template for that) and also that the editors can modify them easily in the frontend also.

Let me know
Regards
Pat

#922796

Pat

Hi Christian,

I have tried to work again on this topic.
So, I have an edit form for objet and created a layout including this form.
I have also added the form edit link inside the global Views (the one that lists all objet).
Then, I'm a little lost on how to integrate the pagination Views from Beda.
Can you help please
Thanks
Pat

#923071

So, I have an edit form for objet and created a layout including this form.
The Edit Post Form must be placed inside the Loop Output editor of a paginated View. This is the only way to get the pagination to work correctly with the Form. You cannot place the Edit Post Form in a separate Layout or a separate Content Template and link to it using the standard Edit Post link.

Let's say you have two Views.
View 1 - The View of all objet posts, not paginated. You have an Edit Post link next to each result. This edit post link should be removed, because we are using a non-standard editor. We will create a custom link later.
View 2 - The paginated View of objet posts, with only one post per page. Inside this View's Loop Output Editor, place the Edit Post Form.

Place View 1 on some custom Page. Place View 2 on some other custom Page. You should be able to use the navigation links on View 2 now. Set up this View so that it paginates with AJAX and updates the page URL when it paginates. The Edit Post Form will be displayed for each objet as you paginate. Let me know if you are able to get this working, then we can work on linking between the two Views next.

#923100

Pat

Hi Christian
Many thanks for your support.
Until now, thinks are moving in the right direction and I can display the Cred modification and have the pagination working !
Last point now is to access directly to a specific objet thanks to Views 1.
Let me know;
Regards
Pat

#923550

Okay great. Now you need to be able to create links to View 2 from View 1. Check the URL of View 2 and you will see that pagination is included as a URL parameter wpv_paged, something like http://yoursite.com/view-2-page/?wpv_view_count=12345&wpv_paged=2. To link to the correct page, we need to know which page number contains the post. Since only one post is shown per page, we know that the row number of the post from View 1 is identical to the page number containing the post in View 2. In other words, the first link should point to page 1, the second link should point to page 2, and so on. To access the row number in a View, you'll need a custom shortcode:

/**
 * Add loop-iteration shortcode
 * 
 * Attributes
 * 'n' (optional) : test for nth iteration
 */
add_shortcode( 'loop-iteration', function( $atts ){

	global $loop_n;

	if ( !isset( $loop_n ) ) {
		$loop_n = 0;
		return $loop_n;
	}

	$loop_n++;

	if ( !isset( $atts['n'] ) ) {
		// no nth parameter, just return the current index
		return $loop_n;
	}
	else {
		$remainder = ( $loop_n + 1 ) % $atts['n'];
		return ( $remainder == 0 );
	}

});

Now in View 1, you can build your links using this custom shortcode. Something like this:

<a href="/view-2-page?wpv_paged=[loop-iteration]">[wpv-post-title]</a>

The loop-iteration shortcode can only be placed in the Loop Output editor once. View #1 cannot be paginated, and if you apply any offset to View #1 you must also apply the same offset to View #2.

#923595

Pat

Hi Christian,

Thanks for the proposal.
I'm trying and find that the result does not match (-1 in the ID)
Do I need to sort Views 1 in a specific way for that (currently, by date with last date in first).
Regards
Pat

#923720

Views 1 and 2 should have the same Query Filters and sorting options. Sorting by post date should be fine as long as both Views are sorted the same way. If that's not working for you, please share all the code from the Loop Output editor and any templates included in the loop here for me to review.

#923770

Pat

Hi Christian,

I just checked that every parameter is the same for both Views :
Content : objet
Sorting : date decreasing
Filters : user logged in + Post publihed
Don't include the current page in the result
No limit, no skip
No pagination on Views 1 and pagination with manual transition + ajax on Views 2

Filter on Views 2 :

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]Précédent[/wpml-string][/wpv-pager-prev-page]
<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Suivant[/wpml-string][/wpv-pager-next-page]

[wpv-filter-end]

Loop on Views 2 :

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>[cred_form form='375' form_name='Modification objet antiquaire']

</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Loop on Views 1 :

<td><div class="imgantic">[types field='objet-image-principale' alt='%%ALT%%' title='%%TITLE%%' size='thumbnail' align='none' resize='proportional'][/types]</div></td>
<td Style="padding-left:10px;">[wpv-post-title]</td>
<td>[types field='objet-prix' format='FIELD_VALUE'][/types]</td>
<td>[wpv-post-taxonomy type="style" separator=", " format="text" show="name" order="asc"]</td>
<td>[wpv-post-taxonomy type="epoque" separator=", " format="text" show="name" order="asc"]</td>
<td>[wpv-post-taxonomy type="type-d-objet" separator=", " format="text" show="name" order="asc"]</td>
<td>[wpv-post-date format="d/m/y"]</td>
<td>[views id="[wpv-post-id]"]</td>
<td>[wpv-view name="nb-de-wishlistes-dun-objet" ids="[wpv-post-id]"]</td>
<td>hidden link;" class="btn btn-warning">MODIFIER</td>
<td>[wpv-conditional if="( '[wpv-post-status]' eq 'publish' )"][cred_delete_post_link class='btn btn-danger cred-refresh-after-delete' text='DESACTIVER' message='Est-vous sûr de vouloir désactiver cet objet?' message_after='Objet désactivé' message_show='1' action='trash' redirect=''][/wpv-conditional]
[wpv-conditional if="( '[wpv-post-status]' ne 'publish' )"]
<div class="btnreact">[cred_form form='reactivation-objet-antiquaire' form_name='Réactivation objet antiquaire'][/wpv-conditional]</div></td>

Let me know
Pat