[Resolved] Trying to Edit Post Relationship Via Cred Field

[Author]

Posts

[Dave]

Tell us what you are trying to do?
Create an Edit function via a Cred form for a CPT that includes the ability to change the posts parent.

Is there any documentation that you are following?
https://toolset.com/documentation/post-relationships/how-to-build-front-end-forms-for-connecting-posts/editing-existing-connections-between-related-posts/
https://toolset.com/forums/topic/front-end-editing-of-post-relationships/
https://toolset.com/documentation/customizing-sites-using-php/post-relationships-api

Is there a similar example that we can see?
No idea

What is the link to your site?
Currently in a dev environment, access can be provided if necessary.

I've been trying to create what I thought was a simple edit feature for a child post type. The "create new" form allows you to pick the initial parent perfectly with this field:

<label for="%%FORM_ID%%_@parent-child.parent">[cred_i18n name='@parent-child.parent-label']Parents Children[/cred_i18n]</label>
  [cred_field field='@parent-child.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='false']

But when trying to use the same field in an editing capacity, it simply shows it' default text and doesn't load any options.

Now I'm guessing this is intended functionality for some reason, but the relationship forms you have don't really work for the flow we're going for with this project so I really need the field to be on the cred edit form for this post type.

I don't mind achieving this via php but I can't quite figure out from your documentation if toolset_connect_posts will handle updating a relationship or only creating them.

Even if it does, I can't find any details on the relationship field I've mentioned above to figure out how it's pulling in a list of potential parents.

So, what I need to achieve is to have a Select field, preset with the current child post's parent, and then if it is dropped down the ability to search through the potential parents for a replacement like you can with the field if you are creating a new child post. Basically, the exact functionality you get when creating the child post, except with the current parent preset.

Honestly, I don't get why this isn't the way this relationship field should behave in an edit form anyway, but can you please advise on how to achieve this.

Thanks.

[Jamal]

Hello and thank you for contacting Toolset support.

I assume that you are talking about a One-to-many relationship, right? If that's the case, I run a test on a clean installation and my edit form lets me change the parent post without issues.

You can log into my test site with the following URL hidden link
The create post form is used here hidden link
You will get redirected to the post's single page, where the edit form is displayed using the content template.

Please create a new post to test. The edit form lets you change the parent post and save it without any issues.

If you are talking about a many-to-many relationship, can you create a simple test in my test installation to demonstrate this issue?

If the issue is not reproducible on my test site, I would suspect a conflict caused by a 3rd party component(theme/plugin) on your website. Please check if it appears when:
- Only Toolset plugins are activated. It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty-Twenty. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at a time to track where the incompatibility is produced.

[Dave]

Hi Jamal,

My implementation looks pretty much identical to yours and I can see that it should be working as you describe, so apologies for the assumption earlier.

The only difference I can see is that I'm calling the edit form from the child archive content template, but loading it in a modal. Everything else is functional except the date editing field which is grey and will not load the date picker, so I wonder if these two are linked?

Here is the complete loop item code:

<td><a href=[wpv-post-url]>[types field="child-first-name"][/types]</a></td>
<td><a href=[wpv-post-url]>[types field="child-surname"][/types]</a></td>
<td>[types field="child-age"][/types]</td>
<td><a href=# data-toggle="modal" data-target="#viewParentInfoModal-[wpv-post-id]">[types field='parent-first-name' item='@parent-child.parent'][/types] [types field='parent-surname' item='@parent-child.parent'][/types]</a></td>
<td>
  <div class="button-row">
  	<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#editChildModal-[wpv-post-id]">Edit</button>
  	<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#changeParentModal-[wpv-post-id]">Parent</button>
  </div>
</td>

<!-- View Parent Info Modal -->
<div class="modal fade" id="viewParentInfoModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="viewParentInfoModal-[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="viewParentInfoModal-[wpv-post-id]">[types field="child-first-name"][/types] [types field="child-surname"][/types]'s Parent</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [wpv-view name="childs-parent"]
      </div>
    </div>
  </div>
</div>

<!-- Edit Child Modal -->
<div class="modal fade" id="editChildModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="editChildModal-[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="editChildModal-[wpv-post-id]">Edit Child</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [cred_form form="edit-child"]
      </div>
    </div>
  </div>
</div>

I'm getting no console errors by the way and I have almost no other plugins active and am using the Hello Elementor theme which is incredibly light-weight, but for testing's sake, I have deactivated all plugins except Types, Forms and Blocks, and switched to the Twenty Twenty-One, no change.

[Jamal]

Can I log into your website and check this closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

Can you provide more details, preferably URLs:
- Where can we see this on the front-end?
- URL of the view, the content template, the archive involved here?

[Dave]

It's definitely something to do with their place in the loop or the post id calls or something because if I access the forms via modal from the content template of the individual child, not the archive page, then both the date picker and relationship field work properly.

So now the question becomes why are they not reading the post data properly when the other fields are I wonder?

[Dave]

I don't know if you received this or not, but I send a message at 12:09 with all the information in it, but it's disappeared from my view of the thread.

So I'm sending it again to be sure.

When you're looking at the archive view it's the edit button on the right to trigger the modal.

Apologies if you've received this already, I don't know why it disappeared but I definitely sent this earlier!

[Dave]

Hi Jamal,

I'm having problems sending a hidden reply. I answered you at 12:09 and when I refreshed the page just now it was gone. I've tried sending it a few more times and it sends then doesn't seem to store it so I'm going to restart my machine and see if that helps.

[Dave]

Ok, turns out it was sending and saving! I was clearly having some weird caching issue.

Sorry for the pile of messages!!!

[Jamal]

It seems that the issue comes from the placement of the modals inside the loop. Because the loop is a table it expected to have only <td> tags inside of it, instead of the following:

<td>...</td>
<div> First modal </div>
<div>Second modal</div>

I moved the modals inside the <td> tags and they seem to work as expected. Check this screenshot hidden link
The loop's content template code is now:

<td><a href=[wpv-post-url]>[types field="child-first-name"][/types]</a></td>
<td><a href=[wpv-post-url]>[types field="child-surname"][/types]</a></td>
<td>[types field="child-age"][/types]</td>
<td><a href=# data-toggle="modal" data-target="#viewParentInfoModal-[wpv-post-id]">[types field='parent-first-name' item='@parent-child.parent'][/types] [types field='parent-surname' item='@parent-child.parent'][/types]</a>
<!-- View Parent Info Modal -->
<div class="modal fade" id="viewParentInfoModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="viewParentInfoModal-[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="viewParentInfoModal-[wpv-post-id]">[types field="child-first-name"][/types] [types field="child-surname"][/types]'s Parent</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [wpv-view name="childs-parent"]
      </div>
    </div>
  </div>
</div>
</td>
<td><button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#editChildModal-[wpv-post-id]">Edit</button>
<!-- Edit Child Modal -->
<div class="modal fade" id="editChildModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="editChildModal-[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="editChildModal-[wpv-post-id]">Edit Child</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [cred_form form="edit-child"]
      </div>
    </div>
  </div>
</div>
</td>

However, the relationship field does react to clicks, so, I can't change the parent post. And that is maybe caused by the modal. Or maybe you want it to not be edited. Can you try the same form inside the single post template, outside of a modal? Just to make sure it is not the modal that's causing it to not react to clicks.

[Dave]

Hi Jamal,

Apologies for the delayed response, but I couldn't get to this over the weekend.

I've tested it out and as you have demonstrated, the fields are populated at least if the modal is within the td cell. However, the parent relationship and the date picker are not responding to clicks, not just the relationship select field. I've looked at the rendered code and the relationship select field is showing no rendered options, so it's not seeing any other possibilities, although I'd still expect it to drop down and show just one option.

I've tried the form on the child single content template and it functions as expected. I've also put it in the modal on the single content template page as well and again it functions correctly. So this is clearly something to do with the table. I need the sorting features I've of a table so I really don't want to have to change the layout style, but I'm not seeing any other clues at the moment.

Can you help me dig deeper please?

[Dave]

Just to add some further information, I've also found the same issue when using the form to create this child post type when I'm calling it in a View from within the parent table (the idea being that if you create a child from the parent's row in the table then it auto-populates the parent in the relationship dropdown and locks it out from user input) but neither the relationship or date picker are working here either.

[Jamal]

Well, I find out a workaround for this. It consists of a custom Javascript code that is run just after rendering the view. The Javascript code will move the modals after the table. And it is run earlier before Bootstrap code can initialize the modal, and before Toolset code initialize the datepicker and the relationship select2 control. Check the attached screenshot.

(function($){
  var table = $('#wpv-view-layout-33');
  table.find('.modal').insertAfter(table);
})(jQuery)

Please check from your side and confirm if this fixes the issue.

[Dave]

That does fix the initial problem with the first archive, but I have tried applying the same logic to the second scenario I mentioned and I can't see how to make it work. I understand what you've done with it, but in the second scenario the add child form is in a modal that is triggered only if the view returns no results as it's in the [wpv-no-items-found] tags:

[wpv-no-items-found]
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#addChildModal-[wpv-post-id]">Add Child</button>
[/wpv-no-items-found]
[wpv-layout-end]

<!-- Add Child Modal -->
<div class="modal fade" id="addChildModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="addChildModal-[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="addChildModal-[wpv-post-id]">Add Child to [types field='parent-first-name'][/types] [types field='parent-surname'][/types]</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [cred_form form="new-child"]
      </div>
    </div>
  </div>
</div>

and the view is placed in the Parent's Archive and only presents either an edit button or add button if there is no response. But I don't know how to treat this the same way as it's an extra step away. I need this form to prefill the parent field with the corresponding parent from the id currently in the loop whilst implementing this fix so the date picker works too.

Does that make any sense?

[Jamal]

Sorry, I did not understand what do you mean. Can you share a URL or steps to follow so I can get "no results" and see the form?

[Dave]

Sure thing, I know it sounded complicated just typing it out!

If you go to the Parents archive you can see on the right there are controls. Edit and either Manage Children or Add Children (pic 1).

The Edit button is not important, but the Manage / Add Children button is actually generated by View ID:89, this contains the modal calls and the Cred form.

The actual steps involved are nothing complicated. Some of the parents deliberately do not have assigned children at present and as such, they will show Add Children instead of Manage Children.

If you click Manage Children, then the parent has children assigned and it will load the View in a modal showing all assigned children along with a New Child Button at the top (this also doesn't work due to this issue) (pic 2).

If you click Add Child, then the parent has no assigned children and it will load the New Child form straight away.

In both of these cases, the goal is that the form will load (and obviously work properly as per this issue) and then prefill the parent field with the current parent from the loop.

If you need more direction or direct URL's then please activate a private message and I'll sort that out for you.