Lightbox for Details/Submit Form Throwing Error After Multiple Uses

[kpcollier]

I'm trying to follow the workflow in this video that Caspio posted on their YouTube, which can be viewed below. Pretty much, Ned embeds a submission form inside of a modal that is accessed via a button on his tabular report.

I've set this all up (multiple times) and it works fine sometimes. However, very often, I will get an error Uncaught TypeError: $(...).modal is not a function. 

Seems to me that the bootstrap cdn isn't loading up in time, or something like that. If I put the CDNs directly on my webpage, this doesn't work at all. Almost like the Report page doesn't see it. When I put it in the Header of the Report like the video does, it works 1 time and then I get the error when trying to do it again. Refreshing the page makes it so you can use it again, but usually only once before the error happens again.

And to throw anther curve ball, this doesn't happen all of the time. Sometimes you can pull up the form as many times as you want with no problems. Other times, it happens after the first submission of the form.

Anyone have any ideas how to fix this? Or, anyone have any alike workflows? What I am looking for is somewhere I can essentially embed a submission form onto a Report datapage, so that when adding via the embedded form, the newly submitted values automatically show up on the report without the need to refresh. If I just open the form in a popup, it doesn't seem to dynamically add that value to the report until the page is refreshed. I also need to pass parameters from report -> form.

I think it is kindof similar to the post below, but not entirely sure. Any help is greatly appreciated!!

 

 

[CoopperBackpack]

Hello @kpcollier,

According to the error, it looks like the issue is related to jQuery.

You may test one of two options:

1) To copy the code to the app parameter and add an app parameter to the Header instead of 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2) To add these lines of code to the Footer

document.addEventListener('DataPageReady', function (event) {
   LoadScripts();
});

function LoadScripts(){
   if(typeof jQuery == 'undefined') { 
      setTimeout(function(){ 
         LoadScripts(); 
      }, 1000) }
   else { 
      deployDP(); 
      openModal();
   }
}

I cannot replicate this error in my account but I understand that this error can occur anytime.