[Resolved] Selecting Parent Posts Using Forms to Create Child Items Ajax Submit Is Weird

[Author]

Posts

[markL]

Hi There,

I have two custom post types: services and coordinators. There is a one to many relationship between services (one) and coordinators (many). On the layout for my services page, I have a a button that opens a modal in which I have a post form that allows the user to create a new coordinator.

On the same layout, I also have a view that lists existing coordinators linked to the service next to which there is a button that opens a modal that contains the edit coordinator form. When this form is set to ajax submit, there is a strange behaviour. When the edit post form is first displayed, the relationship field dropdown is set to --- not set --- and when it is clicked there is nothing to select. When the form submit button is clicked, the relationship field is populated with the parent, but but the form fields appear to then be duplicated in the form and it does not submit. It is only when the second submit button is clicked that the form submits.

The workaround seems to be not to use ajax submit and to hide the relationship field so it does not appear to be empty but I think the intention was that ajax submit should be available for this use. .

Would you please let me know if this is a bug? Or perhaps I am doing something wrong.

Thanks - Mark

[Luo Yang]

Hello,

How do you setup the "modal"?
Is there any JS error or PHP error when you submit the Toolset form?

In case it is a compatibility problem, I suggest you try these:

1) Deactivate other plugins and switch to wordpress default theme 2017

2) Display the Toolset form directly without the modal window, see our document:
https://toolset.com/documentation/post-relationships/selecting-parent-posts-using-forms-create-child-items/#creating-forms-when-a-parent-post-is-preselected
section "Creating forms when a parent post is preselected"

And test again.

[markL]

Thanks Luo,

I have disabled the non-toolset plugin I had active and switched to Twenty Seventeen. I also added the edit form to the page instead of displaying in a modal. Displaying the form on the page instead of in a modal seems to fix the select parent post issue. When the edit post form is displayed on the page, the select box populates with the correct parent post. When displayed in a modal there are no options to select. The workaround is to not include the parent post selector in the modal, however this is the preferred ux. The modal is included in the view as per bootstrap documentation:

	[wpv-layout-start]
	[wpv-items-found]
	<table class="table">
      <tbody>
      <!-- wpv-loop-start -->
		<wpv-loop>
          <tr>     
            <td>
              <a href="[wpv-post-url]">[wpv-post-title]</a>
              	<button type="button" class="btn btn-sm new-record-icon" aria-label="Edit Record" data-toggle="modal" data-target="#editcoord-[wpv-post-id]">
  					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
				</button> 
            </td>
          </tr>
			<!-- Edit Coordinator modal --> 
			<div class="modal fade" id="editcoord-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="editcoordLabel">
				<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" id="editcoordLabel">Edit Coordinator Record</h4>
						</div>
						<div class="modal-body">[cred_form form='coordinator-edit']</div>
					</div>
				</div>
			</div> 
		</wpv-loop>         
	<!-- wpv-loop-end -->
      </tbody>
	</table>
	[/wpv-items-found]
	[wpv-no-items-found]
	[wpml-string context="wpv-views"]No coordinators yet[/wpml-string]
	[/wpv-no-items-found]
	[wpv-layout-end]	  
      </div>
    </div>
  </div>
 </div>

Besides the modal issue, there also seems to be a problem with using ajax submit where there are multiple forms of the same type on the same page.

When the form is included on the page instead of in the modal, the first instance of the form worked as expected.

The subsequent instances of the form did not. On the first click of the submit button, nothing happens, on the second click, the action that occurs is the action from the submit button in first instance of the form on the page.

Thanks for your continued support.
Mark

[Luo Yang]

Yes, you are right, there is a known issue with "using ajax submit where there are multiple forms of the same type on the same page", see similar thread:
https://toolset.com/forums/topic/ajax-cred-form-submission-not-working/

It has been escalated, and our developers are working on it.

Currently, I suggest you setup a editing form link instead of display multiple forms in same page:
https://toolset.com/documentation/user-guides/displaying-cred-editing-forms/

[markL]

Thanks for pointing this out. I'll stop looking for now and wait for an update.

Cheers - Mark