我有一個引導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
我該如何解決這個問題?
檢查線路是否會用'jQuery的工作(...)。modal' 。你的jQuery可能處於兼容模式,還要檢查jQuery是否包含兩次。 – mwebber 2014-11-21 15:03:07
在嘗試調用bootstrap.js之前,很有可能沒有加載.modal() – 2014-11-21 15:03:46
mwebber - 我對js沒有經驗,我該如何「檢查它是否適用於jQuery(...)。模式「。我以某種方式在控制檯中假設? Etsitra,在這一切發生之前,bootstrap.js將被加載到標題中。 – user61629 2014-11-21 15:55:55