Databases
StackOverflow2013
Postsdbo
POunable to call bootstrap modal window using javascript in chrome (works in firefox)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POunable to call bootstrap modal window using javascript in chrome (works in firefox)
    text
    copied!<p>I have included the sample code from twitter-bootstrap for a modal window. If I click on the button it opens up the modal window. However if I try to show the modal window through javascript I get the following error - </p> <pre><code>$("#myModal").modal("show") TypeError: Object [object Object] has no method 'modal' </code></pre> <p>This error is only coming in chrome and works in firefox. </p> <p>Below is the HTML. "project-add-modal" is the id of the modal box. Navigate to Project -> Add to see the modal button. - </p> <pre><code>&lt;html class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en"&gt;&lt;!--&lt;![endif]--&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;Project Management&lt;/title&gt; &lt;meta name="description" content=""&gt; &lt;meta name="author" content=""&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;link rel="stylesheet" href="css/style.css"&gt; &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="css/bootstrap-responsive.min.css"&gt; &lt;link rel="stylesheet" href="css/docs.css"&gt; &lt;script src="//www.google-analytics.com/ga.js"&gt;&lt;/script&gt;&lt;script src="js/libs/modernizr-2.5.3.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body class=""&gt; &lt;div id="header"&gt;&lt;div id="top-navbar"&gt; &lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/a&gt; &lt;div class="nav-collapse"&gt; &lt;ul data-navlinks="left" class="nav"&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Projects&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#" id="add-new-project" bind="click: pm.client.templating.hello"&gt; Add &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Admin&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Invite Users&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav pull-right"&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Username&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /.nav-collapse --&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /navbar-inner --&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="container cljs-main"&gt;&lt;div id="project-add-section"&gt; &lt;a class="btn" data-toggle="modal" href="#project-add-modal"&gt;Launch Modal&lt;/a&gt; &lt;div class="modal hide fade" id="project-add-modal" style="display: none; "&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt; &lt;h3&gt;Add New Project&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;form class="form-horizontal"&gt; &lt;fieldset&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="input01"&gt;Project Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" class="input-xlarge" id="project-name"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="textarea"&gt;Project Description&lt;/label&gt; &lt;div class="controls"&gt; &lt;textarea class="input-xlarge" id="project-desc" rows="3"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;label class="control-label"&gt;Invite People to collaborate on your project&lt;/label&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="prependedInput"&gt;&lt;/label&gt; &lt;div class="controls"&gt; &lt;div class="input-prepend"&gt; &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text"&gt; &lt;/div&gt; &lt;p class="help-block"&gt;Here's some help text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt;&lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt; &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;footer&gt; &lt;/footer&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt;window.jQuery || document.write('&lt;script src="js/libs/jquery-1.7.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt; &lt;!-- scripts concatenated and minified via ant build script--&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script src="js/plugins.js"&gt;&lt;/script&gt; &lt;script src="js/script.js"&gt;&lt;/script&gt; &lt;script src="cljs/client.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="deps.js"&gt;&lt;/script&gt; &lt;script&gt;$(function() {cljsbinding.boot()})&lt;/script&gt; &lt;!-- end scripts--&gt; &lt;script&gt; var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); &lt;/script&gt; &lt;iframe name="xpcpeer7X7y" id="xpcpeer7X7y" style="display: none; " src="http://localhost:9000/repl?xpc=%7B%22cn%22%3A%22PmCIncJdVC%22%2C%22tp%22%3Anull%7D"&gt;&lt;/iframe&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> <p>Thanks, Murtaza</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload