Eu tenho um modal bootstrap 2.32 que estou tentando inserir dinamicamente no HTML de outro modo de exibição. Estou trabalhando com Codeigniter 2.1. Depois de inserir dinamicamente uma visualização parcial modal de bootstrap em uma visualização , eu tenho:
<div id="modal_target"></div>
como o div de destino para inserção. Tenho um botão em minha visualização que se parece com:
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
Meu JS tem:
$.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();
}
}
});
O botão da visualização principal é:
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Aqui está o que eu gostaria de armazenar separadamente como uma visualização parcial:
<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>
Quando clico no botão, o modal é inserido corretamente, mas recebo o seguinte erro:
TypeError: $(...).modal is not a function
Como posso consertar isso?
jQuery('#form-content').modal();
jQuery(...).modal
. seu jQuery pode estar em modo de compatibilidade, verifique também se o jQuery não está incluído duas vezes.