[Resolved] Need to open CRED form in a modal outside the View loop, passing post ID dynamic

[Author]

Posts

[Timothy]

I have a Toolset View that lists custom posts (loan cases) in a table.
Each row has buttons like "Edit" and "Reassign," which currently open Bootstrap modals that contain [cred_form] shortcodes for editing the same post.

This works fine initially, but after I use the View's AJAX filters or pagination, the forms inside the loop stop working, the Save button no longer submits, and any Toolset JS attached to the forms appears to be unbound.

I’d like to move these modals outside the View loop (so they aren’t re-rendered on every AJAX refresh) and simply pass the correct post ID into the form when a user clicks “Edit” or “Reassign.”

My question:
What's the recommended way in Toolset to open a single [cred_form] placed outside the View loop and dynamically load the post specified by the clicked row’s ID?

Ideally I'd trigger it with a data attribute or JavaScript variable (e.g. data-post-id="[wpv-post-id]") and have the CRED form render for that post inside the modal.

If Toolset doesn’t allow that directly, is there an API or JavaScript function to reinitialize or reload a CRED form for a new post ID without reloading the page?

The goal is simply:

one persistent modal per form type,

dynamic post ID loading,

full CRED Save functionality preserved, even after View filters or pagination.

Any official guidance, example snippet, or internal event we can hook into to achieve this would be appreciated.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Outside the view's loop there is no way to get the post ID bevause everything (all data) related to current loop item will be accessible within the view's loop.

We have few known issues when you have multiple forms on the same page but I will require to check your current setup and let me reivew if I can offer you any workaround.

Can you please share problem URL and admin access details as well as please share the exact steps that I should follow that should help me to see the issue.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I checked and there is no easy way to re-initialize the form when you filter the view result using ajax.

You will have to use non-ajax filter to filter your view result or you can drop the idea of using bootstrap modal where you added to form and instead add a edit page link and when user click on the edit link user will be redirected on the edit page where user and edit the information using edit form.

[Timothy]

Thanks. I ended up finding a way but it's a bit complicated, but if it helps someone else my solution if below.

The only other issue I have is that the Save spinner causes a weird flash of the bottom of the form. Is there anyway to turn off the spiiner or just hide it? I tried hiding .cred-loading-indicator, .wpt-cred-spinner, and related classes with CSS, but the flicker still happens. Is there a reliable way to disable or remove the spinner animation entirely, or at least prevent it from forcing a redraw inside the modal?

The way to move the modal outside the View loop and then use AJAX to dynamically load the correct form for the clicked post.
Here’s thmye working setup:

1. Add a trigger button inside the View loop:
[code]
<button type="button" class="btn btn-sm btn-primary btn-trigger-reassign" data-id="[wpv-post-id]" data-toggle="modal" data-target="#reassignModal">
Reassign
</button>
[/code]

2. Placed a single modal outside the View loop:
[code]
<div class="modal fade" id="reassignModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Change Owner</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body" id="reassign-content-placeholder"> <p class="small text-muted">Loading…</p> </div> </div> </div> </div>
[/code]

3. JS to load the form dynamically (added in the html block that has the modal code):
[code]
jQuery(function($){

// delegated click so it still works after filtering
$(document).on('click', '.btn-trigger-reassign', function(){
const postId = $(this).data('id');
$('#reassign-content-placeholder').html('<p class="small text-muted">Loading…</p>');

$.ajax({
url: window.ajaxurl,
type: 'POST',
data: {
action: 'load_reassign_modal_form',
post_id: postId
},
success: function(resp){
$('#reassign-content-placeholder').html(resp);
},
error: function(){
$('#reassign-content-placeholder').html('<p class="text-danger">Error loading form.</p>');
}
});
});

});
[/code]

4. PHP callback in functions.php:
[code]
add_action('wp_ajax_load_reassign_modal_form', 'load_reassign_modal_form_callback');
add_action('wp_ajax_nopriv_load_reassign_modal_form', 'load_reassign_modal_form_callback');

function load_reassign_modal_form_callback() {
if (empty($_POST['post_id'])) wp_die('No post ID');
$post_id = intval($_POST['post_id']);

// temporarily set the global $post so Toolset can "see" it
$GLOBALS['post'] = get_post($post_id);
setup_postdata($GLOBALS['post']);

echo do_shortcode('[cred_form form="change-client-case-owner" post="' . $post_id . '"]');

wp_reset_postdata();
wp_die();
}
[/code]

[Minesh]

I see you must have take this code from chatGTP and I can still see its not working after you filter the view result using ajax:
- hidden link

I tried to click on the "Reassign" action button but after ajax filter it does nothing. I certainly think that you should drop the idea of using popup as sooner or later it will cause issues and go for the solution I shared.
- Either referesh view resuing with non-ajax
- open edit link in different page

[Timothy]

Actually it does work now. I just had to add the form at the bottom of the loop editor like:
<!-- single hidden Toolset form (just to load its scripts once) -->
<div style="display:none; visibility:hidden; height:0; overflow:hidden;">
[cred_form form="change-client-case-owner" post="50111"]
</div>

And the popup works to load the form for each row loop item. I know I could have it link to a new page but this makes things so much faster. And if I had the form load in each cell it would create a real slow down when the table grows to 100+ items as I will have a 2nd form load in this way as well.

To me this seems like the clear best option and I wish toolset had a way to do this natively.

And I definitely used chatgpt to help me 😉 Does the code look like it might have problems in the future?

thanks,

tim

[Minesh]

I still see after ajax refresh on the edit form on the modal popup it does not show tha avatars correctly.

You can check that and if it works, you are welcome to use it but there is no guarentee that it will work for ever without any issue as plugins/themes/WordPres number of release in a year and we can not prefict with what plugin/theme/WordPress it may have compatibility issue or stop working.