[Résolu] Using Bootstrap Modals is Seemingly Causing Views to Crash or Fail to Load

[Auteur]

Publications

[Dave]

I am trying to:

Utilise Modals to control the use flow so that when they click on a buy link, a modal appears, delivers a warning then links to the correct (external) purchasing page and then the displayed modal changes to allow the use to input the amount of the item they have purchased.

Link to a page where the issue can be seen:

Login is required

I expected to see:

Modals correctly loading

Instead, I got:

The view / layout appears to crash as the page halts loading and no html or error messages are generated. You can clearly see from the scroll bar and the start of the Windows task bar at the bottom of the image that this is as far down as it is rendered.

I have been trying to solve this for a week now and I am beyond fed up as there seems to be no logical reason that it happens.

I have tested every component of this process independently and they all function perfectly, yet when they are assembled this is the result.

This is a continuation of the project being worked on in this thread:
https://toolset.com/forums/topic/unable-to-get-custom-javascript-validation-to-work-with-cred-form/

I am getting the impression that using modals in Views is for some reason upsetting Toolset. Originally I had a pair of modals setup so that the user can click through and when they return a new modal has loaded to take the value they purchased:

//View Section
[wpv-layout-start]
[wpv-conditional if="( '[wpv-search-term param='fw-gift-list']' ne '' )"]
[wpv-items-found]
<div class="row centre v-centre">
  <div class="col-sm-2dot4"><h4>Image</h4></div>
  <div class="col-sm-2dot4"><h4>Title</h4></div>
  <div class="col-sm-2dot4"><h4>Price</h4></div>
  <div class="col-sm-2dot4"><h4>Qty Available</h4></div>
  <div class="col-sm-2dot4"><h4>Purchase</h4></div>
</div>
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
  [wpv-item index=1]
    <div class="col-sm-12">[wpv-post-body view_template="loop-item-in-current-gift-list-gifts"]</div>

    [wpv-item index=other]
    <div class="col-sm-12">[wpv-post-body view_template="loop-item-in-current-gift-list-gifts"]</div>
    [wpv-item index=pad]
    <div class="col-sm-12"></div>
    [wpv-item index=pad-last]
  <div class="col-sm-12"></div>
  
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
<button type="button" class="btn btn-default btn-lg right gift-add-button v-centre" href="#" data-toggle="modal" data-target="#modalAddGift" aria-label="Plus Sign">
  <span class="add-gift-text">Add New Gift</span><span class="glyphicon glyphicon-plus-sign gift-add" aria-hidden="true"></span>
</button>
[wpv-no-items-found]
<strong><center>[wpml-string context="wpv-views"]No Gifts found[/wpml-string]</center></strong>
[/wpv-no-items-found]
[/wpv-conditional]
[wpv-conditional if="( '[wpv-search-term param='fw-gift-list']' eq '' )"]
<strong><center>[wpml-string context="wpv-views"]Please select a  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">Gift List</a>[/wpml-string]</center></strong>
[/wpv-conditional]
[wpv-layout-end]


<div class="modal fade" id="modalAddGift" 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">×</span></button>
        <h4 class="modal-title centre" id="myModalLabel">Add a New Gift to Your <strong>[wpv-post-title item="[wpv-search-term param='fw-gift-list']"]</strong> Gift List</h4>
      </div>
      <div class="modal-body">
        [cred_form form='add-new-gift']
      </div>
    </div>
  </div>
</div>

//Layout Section
<div class="row centre v-centre">
	<div class="col-sm-2dot4">[types field='gift-image' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='80' height='80' resize='proportional' separator=', '][/types]</div>
	<div class="col-sm-2dot4"><a href="#" data-toggle="modal" data-target="#gift_info" rel="noopener noreferrer">[types field='gift-title'][/types]</a></div>
	<div class="col-sm-2dot4">[types field='gift-price' format='£FIELD_VALUE'][/types]</div>
	<div class="col-sm-2dot4">[remaining_gifts] / [types field='gift-quantity' format='FIELD_VALUE'][/types]</div>
  	<div class="col-sm-2dot4">
     [wpv-conditional if="gift_deductions() gt '0'"]
      	<a id="buy_continue" class="btn btn-default" href="#" role="button" data-toggle="modal" data-target="#modal_warning" rel="noopener noreferrer">
          Buy it!
      	</a>
     [/wpv-conditional]
     [wpv-conditional if="gift_deductions() lte '0'"]
      <div class="btn btn-default" role="button" disabled="true">All Gone</div>
     [/wpv-conditional]
      <a id="question_frame" style="display: none;" role="button" data-toggle="modal" data-target="#myModal" rel="noopener noreferrer"></a>
      <a id="buy_url" style="display: none;" href="[types field='gift-url' output='raw'][/types]" target="_blank" rel="noopener noreferrer"></a>
  </div>
</div>

<div class="modal fade" id="modal_warning" 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">×</span></button>
        <h3 class="modal-title centre" id="myModalLabel">Information!</h3>
      </div>
      <div class="modal-body">
        <p class="centre">You will now see the suppliers website open in a new tab.</p>
        <p class="centre">Please ensure you come back here and let us know how many you purchased.</p>
      </div>
      <div class="modal-footer">
        <a id="buy_button" class="btn btn-default" href="[types field='gift-url' output='raw'][/types]" target="_blank" rel="noopener noreferrer">Continue</a>
      </div>
    </div>
  </div>

<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">×</span></button>
        <h4 class="modal-title centre" id="myModalLabel">How Many [types field='gift-title'][/types]'s Did You Purchase?</h4>
      </div>
      <div class="modal-body">
	  	[cred_form form='number-of-gifts-purchased']        
      	<button type="button" class="btn btn-default left" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

This was working perfectly, so I expanded it by added another modal in to display the information of the product:

<div id="gift_info" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gift_info">
  <div class="modal-dialog modal-lg" 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">×</span></button>
        <h4 class="modal-title centre" id="myModalLabel">[types field='gift-title'][/types]</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-4 centre">
            [wpv-conditional if="( $(wpcf-gift-image) eq '' )"]
              <div><img src="<em><u>hidden link</u></em>" alt="Generic Gift Placeholder Image" size='medium' resize='proportional' class="alignnone size-medium wp-image-136" />
            [/wpv-conditional]
            [wpv-conditional if="( $(wpcf-gift-image) ne '' )"]
              <div>[types field='gift-image' title='%%TITLE%%' alt='%%ALT%%' size='medium' resize='proportional' separator=', '][/types]</div>
            [/wpv-conditional]
            <div>Current Availability</div>
            <div>[remaining_gifts] / [types field='gift-quantity' format='FIELD_VALUE'][/types]</div>
          </div>
          <div class="col-sm-8">
            <div class="gift_subheading">Gift Description:</div>
            <div>[types field='gift-description'][/types]</div>
          </div>
        </div>
        [wpv-conditional if="( $(gift-notes) ne '' )"]
        <br />
        <div class="row">
          <div class="col-sm-12">
            <div class="gift_subheading">Extra Notes:</div>
            <div>[types field='gift-notes'][/types]</div>
          </div>
        </div>
        [/wpv-conditional]
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default left" data-dismiss="modal">Close</button>
        [wpv-conditional if="gift_deductions() gt '0'"]
          <a id="buy_continue" class="btn btn-default" href="#" role="button" data-toggle="modal" data-target="#modal_warning" rel="noopener noreferrer">
            Buy it!
      	  </a>
        [/wpv-conditional]
     	[wpv-conditional if="gift_deductions() lte '0'"]
      	  <div class="btn btn-default" role="button" disabled="true">All Gone</div>
     	[/wpv-conditional]
      </div>
    </div>
  </div>
</div>

All of this works perfectly and I added a create link into the View as well and once again it worked. But when I went back to the beginning of the process to test everything I found the loading error.

I have pulled it apart piece by piece and initially came to to conclusion that it was to do with the edit form as removing the last modal section from the layout code caused the error to go. So removing this:

<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">×</span></button>
        <h4 class="modal-title centre" id="myModalLabel">How Many [types field='gift-title'][/types]'s Did You Purchase?</h4>
      </div>
      <div class="modal-body">
	  	[cred_form form='number-of-gifts-purchased']        
      	<button type="button" class="btn btn-default left" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

Which relates to this cred form:

[credform]
<div id="amount_error" class="wpt-form-error alert alert-danger centre" style="display: none"></div>
<div class="row number_layout v-centre">
  <div class="col-sm-6">Today I have bought:</div>
  <div class="col-sm-6">
    [cred_generic_field type='numeric' field='amount-purchased']
    {
    "required":0,
    "validate_format":0,
    "default":"1"
    }
    [/cred_generic_field]
  </div>
  <span style="display: none;">
    [cred_field field="gift-quantity" force_type="field" class="form-control" output="bootstrap" value="[types field='gift-quantity' output='raw'][/types]"]
  </span>
  <span style="display: none;">
    [cred_field field="quantity-claimed" force_type="field" class="form-control" output="bootstrap" value="[types field='quantity-claimed' output='raw'][/types]"]
  </span>
</div>
<br />
<p class="centre">
  <strong>Warning:</strong> Please be accurate as incorrect purchasing information can result in the happy couple or other people missing out!
</p>
</div>
<div class="modal-footer">
  [cred_field field='form_submit' value='Submit' class='btn ' output='bootstrap']
  [/credform]

But the form was working before hand, absolutely fine, and if I access it directly it works.

Things have gotten even weirder as I have tried to bypass the cred edit form altogether by writing my own mini form manually like so:

<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">×</span></button>
        <h3 class="modal-title centre" id="titleBefore">Information!</h3>
        <h3 class="modal-title centre" id="titleAfter">Today I have bought:</h3>
      </div>
      <div class="modal-body">
        <span id="bodyBefore">
          <p class="centre">You will now see the suppliers website open in a new tab.</p>
          <p class="centre">Please ensure you come back here and let us know how many you purchased.</p>
        </span>
        <div id="bodyAfter">
          <div class="centre">
          	<input type="number" id="giftsBought"><label>[types field='gift-title'][/types]'s</label>
          </div>
          <p class="centre">
            <strong>Warning:</strong> Please be accurate as incorrect purchasing information can result in the happy couple or other people missing out!
          </p>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a id="buy_button" class="btn btn-default" href="[types field='gift-url' output='raw'][/types]" target="_blank" rel="noopener noreferrer">
        Continue
      </a>
    </div>
  </div>
</div>


//jQuery
jQuery('#buy_button').on('click', function(){
	jQuery('#question_frame').trigger('click');
});

jQuery(document).ready(function(){
  	jQuery('#titleAfter, #bodyAfter, #buttonAfter').hide();
    jQuery('#buy_button').click(function() {
      jQuery('#titleBefore, #titleAfter, #bodyBefore, #bodyAfter, #buttonBefore, #buttonAfter').toggle("fade");
    });
});

This much displays, although is currently non-functional as there is no code tied to it to make it do anything. However, if I add ANYTHING to the modal footer here such as another button:

...
<div class="modal-footer">
      <a id="buy_button" class="btn btn-default" href="[types field='gift-url' output='raw'][/types]" target="_blank" rel="noopener noreferrer">
        Continue
      </a>
      <button type="button" class="btn btn-primary">Log Purchase</button>
  </div>

Then it won't load again.

I am totally stumped and getting very frustrated with Toolset at present.

I have tried all of the usual things:

Plugins are all up to date at the time or writing,
I have deactivated everything accept essential Toolset plugins,
Toolset debugging has been tried but is useless as it will not load when the page crashes,
WP_Debug and other debugging tools are on, but similarly do not catch an error,
There are no errors in the Console,
I cannot bypass it with die() functions,

So please do not ask me about these as a starting point.

As I have said, I have been going at this for a while now and when it crashes the html generation simply stops, so there is no error to work with specifically and none of the usual tools are catching anything.

Given that simply adding a basic piece of html that should have no such effect to the view can make the difference between this crashing and working, I am at a loss to explain it.

I am fine working on the code to support these functions, but this appears to be a total load failure from one aspect of Toolset or another and I have no idea how to diagnose it further.

Site access can be granted straight away if needed, but I'd really appreciate help sorting this.

Cheers,

Dave.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL and access details with all required information about where exactly you want to implement the modal popup?

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

You mentioned but I do not see the following button within the view's code:

<button type="button" class="btn btn-primary">Log Purchase</button>

When I load the page:
=> hidden link

Within the "Gifts" section - I see list of gifts and "Add Gift" button to add a new gift. Can you please tell me whats not working here?

[Dave]

Hi Minesh,

Given that this is a really odd and detailed issue I am currently uploading a video of the issue in action:

hidden link

It'll be ready in about 20 minutes from the time of posting.

Essentially, first part of the video demonstrates the original issue where using a cred form to capture the number of items purchased would cause the crash, this is currently live on page:

hidden link

and also demonstrates how to find the error as well. This is my preferred method of getting this working as it is very simple and all of the php (contained within fw-functions.php) are already working.

The second half of the video demonstrates my most recent attempted work around where I have attempted to manually create a form in the modal. This is where you seem to have picked up from the end of the last message as I stated that if you add a button or anything else to the modal then it causes the crash, and the video demonstrates this. This can be seen here:

hidden link

They are exactly the same, just achieving the error in slightly different ways for demonstrative purposes. I hope that the video will allow you to better understand what is going on as it is very hard to describe in words. It should also show you where everything is and how it's laid out.

If you need further clarity on anything once you've seen it then please let me know.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I can see the video is of 6 minutes - is this a full video and I do not see any voice is recorded to video. Its still hard for me to understand whats not working as I see in the video you deleted some code and then you are checking the page on frontend.

Can you please add voice to video and add steps to follow so that I can see the issue and whats your expectation. Once I understand and see the issue I will be in a better position to guide you in the right direction.

[Dave]

I intentionally did not put a voice track on the video as it demonstrates all of the components having issues and I thought attempting to explain things might cause further confusion.

I will go and add some commentary to it later on today but I won't be able to for a few hours so please bare with me.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Thats fine. Please share as much detailed explanation and if possible few screenshots and your expected results.

[Dave]

Ok, I've added some commentary to the video and that along with the information in the original post should relay just about anything I can think of right now.

You can find the new video here:

hidden link

and it should be live by the time I post this.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I see the issue. When you say you used Bootstrap 3.4 but Toolset supports Bootstrap 3.0. As you can see at:
=> Toolset => Settings => General tab => Bootstrap loading section

Now, I see that the modal broken only when the Toolset form is added to the modal body. I need to check on a local fresh installation. I will get back to you tomorrow with my findings on fresh installation.

[Dave]

It's Bootstrap 3 and I'm using all of the generic html elements and classes that have long been in place. I honestly don't know if it's 3.4, 3.3, 3.0 or whatever, but as I said before it 100% was working so Bootstrap is highly unlikely to be an issue. Besides, I have been referring to the documentation your colleague pointed to in a previous thread:

https://toolset.com/forums/topic/manual-control-over-accordion-expanding-and-collapsing/#post-1268551

I'll leave it with you as I am totally baffled by it just killing Toolset altogether.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I've created the sandbox site here:
=> hidden link
User: tssupp
Pwd: Admin@123

Where you can see this page where I've added the bootstrap panel as well as modal popup:
=> hidden link

Within modal popup I've added the form - as you can see here with the following view:
=> hidden link

I see both bootstrap panel and modal pupup just works fine. Can you please check.

I've tried to add the panel and modal same way you have and I see its working.

[Dave]

I've taken a quick look and I can see it and it does indeed work but I'm not quite sure what it proves as the concept works fine, which is what I've been saying from the start.

What I'll do is try and setup the modules that I have built and see if I can mimic the functionality and see where that leaves us cause something is definitely blocking it from running and if I can mimic it on a different site then we can try and narrow it down some more but it might be a day or so as I'm away on a business trip at the moment.

Thanks for the progress so far though.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Ok fine - thank you. Please update us with your findings.

[Dave]

Hi Minesh,

I'm back today and just sat down to try and have a go at this but the sandbox doesn't appear to be working. I can log in but it will not load a post fully and just get stuck showing this message:

"Connection lost. Saving has been disabled until you’re reconnected. We’re backing up this post in your browser, just in case."

So I'm a bit stuck here. Sorry for being difficult.

[Minesh Supporter Languages: Anglais (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I just checked this post and try to save it and it just works fine:
=> hidden link

Can you please make sure you have internet available at that time.