web-dev-qa-db-fra.com

bootstrap3 modal js fonction non définie

J'ai un bootstrap-modal régulier en HTML. J'essaye de montrer/cacher avec javascript et j'obtiens une fonction indéfinie.

Je fais comme le dit la documentation de bootstrap, j'obtiens toujours une fonction non définie sur cette ligne:

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

Ceci est mon modal HTML:

<div class="modal fade" id="registermodal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="registerDevice">Klargjøring</h4>
        </div>
        <div class="modal-body">
            <div id="registerContent" class="form-group">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="uuid" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="SIMpin" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="losekod" class="col-lg-4 control-label">Låsekod</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="losekod" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select" class="col-lg-2 control-label">Lokation</label>
                        <div class="col-lg-10">
                            <select size="6" class="form-control" id="lokationSelect">
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
        </div>
    </div>
</div>
</div>
javascripthtmltwitter-bootstrap
9
Lord Vermillion

Une des raisons pour lesquelles vous pourriez recevoir une fonction non définie serait si vous avez défini la bibliothèque jQuery plusieurs fois.

<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

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

<script src="/Scripts/jquery-1.10.2.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 en cours d'amorçage).

Une cause fréquente de ce problème est liée à l'inclusion de blocs de code partiels dans une application Web, car la même référence de fichier javascript peut apparaître dans une page complète imprimée à plusieurs endroits. Ceci est particulièrement dangereux lorsque vos définitions de js sont dispersés dans votre page, c’est-à-dire dans la tête, au sommet du corps et au bas du corps (dans un modèle partiel).

21
Brad Baskin

J'ai résolu mon problème en changeant 

$(id).modal("show")

à 

jQuery(id).modal("show").
4
Kiko Garcia

Ajoutez la balise de script suivante avant de déclarer votre propre fichier js. Cela résoudra l'erreur.

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
2
Yatin Mehandiratta

EDIT: J'ai ajouté un sur cliquez pour cacher: DEMO2

D&EACUTE;MO

Ce n'est pas donner la fonction indéfinie comme vous dites. Je suggère d'emballer votre $("#registermodal").modal('show');

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

Si cela ne fonctionne pas (ou si vous l'avez déjà fait), je suggère d'ajouter votre script js (ou lien) juste avant votre </body>

Dernier cas, assurez-vous que vous avez bootstrap.min.js et jquery sur votre page HTML.

1
kemicofa

Vient d’ajouter un identifiant au bouton de fermeture et de cliquer dessus en utilisant jquery a très bien fonctionné.

0
Gowri Tumma