[Resolved] CRED Child post form in Bootstrap Modal

[Author]

Posts

[tinaH]

Have a View listing ALL post-type "organizers" in a table.
On each row I have button "create child post" link (post-type "note")

I want the CRED form to load in a bootstrap modal instead of a new page.

I know how to place the CRED "create new post" form in the modal
BUT
I don't know how to pass the parent "organizer" ID, from the clicked post in the table row, to the form in the modal.

Found this post but none of the examples exists anymore.
https://toolset.com/forums/topic/child-post-froms-addedit-in-bootstrap-modals/

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Tina

I got this working on a test site using the markup from the Bootstrap examples (hidden link) and my steps were as follows:

On my View which lists the parent posts I add the button that triggers the modal in the loop output section. I add an attribute to the button, data-id, which is the post id of the parent post (which is the current post in the loop in this view).

Here is the relevant part of the loop output:

	<!-- wpv-loop-start -->
		<wpv-loop>
			<h3>My parent post: [wpv-post-link]</h3>
			<button type="button" class="btn btn-primary btn-lg trigger-modal" data-toggle="modal" data-target="#myModal" data-id="[wpv-post-id]">
				Create child for this post
			</button>
		</wpv-loop>
	<!-- wpv-loop-end -->

Note that I added a class "trigger-modal" to the button which I will use later to target these buttons.

Now I add this view to a page, where I also add the markup for the modal with the CRED shortcode for the CRED form that creates a child post.

The page content looks like this:

<h2>Parent posts</h2>
[wpv-view name="list-parents-with-links-to-create-children"]

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">

        [cred_form form='191' form_name='Alt Publish Child']

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Nothing special there, obviously the names of your view and form will be different.

So, when you visit this page the view that lists the parent posts together with the buttons to launch the modal is shown, and the markup for the CRED form in the modal is added below (although it is hidden until the modal is actually triggered).

We are missing the part that tells the CRED form which parent the child belongs to.

The parent posts are added to the form as a select dropdown, and we need the correct parent to be pre-selected when the modal is rendered.

So, go back to the View above which generates the button and add the following custom JS.

( function( $ ) {
	$( document ).ready( function(){
		
		$('button.trigger-modal').on( 'click', function( event ){
          
			var postid = event.target.attributes['data-id'].value;
                    
			$('select[name*="_wpcf_belongs_parent-post_id"]').val(postid);
		});
	});
})( jQuery );

When you click a button to create a child post it should trigger the modal and pre-select the correct parent.

[tinaH]

Works great!

A few additional questions:
Can I set the form to reload the page I'm on?
I tried below script but it reloads after form is submitted - thus displaying the form message if I try to use the button to create another child post, instead of a new child-post form.

$("#newChildModal:input").submit(function () {
          window.location.reload();
        });

Displaying the post parent title in plain text don't get updated inside the child post form. It says Belongs to: "Previous Page" Can I pass parameter to this too?

[cred_post_parent get='title']

Is it possible to pass values of grand-parents too?
Meaning, can I also pass the selected post Parent to the same form?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Tina

For the first question, reloading the page after the form has submitted, I don't think you need anything clever here. Just edit your form and change the settings such that after visitors submit the form you go to a page, and choose the page where your form is added. I added a 1 second delay, tested it, and it worked as expected.

For the second question, I did some testing to confirm, and the cred_post_parent shortcode only works when you use the cred_child_link_form shortcode to generate a Child Post from a parent.

When you use that shortcode it adds a url parameter ('parent_parent-post_id') which the cred_post_parent shortcode uses to determine which is the parent id.

In your set up you are using the same form to create child posts from any one of your parent posts and the JS snippet to later set the parent in the form. But at the time the form markup is added to the page we don't know the parent and so can't display any information from it in the form.

A workaround would be to also add a data attribute for the parent post title to the button which launches the modal, much like I did with the post id, and then use jQuery to update some placeholder div on the form with it.

[tinaH]

All your answers makes sense.

Feel a bit thick headed not figured out myself that I of course could pass more data with data="what-ever-field-I-want" 😉

Thank You so much!