title: jQuery Uncaught RangeError: Maximum call stack size exceeded error multiple modals
body: <p>Right now I am having issues with a web page that uses modals and bootstrap so it has quit a bit of jQuery overhead. When you click on one of the modals the site freezes momentarily and then proceeds to load the data via sql procedure with php. When I go-to the Chrome Console I get the inevitable error:</p>
  <p><a href="https://i.stack.imgur.com/ghoOh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ghoOh.png" alt="jQuery.10.3.min.js Maximum Call Stack Size" /></a></p>
  <p>I have two theories on where the problem is coming from:</p>
  <p><strong>[A]</strong> This page has three modals total in which the jQuery modal API uses the .modal class to make calls to the jQuery library when a button is pressed. Then a hidden modal receives its contents from loaded data from another single page with the same head references to all the same jQuery libraries? Here is a snapshot of some of the rest of the errors:</p>
  <p><a href="https://i.stack.imgur.com/yQ9xK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQ9xK.png" alt="Bad links to js files" /></a></p>
  <p><strong>[B]</strong> The source code has the actual errors in the document.ready statement where the Console error list contains an error when jQuery.extends executes this jQuery function:</p>
  <pre><code>// position on 1st input capable field - special 'modal' logic added
  $(&quot;input:visible:enabled:first&quot;).focus();
  $( &quot;.modal&quot; ).focus(function(){$(&quot;input:visible:enabled:first&quot;).focus();});
  </code></pre>
  <p>Here is where the error code originates from I think:
  <a href="https://i.stack.imgur.com/GHD2J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GHD2J.png" alt="" /></a></p>
  <p>If anyone else has some suggestions on how to Debug this issues any help would be greatly appreciated.</p>