TypeError:$(...)。modal不是一个带引导模式的函数 [英] TypeError: $(...).modal is not a function with bootstrap Modal
问题描述
我有一个引导2.32模态,我试图动态插入到另一个视图的HTML。我正在使用Codeigniter 2.1。 动态地将引导模式局部视图插入视图,我有:
< div id =modal_target>< / div>
作为插入的目标div。我在我的视图有一个按钮,看起来像:
< a href =#messageclass =btn btn- large btn-infodata-action =Messagedata-toggle =tab> Message< / a>
我的JS有:
$。ajax({
type:'POST',
url:AjaxUpdate / get_modal,
cache:false,
success:function数据){
if(data){
$('#modal_target')。html(data);
//显示模态
$ #form-content')。modal();
}
}
});
主视图的按钮是:
< div id =thanks>< p>< a data-toggle =modalhref =#form-contentclass =btn btn-primary btn-large>模态功率,激活!< / a>< / p>< / div>
这里是我想分开存储为部分视图:
< div id =form-contentclass =modal hide fade instyle =display:none;&
< div class =modal-header>
< a class =closedata-dismiss =modal>×< / a>
< h3>向我发送消息< / h3>
< / div>
< div class =modal-body>
< form class =contactname =contact>
< fieldset>
<! - 表单名称 - >
< legend> modalForm< / legend>
<! - 文本输入 - >
< div class =control-group>
< label class =control-labelfor =user> User< / label>
< div class =controls>
< input id =username =usertype =textplaceholder =Userclass =input-xlargerequired =>
< p class =help-block> help< / p>
< / div>
< / div>
<! - 文本输入 - >
< div class =control-group>
< label class =control-labelfor =old>旧密码< / label>
< div class =controls>
< input id =oldname =oldtype =textplaceholder =placeholderclass =input-xlarge
< p class =help-block> help< / p>
< / div>
< / div>
<! - 文本输入 - >
< div class =control-group>
< label class =control-labelfor =new>新密码< / label>
< div class =controls>
< input id =newname =newtype =textplaceholder =placeholderclass =input-xlarge>
< p class =help-block> help< / p>
< / div>
< / div>
<! - 文本输入 - >
< div class =control-group>
< label class =control-labelfor =repeat>重复新密码< / label>
< div class =controls>
< input id =repeatname =repeattype =textplaceholder =placeholderclass =input-xlarge>
< p class =help-block> help< / p>
< / div>
< / div>
< / fieldset>
< / form>
< / div>
< div class =modal-footer>
< input class =btn btn-successtype =submitvalue =Send! ID =submit>
< a href =#class =btndata-dismiss =modal> Nah。< / a>
< / div>
< / div>
当我点击按钮,模态被正确插入,但我得到以下错误: p>
TypeError:$(...)modal不是函数
$我如何解决这个问题?
解决方案强调 mwebber 在评论中说:
还要检查jQuery是否不包含两次
:)
这是我的问题
I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with Codeigniter 2.1. Following Dynamically inserting a bootstrap modal partial view into a view, I have:
<div id="modal_target"></div>
as the target div for insertion. I have a button in my view that looks like:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
My JS has:
$.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(); } } });
The button of the main view is:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Here is what I'd like to store separately as a partial view:
<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>
When I click the button, the modal is inserted correctly, but I get the following error:
TypeError: $(...).modal is not a function
How can I fix this?
解决方案i just want to emphasize what mwebber said in the comment:
also check if jQuery is not included twice
:)
it was the issue for me
这篇关于TypeError:$(...)。modal不是一个带引导模式的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!