Tagged: form modal piklist_form
- This topic has 14 replies, 2 voices, and was last updated 1 year, 7 months ago by
Steve.
-
AuthorPosts
-
-
June 10, 2020 at 1:34 pm #10697
pozzerfieldParticipantIt’s possible to use form on a bootstrap modal ?
I try with jQuery .load() function but some browser block the connection (CORS problem even if all page are on the same server)
Please help me!
Thank you
-
June 10, 2020 at 2:05 pm #10698
SteveKeymaster@pozzerfield– Welcome to the Piklist Community!
You can easily embed a Piklist form in a modal. You would create the form as you normally would with Piklist, and then use the
piklist_formshortcode to render the form in your modal code. Here’s a tutorial to get you started: https://piklist.github.io/docs/tutorials/forms/understanding-front-end-forms/Remember, when using a shortcode in a PHP file you need to echo
do_shortcode. Here’s some more information: https://css-tricks.com/snippets/wordpress/shortcode-in-a-template/ -
June 10, 2020 at 2:12 pm #10699
pozzerfieldParticipantThank you for your superfast reply!!
I try this solution but the problem is when I try to open a form in modal to edit (passing the post_id value).
There are some tips about it ?
Thank you
-
June 10, 2020 at 2:20 pm #10700
SteveKeymasterWhat exactly are you trying to do?
-
June 10, 2020 at 2:33 pm #10701
pozzerfieldParticipantI try to edit custom post type from frontend.
example: a page with a list of custom post type records on frontend: when I click on one of it a modal opens with the form filled with the values into the correspondent input fields so I can edit and save the modified values.
Thank you so much
-
June 10, 2020 at 2:57 pm #10702
SteveKeymasterSomehow you’re going to have to grab the post ID from the link in your CPT list and pass it to the Piklist
object_idparameter like this:piklist('field', array( 'type' => 'text' ,'scope' => 'post' ,'field' => 'post_title' ,'label' => 'Post Title' ,'required' => true ,'object_id' => $post_id )); -
June 10, 2020 at 3:06 pm #10703
pozzerfieldParticipantThank you!
There’s a way to manage this dinamically ?
My goal is to have a single modal structure and populate dinamically. (with javascript ? perhaps ?)
It’s possible ?
-
June 10, 2020 at 3:13 pm #10704
SteveKeymasterAbsolutely! I’m not sure how you want to pass the data to your modal, but for example if you didn’t have a modal:
1. Create the links your user would click on like this, where the
post_idis the id of the post to edit:https://mydomain.com/edit/?id=5
2. In your Piklist form code you can add this before your field code:$post_id = isset($_GET['id']) ? $_GET['id'] : null;. This would grab the query parameter.
3. Then pass it to the Piklist fieldpiklist('field', array( 'type' => 'text' ,'scope' => 'post' ,'field' => 'post_title' ,'label' => 'Post Title' ,'required' => true ,'object_id' => $post_id ));Again, you will need to figure out how to do something similar with JS for the modal.
Does that make sense?
-
June 10, 2020 at 3:16 pm #10705
SteveKeymasterA few good ideas are listed here: https://www.codexworld.com/bootstrap-modal-dynamic-content-jquery-ajax-php-mysql/
-
June 10, 2020 at 3:23 pm #10706
pozzerfieldParticipant$('.modal-body').load('content.html',function(){ $('#myModal').modal({show:true}); });This is exactly what I did! But I found a problem on Firefox and Safari browser.
On Chrome all works fine but on other browsers I think there are some problems: the piklist form shortcode doesn’t show nothing!Very strange!
-
June 10, 2020 at 3:57 pm #10707
SteveKeymasterIt looks like you are trying to load content.html, which won’t work. Shortcodes need to be in PHP files.
You may want to try the “Dynamic Bootstrap Modal with External URL” solution here: https://www.codexworld.com/bootstrap-modal-dynamic-content-jquery-ajax-php-mysql/
With something like
<a href="javascript:void(0);" data-href="content.html?id=1" class="openPopup">About Us</a>, andidis the ID of the post you want to edit. -
June 12, 2020 at 11:11 am #10709
pozzerfieldParticipantThank you for your help.
I’m still having problems with form in modal.
Adding a new record (not edit) when I submit the form in modal the form work well and the modal close automatically (that’s fine)!The problem is that when I open a new modal to add another post I see the old form populated with the old data that I wrote with the end message that everything works fine!
I need to clear the data and messages and start with another NEW form, it’s possible?
Thank you again for your help!
-
June 12, 2020 at 11:15 am #10710
SteveKeymasterWhen creating a new post set
'object_id' => nullon all your fields -
June 12, 2020 at 11:49 am #10711
pozzerfieldParticipantI try but nothing changes!
I’m developing some javascript to intercept the action and reload the form…
I will try…
Thank you
-
July 9, 2020 at 11:42 am #10723
SteveKeymasterDid you ever figure this out?
-
-
AuthorPosts
- The topic ‘form in modal’ is closed to new replies.