[Resolved] Modal Edit button on View loop editor

[Author]

Posts

[rexJ-2]

Tell us what you are trying to do?
My edit button works just fine with

    [toolset-edit-post-link content_template_slug="timerregistreringscontenttemplateedit"]
       <button  type="button" class="btn btn-info">Edit</button>
    [/toolset-edit-post-link]

but how can i put it in a modal window?

Have tested it with this code which pop up with first record and i can edit it and save but only the first record shows up for all records in the table:
Is it <p>[cred_form form='timeregistreringsedit']</p> where i shall use i template instead or php function?

  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>[types field="datostart"]</td>
      <td>[wpv-post-title]</td>
      <td>[types field="timer"] tim.</td>
       <td>[types field="medarbejder"]</td>
       <td>
       	<!-- Button trigger modal -->
		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#EditTimerModal">Ret timer</button>
          <!-- Modal -->
          <div class="modal fade" id="EditTimerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Ret Timer</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                   <p>[cred_form form='timeregistreringsedit']</p>      
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Luk</button>
                  <button type="button" class="btn btn-primary">Gem</button>
                </div>
              </div>
            </div>
          </div>
      </td>
    </tr>
  </tbody>

Still not so good as there are the toolset save button in the modal window.
Any suggestions to use Modal? Maybe som php snippet?
Is there any documentation that you are following?
https://toolset.com/forums/topic/using-shortcodes-in-buttonlinks/
Is there a similar example that we can see?
Its a standard bootstrap Modal from hidden link
What is the link to your site?
hidden link

[Beda]

I do not see the page as it is hidden in a login - which I do not have.

However, I assume you are in a View loop?

I suggest to add the Modals button to the View loop:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Note that you NEED to modify that HTML, so the unique referrers are --- unique.

So the above code becomes:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#[wpv-post-id]-modal">
  Launch demo modal
</button>

We changed data-target= from "#myModal" (not unique in a loop, as repeated) to "#[wpv-post-id]-modal", which will generate a new unique ID for each post in the loop.

Then, add the modal code as well to the loop:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Again, you NEED to change the particular unique values, so the code becomes:

<div class="modal fade" id="[wpv-post-id]-modal" tabindex="-1" role="dialog" aria-labelledby="[wpv-post-id]-modalLabel">
  <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="[wpv-post-id]-modalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        //Here place the Toolset Form to edit the CURRENT displayed post
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

That, will load for each post in the loop a new button, which if clicked, loads a Modal, which will have the proper form in it.

However, be careful with this.
Modals do not belong to the post as such, they can miss important data. Hence, for example Forms with AJAX Submit can provoke the "Success message" to be displayed in the modal after submit, and if you reopen that modal to re-use the form, the form would not be there anymore. You would then need to reload the entire page to see it again.
These are caveats of the Modals, and AJAX per se, not directly related to Toolset.

I hope that helps!

[rexJ-2]

1: Thanks very much. Its working. Moved Toolset form button down in modal footer so it look nice,
2: think i have to change other settings to Allow Media Insert button in Post Content Rich Text Editor.
3: You're right with Problem updating calculating fields, i use cred_save_data, correct we if i'm wrong, i'm newbie to Toolset

function registrer_data_action( $post_id, $form_data ) {
  
        //the ID of "your cred form"
  
        if ( $form_data['id'] == 2526) {  //form in the modal window                 
                $val = $_POST["inputGroupSelect02"];
                $my_args = array(
                    'ID'           => $post_id,
                    'post_title'   => $val,
                 );
                $one = get_post_meta($post_id,'wpcf-talet', true);
                $two = get_post_meta($post_id, 'wpcf-talto', true);
                //sum up
                $total_is = $one + $two;
                $current_user = wp_get_current_user();
               
                
                // update the meta_post, which calls save_post again
                update_post_meta($post_id, 'wpcf-sumafalletal', $total_is);
                update_post_meta($post_id, 'wpcf-medarbejder', $current_user->display_name);
                // update the post, which calls save_post
                wp_update_post( $my_args );
                
                //gmdate( 'Y-m-d H:i:s' )
                // update_post_meta($post_id, 'wpcf-datostart', gmdate( 'd-m-Y H:i:s' ));
        }
 }
add_action('cred_save_data', 'registrer_data_action',10,2);

Many Regards

[Christian Cox]

It looks like you want to use cred_save_data to save a calculated value in a custom field. That should work well. However, if the calculated value is displayed in the original post (behind the modal), it will not be displayed correctly until the page reloads. There is no JavaScript API to re-render the result in the View, so it's not possible to update a post that is already displayed somewhere on the page. A page reload or View update is required.

Let me know if I have misunderstood your question and I will take a closer look.

[rexJ-2]

Great tool, Great Help from Beda