I have this long list of parent records and in the list there are buttons to create child records. Now after creating the child record and returning to the parent list you have to scroll all the way back to the position you were in.
Maybe opening the child post form to a modal window and saving (+ close) the modal would resolve this usability issue. But there isn't - at least not built in or easy - way to do this. Do you know any other way how to achieve this feature?
Hello,
I assume we are talking about this case:
1) A WordPress page, displaying a post view,
2) In above post view, there is a creating child post form link
After user submit the child post form, you are going to redirect the users back to above page of 1).
Yes, it is possible, for example,
1) If you are using Bootstrap in your website, you can try with Bootstrap Modal:
hidden link
2) In child post form, you can also setup the default value of parent field select as current parent post ID: [wpv-post-id], for example:
[cred_field ... value="[wpv-post-id]"]
More help:
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-post-id
https://toolset.com/documentation/user-guides/front-end-forms/cred-shortcodes/#cred_field
value. Optional. Preset value
Thank you Luo. I use Astra theme and I got the modal working so that Toolset loads the bootstrap (3 or 4, using 4 now). But the modal doesn't work properly. It is not clickable, it is behind the gray overlay and it is not scrollable. The form is there - though I can't see the rest of it because it doesn't scroll. Would you know what could be wrong there?
Please provide a test site witht the same problem, also point out the problem page URL and view URL, I need to test and debug it in a live website, thanks
I have done below modifications in your website:
1) Edit the post view "Kaikki asukaskortit"
hidden link
2) in section "Loop Editor", remove the modal codes you added before.
Copy the codes from the document I mentioned above:
hidden link
section "Scrolling long content",
- add shortcode [wpv-post-id] in each HTML ID attribute
- Put the form shortcode insider modal body
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong-[wpv-post-id]">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle-[wpv-post-id]" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle-[wpv-post-id]">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
[cred_form form="uusi-kirjaus"]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
3) Add below CSS codes in CSS editor:
.modal-dialog{
z-index: 999;
}
.modal-backdrop{
z-index: 1;
}
Please test again, check if it is fixed, and it is only a demo, you will need to customize it according to your needs.
Thank you! Now I don't know how to set up the save button. I want to save and close the modal window and stay in that page in same position where I was. The modal's save button doesn't obviously do anything. What should I add into it to get it saving the child post?
If modal save doesn't work and we keep the form's own save button, we have these options in "After visitors submit this form":
- "Keep displaying this form" doesn't work, it closes the modal and redirects user to same page start (excactly what we want to avoid with this modal)
- "Display a message...", same thing here. (And further more, the message is displayed in the beginning of the form already before saving.)
- "Display the post", "Go to a specific post" and "Go to a page" obviously don't work the way we want.
As I mentioned above, it is only a demo for your reference.
1) What should I add into it to get it saving the child post?
You will need to use the submit botton from Toolset Forms.
The button "Save changes" is copied from Bootstrap document, you can remove it.
2) If modal save doesn't work and we keep the form's own save button
Please edit the post form "uusi-kirjaus":-
- enable option"Submit this form without reloading the page (use AJAX)"
- option "After visitors submit this form", choose "Display a message instead of the form..."
And test again.
Thanks Luo. Now it looks ok, but it doesn't save the form. The traditional way saves.
How and where I can see the problem you mentioned above: but it doesn't save the form?
Please provide detail steps to duplicate the same problem, I have tried it in your website withe below steps:
1) Edit the post form "Uusi kirjaus"
hidden link
- enable option"Submit this form without reloading the page (use AJAX)"
- option "After visitors submit this form", choose "Display a message instead of the form..."
See the answer above:
https://toolset.com/forums/topic/after-creating-a-child-post-return-to-same-position-in-the-parent-list/#post-1506717
2) Edit the relationship field from:
[cred_field field='@asukaskortti-kirjaus.parent' class='form-control' output='bootstrap' select_text='--- not set ---']
To:
[cred_field field='@asukaskortti-kirjaus.parent' class='form-control' output='bootstrap' select_text='--- not set ---' value="[wpv-post-id]"]
See answer above:
https://toolset.com/forums/topic/after-creating-a-child-post-return-to-same-position-in-the-parent-list/#post-1501453
I can see new post is created with the relationship settings, please check if it is what you want. thanks
Thank you Luo so much! My issue is resolved now. Thank you!
