J'ai un modal bootstrap 2.32 que j'essaye d'insérer dynamiquement dans le HTML d'une autre vue. Je travaille avec Codeigniter 2.1. Suite à l' insertion dynamique d'une vue partielle modale bootstrap dans une vue , 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 je voudrais stocker séparément en 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, le modal est inséré correctement, mais j'obtiens l'erreur suivante:
TypeError: $(...).modal is not a function
Comment puis-je réparer cela?
javascript
jquery
css
twitter-bootstrap
twitter-bootstrap-2
utilisateur1592380
la source
la source
jQuery(...).modal
. votre jQuery est peut-être en mode de compatibilité, vérifiez également si jQuery n'est pas inclus deux fois.jQuery('#form-content').modal();
Réponses:
je veux juste souligner ce que mwebber a dit dans le commentaire:
:)
c'était le problème pour moi
la source
Cette erreur est en fait le résultat du fait que vous n'incluez pas le javascript de bootstrap avant d'appeler la
modal
fonction. Modal est défini dans bootstrap.js et non dans jQuery. Il est également important de noter que bootstrap a réellement besoin de jQuery pour définir lamodal
fonction, il est donc essentiel que vous incluiez jQuery avant d'inclure le javascript de bootstrap. Pour éviter l'erreur, assurez-vous simplement d'inclure jQuery puis le javascript de bootstrap avant d'appeler lamodal
fonction. Je fais généralement ce qui suit dans ma balise d'en-tête:la source
Après avoir lié votre jquery et votre bootstrap, écrivez votre code juste en dessous des balises Script de jquery et bootstrap.
la source
Vérifiez cette
jquery
bibliothèque non incluse dans html qui se charge viaAjax
.remove<script src="~/Scripts/jquery[ver].js"></script>
dans votreAjaxUpdate/get_modal
la source
Une autre possibilité est que l'un des autres scripts que vous incluez soit à l'origine du problème en incluant également JQuery ou en conflit avec $. Essayez de supprimer vos autres scripts inclus et voyez si cela résout le problème. Dans mon cas, après des heures à rechercher inutilement mon code, j'ai supprimé les scripts dans un modèle de recherche binaire et découvert immédiatement le script incriminé.
la source
J'ai résolu ce problème en réagissant en l'utilisant comme ça.
la source
Courir
dans le projet pour ajouter les types jquery dans votre projet angulaire. Après cela, incluez
dans votre app.module.ts
Ajouter
dans votre index.html juste avant la balise de fermeture du corps.
Et si vous exécutez Angular 2-7, incluez "jquery" dans le champ types du fichier tsconfig.app.json.
Cela supprimera toutes les erreurs de «modal» et «$» dans votre projet Angular.
la source
D'après mon expérience, cela s'est probablement produit avec des conflits de version jquery (en utilisant plusieurs versions), pour résoudre le problème, nous pouvons utiliser une méthode sans conflit comme ci-dessous.
la source
J'ai résolu ce problème dans Laravel en modifiant la ligne ci-dessous dans
resources\assets\js\bootstrap.js
à
la source
Dans mon cas, j'utilise le framework rails et j'ai besoin de jQuery deux fois. Je pense que c'est une raison possible.
Vous pouvez d'abord vérifier le fichier app / assets / application.js. Si jquery et bootstrap-sprockets apparaissent, alors il n'y a pas besoin d'une deuxième bibliothèque requise. Le fichier doit être similaire à ceci:
Ensuite, vérifiez app / views / layouts / application.html.erb et supprimez le script pour exiger jquery. Par exemple:
Je pense que parfois, lorsque les débutants utilisent plusieurs exemples de code de didacticiel, ce problème sera causé.
la source
Pour moi, j'ai eu
//= require jquery
après//= require bootstrap
. Une fois que j'ai déplacé jquery avant le bootstrap, tout a fonctionné.la source
J'ai eu le même problème. En changeant
à
n'a pas marché. Mais ensuite, j'ai trouvé que jQuery était inclus deux fois et la suppression de l'un d'entre eux a résolu le problème.
la source
Les autres réponses ne fonctionnent pas pour moi dans mon application react.js, j'ai donc utilisé du JavaScript simple pour cela.
La solution ci-dessous a fonctionné:
Vous pourriez peut-être générer le même clic sur le bouton de fermeture, en utilisant également jQuery.
J'espère que cela pourra aider.
la source
Je suppose que vous devriez utiliser dans votre bouton
au lieu de href, il devrait y avoir une cible de données
assurez-vous simplement que le contenu modal est déjà chargé
Je pense que le problème est que l'affichage de modal est appelé deux fois, un dans un appel ajax, cela fonctionne bien, vous avez dit que le modal est affiché correctement, mais l'erreur vient probablement avec l'action init sur ce bouton, qui devrait gérer modal, cette action ne peut pas être exécutée, car modal n'est pas chargé à ce moment-là.
la source