J'ai une modale bootstrap 2.32 que j'essaie d'insérer dynamiquement dans le HTML d'une autre vue. Je travaille avec Codeigniter 2.1. En suivant https://stackoverflow.com/questions/27022715/dynamically-inserting-a-bootstrap-modal-partial-view-into-a-view, j'ai :
<div id="modal_target"></div>
comme div cible pour l'insertion. J'ai un bouton dans ma vue qui ressemble à :
<a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>
Mon JS a :
$.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();
}
}
});
Le bouton de la vue principale est :
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>
Voici ce que j'aimerais stocker séparément comme vue partielle :
<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>
Lorsque je clique sur le bouton, la modale s'insère correctement, mais j'obtiens l'erreur suivante :
TypeError: $(...).modal is not a function
Comment puis-je résoudre ce problème ?
Cette erreur est en fait le résultat du fait que vous n'avez pas inclus le javascript de bootstrap avant d'appeler la fonction modal
. Modal est défini dans bootstrap.js et non dans jQuery. Il est également important de noter que bootstrap a besoin de jQuery pour définir la fonction modal
, il est donc vital d'inclure jQuery avant d'inclure le javascript de bootstrap. Pour éviter l'erreur, assurez-vous d'inclure jQuery puis le javascript de bootstrap avant d'appeler la fonction modal
. Je fais habituellement ce qui suit dans ma balise d'en-tête :
<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>
Je suppose que vous devriez utiliser dans votre bouton
<a data-toggle="modal" href="#form-content"
au lieu de href, il faudrait mettre data-target.
<a data-toggle="modal" data-target="#form-content"
Assurez-vous que le contenu de la modale est déjà chargé.
Je pense que le problème est que l'affichage de la modale est appelé deux fois, une dans l'appel ajax, qui fonctionne bien, vous avez dit que la modale est affichée correctement, mais l'erreur vient probablement de l'action init sur ce bouton, qui devrait gérer la modale, cette action ne peut pas être exécutée, parce que la modale n'est pas chargée à ce moment-là.