[Resolved] Second Cred Form / View in Bootstrap Modals Not Loading

[Author]

Posts

[Dave]

Tell us what you are trying to do?
Make a modified version of your Messenger Module for storing messages on the site. When the user opens a message, it loads the View in a modal, and there is a reply button at the bottom which should then load the reply form in another modal.

I'm aware that Bootstrap doesn't like multiple modals open at once, so I've been trying to close the current one and open the reply modal, but every approach I've taken isn't working.

Initially I assumed that having data-dismiss="modal" attached to the button along with data-target="replyModal" would work, but this closes the message modal and then loads the overlay for the reply modal, but not the actual modal itself. I was able to get it to work with the first message in the list by not using the data-dismiss attribute, but this ONLY works for the first message in the loop and all subsequent ones keep the message modal open and act as though the reply modal is underneath, although I think they're just doing exactly what it does in other situations and failing to load it entirely.

I have also tried jQuery to get this working, such as:

jQuery( document ).on( "click", "#replyButton", function() {

var button = jQuery(this);

button.closest(".modal").modal('hide');

jQuery(".modal").on("hidden.bs.modal",function(){
    jQuery("#replyModal").modal('show');

    });
});

And a few other variations, but they either don't work or give the same results as the data-dismiss method where it's loading the reply modal overlay and nothing else.

Is there a similar example that we can see?
This CodePen shows the kind of result I'd expect to see: hidden link

What is the link to your site?
Links to specific pages and templates can be provided in PM.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

On my test website with Bootstrap 4, I was able to make this work without any extra script, simply by including the dismiss="modal" attribute with the new modal trigger button:

<!-- Button trigger modal 1 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1"> Launch demo modal 1</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModal1Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal1Label">Modal 1 title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal 1 content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2" data-dismiss="modal">Launch demo modal 2</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



<!-- Button trigger modal 2 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">Launch demo modal 2</button>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal2Label">Modal 2 title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal 2 content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1" data-dismiss="modal">Launch demo modal 1</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Here is a link to an example page:
hidden link

On your website, please see if any CSS code is interfering with the newly opened modal window, because if the overlay is showing then it means that the modal triggering is working.

regards,
Waqar

[Dave]

Hi,

Toolset is loading Bootstrap 4 on this site as well, as I fully expected this to work, but it isn't so I've had to ask for some help.

In your example, the buttons that trigger the modals are not part of the loop in any way, they are simply on a static page, but I think the loop is where the problem is coming from as the first message in the loop will trigger the reply modal from the message modal, but subsequent ones will not. This difference in behaviour is what is pointing me to the loop being involved.

To be clear, the button that triggers the first modal is part of the content template for showing a single entry of a CPT created through Toolset, inside a loop of a View that displays another related CPT of messages. The second button is inside the first modal, so within the message item, in a modal, as it requires data from that message to work with the idea of replying.

There is no conflicting CSS that I can identify, but more to the point I have written none as everything is still in an early stage of development, so complex layouts have not been looked at yet. What is being used is essentially the stock Toolset & Bootstrap layouts.

Even if I delete the modal element of the message after triggering the reply, it is not underneath regardless of what it he overlay is doing. Something is not loading correctly, but I can't figure out what. Hence I need some help pinning it down.

The site is only running Toolset plugins and the Font Awesome plugin, which I've checked, is not having an effect. Also, switching back to Twenty Twenty-One makes no difference either.

[Waqar]

Thanks for writing back.

To troubleshoot this, I'll need to see how these modals are set up in the admin area.

Can you please share temporary admin login details, along with the link to an example page with the modals?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

[Waqar]

Thank you for sharing these details.

If you'll check the example code for the Bootstrap 4 modal, you'll note that separate IDs are used for the modal container and the enclosed title/heading element:
hidden link
( screenshot: hidden link )

But, in your website's view "Parents Messages" and content template "Read Message", the same IDs were being used for the modal's container as well as the heading tag. I've fixed that, by appending "label" to the IDs of the heading tags.
( screenshot: hidden link )

The same change has been made in the content template "Read Message" too.

Similarly, the modal for reply form that is in the content template "Read Message" will also repeat for each result from the view "Parents Messages". For this reason, you'll also need to make the IDs used in that modal unique, by adding the current post's ID.
( screenshot: hidden link )

As for the issue, of why the reply modal window is not showing when data-dismiss="modal" is added to the reply button, it is because the reply modal is also nested within the content of the parent message modal from the view.

You can fix this, by moving the content for the reply modal from the HTML block in the content template "Read Message" ( screenshot: hidden link ), into the view "Parents Messages", but, outside the single message's modal.
( screenshot: hidden link )

I understand, you're using the content template "Read Message" for the single "Communications" post pages too, where you'll need that reply modal content, as it is. To overcome this, you can create a duplicate of this content template and load that duplicate in the view "Parents Messages". Then you can edit the duplicated content template to remove the reply modal content.

I hope this helps and let me know if any point is not clear.

[Dave]

Thanks for the detailed response.

The duplication of ID's was simply a copy and paste oversight as I'd been messing around with this problem, but thank you for pointing it out, I'll make sure to check it in future. However, it does not seem to have caused any harm weirdly enough.

I've moved the modal code to the "Parents Messages" View as you suggest, and it does indeed load now without issue. But this has now presented a different problem. The when the reply form loads it always loads the data from the top item in the loop. For example, it is supposed to load the current message's title and add "RE:" to the start of it via this shortcode:

[cred_field field='post_title' post='message' value='Re: [wpv-post-title]' urlparam='' class='form-control' output='bootstrap']

But no matter which message is loaded in to the "Read Messages" modal, it always pulls the title of the top message, in this case "Title Test".

However, this may have something to do with your last point, which I'm not totally clear on. I've been rereading it over and over and I can't quite figure out what you're trying to say here:

"I understand, you're using the content template "Read Message" for the single "Communications" post pages too, where you'll need that reply modal content, as it is. To overcome this, you can create a duplicate of this content template and load that duplicate in the view "Parents Messages". Then you can edit the duplicated content template to remove the reply modal content."

I get you're saying I need to duplicate the "Read Messages" content template, and in the duplicate remove the reply functionality. I just don't follow why or what it will achieve when this is basically working as is, just not reading the correct loop position. Apologies if I'm missing the obvious there.

[Waqar]

Thanks for writing back.

The reply modal always is linked to the first message in the view because, the code for the modal in the reply was not unique, as I showed in my screenshot: hidden link

I've made that reply modal's button and the modal content unique again, by including the current post's ID and it is fixed.
Screenshot from view: hidden link
Screenshot from content template: hidden link

Let me explain my last point in a different way.

Right now, there is a code for the reply button but no content for the reply modal window in the content template "Read Message".
( screenshot: hidden link )

This fixes our nesting issue for the modals on the view page ( {yourwebsite.com}/parent/testing-test/ ), but, if you'll visit any single "Communication" post page ( like {yourwebsite.com}/communication/title-test/ ), you'll see that the reply button doesn't trigger any reply modal window.

This is because, the single "Communication" post pages also use the content template "Read Message" and we have removed the reply modal's content from it.

To avoid this issue, I shared my recommendations in the last point. To fix this, you can follow these exact steps now:

1. Create a duplicate of your content template "Read Message" and name the new copy something like "Read Message for views".

2. Copy (but not cut) the code for the reply modal window from the view "Parents Messages" ( screenshot: hidden link ) and paste it in the original content template "Read Message" ( screenshot: hidden link ).

3. The outcome would be that the code for the reply modal window will be available in the original content template "Read Message" and in the view "Parents Messages", but not in the newly duplicated content template "Read Message for views".

4. The last step would be to change the content template's name in the shortcode "wpv-post-body", so that instead of loading the original "Read Message" content template, it loads the newly duplicated "Read Message for views" content template.
( screenshot: hidden link )

I hope this makes it more clear and let me know if you have any follow up question.

[Dave]

Oh how could I have missed that!!!

Sorry, I got so wrapped up in other aspects of this I totally forgot to put the post id in!

So yes that absolutely fixed it, thank you. As for the second point about the reply button not being needed on the single page, you're quite right and I was aware of that, I just hadn't got that far with it yet as I was hung up on this nesting problem. That will be the next thing I tackle actually, but thank you for clarifying and all your help!