web-dev-qa-db-fra.com

Bootstrap $ ('# myModal'). Modal ('show') ne fonctionne pas

Je ne sais pas pourquoi mais toutes les fonctions modales ne fonctionnent pas avec moi. J'ai vérifié la version et la charge, ils vont bien.

Je continue à recevoir ce message d'erreur:

Uncaught TypeError: $(...).modal is not a function

pour la peau j'ai déjà trouvé une alternative. au lieu de:

$('#myModal').modal('hide');

J'ai utilisé ceci:

$('#myModal .close').click();

Et ça marche parfaitement.

Le problème est maintenant avec le spectacle

$('#myModal').modal("show");

J'ai aussi essayé les deux

$('#myModal').modal("toggle");

Et:

$('#myModal').modal();

mais malheureusement, aucun d'entre eux ne fonctionne.

Ici le code html - lorsque le bouton est cliqué, je vais faire une vérification et gérer les données JSON du service Web si cela réussit, alors je veux montrer mon modal - tout fonctionne sauf le spectacle.

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

s'il y a une alternative, j'aimerais le savoir.

javascriptjquerybootstrap-modal
12
Nysa

La raison la plus courante de tels problèmes est

1.Si vous avez défini la bibliothèque jQuery plusieurs fois.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="modal fade" id="myModal" aria-hidden="true">
    ...
    ...
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

La bibliothèque d'amorçage est appliquée à la première bibliothèque jquery, mais lorsque vous rechargez la bibliothèque jquery, le chargement d'amorçage d'origine est perdu (la fonction Modal est dans l'amorçage).

2.Veuillez envelopper votre code JavaScript à l'intérieur

$(document).ready(function(){});

3.Veuillez vérifier si l'id du modal est identique

comme celui que vous avez défini pour le composant (vérifiez également les doublons du même identifiant).

32
Prakash Thete

J'ai eu le même problème lorsque je travaillais avec Modal Popup Bootstrap. J'utilisais les événements Id et trigger pour afficher et masquer les fenêtres contextuelles modales au lieu de $ ("# Id"). Modal ("show") et $ ("# id"). ('cacher'), ` 

    <button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
    $('#btnPurchaseClose').trigger('click');// for close popup

     $('#btnOpenPurchase').trigger('click');`// for open popup
2
Muhammad Bilal

Ma cause principale est que j'ai oublié d'ajouter le # avant le nom de l'ID. Lame mais vrai.

De 

$('scheduleModal').modal('show');

À

$('#scheduleModal').modal('show');

Pour votre référence, la séquence de code qui fonctionne pour moi est

<script>
function scheduleRequest() {
        $('#scheduleModal').modal('show');
    }
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
    src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">  
</script>
<script
    src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>
1
Siddharth

Utilisez .modal({show:true}) et .modal({show:false}) au lieu de ('show') et ('hide') ... il semble que la combinaison de versions de bootstrap/jquery soit dépendante. J'espère que ça aide. 

1
Paul Vermeer

Cela peut arriver pour plusieurs raisons:

  1. Vous avez oublié d'inclure la bibliothèque Jquery dans le document
  2. Vous avez inclus la bibliothèque Jquery plusieurs fois dans le document.
  3. Vous avez oublié d'inclure la bibliothèque bootstrap.js dans le document
  4. Les versions de votre Javascript et de votre bootstrap ne correspondent pas. Reportez-vous à la documentation d'amorçage pour vous assurer que les versions correspondent
  5. Le <div> modal manque dans la classe modal
  6. L'id du <div> modal est incorrect. (par exemple: vous avez mal préparé # dans l'id du <div>)
  7. Le signe # est manquant dans le sélecteur Jquery
1
Mohammed Shareef C

utiliser l'objet pour appeler ...

<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>

ou si vous utilisez ajax pour montrer que modal après obtenir le résultat, c'est un travail pour moi ...

$.ajax({ url: "YourUrl",
type: "POST", data: "x=1&y=2&z=3",
cache: false, success: function(result){
        // Your Function here
        $("#myModal").modal("show");
    }
});
0
Rhega

êtes-vous sûr que l'id du modal est "myModal"? sinon, l'appel ne le déclenchera pas.

aussi - juste à la lecture de votre message - vous déclenchez une fonction/validation avec ce bouton 

<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

et puis si tout va bien - vous voulez déclencher le modal. - Si c'est le cas - vous devez alors supprimer la bascule de ce bouton. Je suppose que vous avez un gestionnaire d'événements lié à ce clic? vous avez besoin du .modal ("show") pour cette fonction. pas basculé de ce bouton. aussi - cet identifiant est-il correct "creatNewAcount" par opposition à l'orthographe "createNewAccount"

<button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button>
0
gavgrif

jQuery lib doit être chargé en premier. Dans mon cas, je chargeais bootstrap lib en premier, j’essayais également d’utiliser tag avec target et d’envoyer un déclic. Mais le problème principal était que jquery devait être chargé en premier.

0
Sajal
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

le premier script googleapis ne fonctionne pas maintenant un jour utilise ce second script donné par jquery

0
kumar

Essayez ceci sans paramètre

$('#myModal').modal();

ça devrait être travaillé

0
Ahmed Hany