[Resolved] Scroll to edited item in a View with Edit Post Form and redirect

[Author]

Posts

[Puntorosso]

I have a View showing a list of Woocommerce orders.
On every item of this list there's a button which link to a post form, that allows to edit some custom fields of the selected item.

- When the post form is submitted, how do I go back and scroll exactly to the item being edited on the list?
- Is it possible to add a "Cancel" link on the post form that has the same functionality, without having to submit the form?

Thanks

[Christian Cox]

- When the post form is submitted, how do I go back and scroll exactly to the item being edited on the list?
You can add an anchor tag to the View's loop, then use the Forms redirection API to redirect to that specific item in the list. This could only work in a View that does not use infinite scrolling, because the results must all be present on the page when the page loads in order to scroll to the correct location. If the View uses pagination, you'll also need to calculate the correct page number to jump to the correct set of results.

Anchor syntax using post ID as unique identifier:

<a name="result-[wpv-post-id]"></a>

If you add an anchor in the View loop, using the syntax shown above, you can redirect and scroll to that specific element by including the corresponding name in a URL hash like so:

<em><u>hidden link</u></em>

Example redirection API implementing this deep-linking syntax:

// Redirect and scroll to the edited post in View results
// Toolset support: https://toolset.com/forums/topic/scroll-to-last-used-item-in-a-view/
add_filter('cred_success_redirect', 'tssupp_deep_link_after_edit',10,3);
function tssupp_deep_link_after_edit($url, $post_id, $form_data)
{
    if ($form_data['id']==12345)
        return '<em><u>hidden link</u></em>' . $post_id;
   
    return $url;
}

You would replace 12345 with the numeric ID of the edit post Form, and replace hidden link; with the full path to the page containing the View. If there are multiple pages containing the same View, you'll need something more complex here to determine the proper redirection location. You may need to add a hidden generic field in the Form and include the redirect path in that generic field. You could use a URL parameter to pass that path from the View into the edit post Form, then access that generic field value in $form_data or $_POST.

- Is it possible to add a "Cancel" link on the post form that has the same functionality, without having to submit the form?
Yes, you could create a link back to the page containing the View and add a URL hash based on the current post ID. Assuming your edit post Form is in an unassigned Content Template and is displayed at a URL like https://yoursite.com/post-type-slug/post-slug/?content-template-id=6789, you could add something like this in a custom HTML block in the Form builder:

<a href="<em><u>hidden link</u></em> item='$current_page']">Cancel</a>

Again, if there are multiple pages containing this View and you want to return to the same location you came from, it becomes more complex because you'd need to pass the redirect path into the Form using a URL parameter. You can access URL parameters using the wpv-search-term shortcode: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-search-term

[Puntorosso]

Thank you very much Christian!
Your instructions really helped me a lot: very clear and excellent explained.
Thumbs-up :+1: