Viewing 14 reply threads
  • Author
    Posts
    • #10697
      pozzerfield
      Participant

      It’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

    • #10698
      Steve
      Keymaster

      @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_form shortcode to render the form in your modal code. Here’s a tutorial to get you started: https://docs.piklist.com/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/

    • #10699
      pozzerfield
      Participant

      Thank 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

    • #10700
      Steve
      Keymaster

      What exactly are you trying to do?

    • #10701
      pozzerfield
      Participant

      I 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

    • #10702
      Steve
      Keymaster

      Somehow you’re going to have to grab the post ID from the link in your CPT list and pass it to the Piklist object_id parameter like this:

      piklist('field', array(
          'type' => 'text'
          ,'scope' => 'post'
          ,'field' => 'post_title'
          ,'label' => 'Post Title'
          ,'required' => true
          ,'object_id' => $post_id
        ));
    • #10703
      pozzerfield
      Participant

      Thank 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 ?

    • #10704
      Steve
      Keymaster

      Absolutely! 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_id is 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 field

      piklist('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?

    • #10705
      Steve
      Keymaster
    • #10706
      pozzerfield
      Participant
       $('.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!

    • #10707
      Steve
      Keymaster

      It 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>, and id is the ID of the post you want to edit.

    • #10709
      pozzerfield
      Participant

      Thank 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!

    • #10710
      Steve
      Keymaster

      When creating a new post set 'object_id' => null on all your fields

    • #10711
      pozzerfield
      Participant

      I try but nothing changes!

      I’m developing some javascript to intercept the action and reload the form…

      I will try…

      Thank you

    • #10723
      Steve
      Keymaster

      Did you ever figure this out?

Viewing 14 reply threads
  • The topic ‘form in modal’ is closed to new replies.