我有一个bootstrap 2.32模式,我试图动态插入到另一个视图的HTML中。我正在使用Codeigniter 2.1。在Dynamically inserting a bootstrap modal partial view into a view之后,我有:
<div id="modal_target"></div>
作为插入的目标div。我的视图中有一个按钮,如下所示:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
我的JS有:
$.ajax({
type : 'POST',
url : "AjaxUpdate/get_modal",
cache : false,
success : function(data){
if(data){
$('#modal_target').html(data);
//This shows the modal
$('#form-content').modal();
}
}
});
主视图的按钮是:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
这是我想要作为局部视图单独存储的内容:
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>modalForm</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="user">User</label>
<div class="controls">
<input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="old">Old password</label>
<div class="controls">
<input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="new">New password</label>
<div class="controls">
<input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="repeat">Repeat new password</label>
<div class="controls">
<input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
<a href="#" class="btn" data-dismiss="modal">Nah.</a>
</div>
</div>
单击按钮时,模式正确插入,但我收到以下错误:
TypeError: $(...).modal is not a function
我怎样才能解决这个问题?
我只想强调mwebber在评论中所说的话:
还要检查jQuery是否包含两次
:)
这对我来说是个问题
跑
jQuery.ajax(...)
在项目中,在Angular项目中添加jquery类型。之后包括
npm i @types/jquery
npm install -D @types/bootstrap
在你的app.module.ts中
加
import * as $ from "jquery";
import * as bootstrap from "bootstrap";
在您的index.html中,正好在正文结束标记之前。
如果你在tsular.app.json文件的类型字段中运行Angular 2-7包含“jquery”。
这将删除Angular项目中“模态”和“$”的所有错误。
我通过像这样使用它来解决这个问题。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
我想你应该在你的按钮中使用
window.$('#modal-id').modal();
而不是href应该有数据目标
<a data-toggle="modal" href="#form-content"
只是确定,已经加载了模态内容
我认为问题是,显示模态被调用两次,一个在ajax调用中,工作正常,你说模态显示正确,但是错误可能伴随着对该按钮的init动作,应该处理模态,这个动作不能被执行,因为当时没有加载模态。
这个错误实际上是你在调用modal
函数之前不包括bootstrap的javascript的结果。 Modal在bootstrap.js中定义,而不是jQuery。同样重要的是要注意bootstrap实际上需要jQuery来定义modal
函数,所以在包含bootstrap的javascript之前包含jQuery是至关重要的。为了避免错误,请确保在调用modal
函数之前包含jQuery然后引导程序的javascript。我通常在标题标签中执行以下操作:
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>
在链接你的jquery和bootstrap之后,在jquery和bootstrap的Script标签下面写下你的代码。
$(document).ready(function($) {
$("#div").on("click", "a", function(event) {
event.preventDefault();
jQuery.noConflict();
$('#myModal').modal('show');
});
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
检查jquery
库是否包含在通过Ajax
.remove <script src="~/Scripts/jquery[ver].js"></script>
加载的html中的AjaxUpdate/get_modal
中
另一种可能性是,包含JQuery或与$冲突导致问题导致问题的其他脚本之一。尝试删除其他包含的脚本,看看它是否解决了问题。就我而言,经过几个小时不必要地搜索我的一个代码,我以二进制搜索模式删除了脚本并立即发现了违规脚本。
就我而言,我使用rails框架并需要两次jQuery。我认为这是一个可能的原因。
您可以先检查app / assets / application.js文件。如果出现jquery和bootstrap-sprockets,则不需要第二个库。该文件应类似于:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
然后检查app / views / layouts / application.html.erb,并删除需要jquery的脚本。例如:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
我认为有时新手使用多个教程代码示例会导致此问题。
根据我的经验,很可能它发生在jquery版本(使用多个版本)冲突,为了解决问题,我们可以使用如下所示的无冲突方法。
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$('button').click(function(){
$('#modalID').modal('show');
});
});
})(jQuery);
我通过修改qazxsw poi中的下面一行解决了Laravel中的这个问题
resources\assets\js\bootstrap.js
至
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
我遇到过同样的问题。更改
window.$ = window.jQuery = require('jquery/dist/jquery');
至
$.ajax(...)
不工作。但后来我发现jQuery被包含两次并删除其中一个修复了问题。