14
मैंने एक मोडल विंडो के लिए ट्विटर-बूटस्ट्रैप से नमूना कोड शामिल किया है। अगर मैं बटन पर क्लिक करता हूं तो यह मोडल विंडो खुलता है। लेकिन अगर मैं मोडल विंडो जावास्क्रिप्ट के माध्यम से मैं निम्नलिखित त्रुटि मिलती है दिखाने का प्रयास -क्रोम में जावास्क्रिप्ट (फ़ायरफ़ॉक्स में काम करता है) का उपयोग कर बूटस्ट्रैप मोडल विंडो को कॉल करने में असमर्थ
$("#myModal").modal("show")
TypeError: Object [object Object] has no method 'modal'
यह त्रुटि केवल क्रोम में आ रहा है और फ़ायरफ़ॉक्स में काम करता है है।
नीचे HTML है। "प्रोजेक्ट-एड-मोडल" मोडल बॉक्स की आईडी है। प्रोजेक्ट पर नेविगेट करें -> मोडल बटन देखने के लिए जोड़ें। -
<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"><!--<![endif]--><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Project Management</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/docs.css">
<script src="//www.google-analytics.com/ga.js"></script><script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="header"><div id="top-navbar">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul data-navlinks="left" class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" id="add-new-project" bind="click: pm.client.templating.hello">
Add
</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Invite Users</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Username<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
</div></div>
<div class="container cljs-main"><div id="project-add-section">
<a class="btn" data-toggle="modal" href="#project-add-modal">Launch Modal</a>
<div class="modal hide fade" id="project-add-modal" style="display: none; ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add New Project</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Project Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="project-name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Project Description</label>
<div class="controls">
<textarea class="input-xlarge" id="project-desc" rows="3"></textarea>
</div>
</div>
<label class="control-label">Invite People to
collaborate on your project</label>
<div class="control-group">
<label class="control-label" for="prependedInput"></label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
</div>
</fieldset>
</form></div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div></div>
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="cljs/client.js"></script><script type="text/javascript" src="deps.js"></script>
<script>$(function() {cljsbinding.boot()})</script>
<!-- end scripts-->
<script>
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'));
</script>
<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"></iframe></body></html>
धन्यवाद, मुर्तजा
क्या आप अपना मोडल एचटीएमएल पोस्ट कर सकते हैं? और आप इस विधि को कहां कह रहे हैं? क्या बूटस्ट्रैप जेएस लोड हो गया है? – periklis
सबकुछ लोड होने के बाद, मैं क्रोम के कंसोल से विधि को कॉल करने का प्रयास कर रहा हूं। – murtaza52
मुझे लगता है कि आप का मतलब है कि आप $ ('# project-add-modal') कर रहे हैं। मोडल ("शो") और $ ("# myModal") नहीं। मोडल ("शो") (चूंकि myModal मौजूद नहीं है उपरोक्त कोड में) – periklis