bootstrap3 modal js Undefinierte Funktion

Ich habe einen regelmäßigen bootstrap-modal in HTML. Ich versuche zum ein - /ausblenden mit javascript und ich bekomme Undefinierte Funktion.

Ich bin dabei, wie die bootstrap-Dokumentation sagt, trotzdem bekomme ich Undefinierte Funktion auf diese Zeile:

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

Dies ist mein HTML-modal:

<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>

Was ist die vollständige Fehlermeldung? Ist es modal() oder jQuery ist undefiniert?

InformationsquelleAutor Lord Vermillion | 2014-06-25

21

Einen Grund, warum Sie möglicherweise eine Undefinierte Funktion wäre, wenn Sie definiert haben, die die jquery-Bibliothek mehr als einmal.
```
<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>
```
Die bootstrap-Bibliothek angewendet wird, um die erste jquery-Bibliothek, aber wenn Sie und laden Sie die jquery-Bibliothek, die original bootstrap-Last geht verloren (Modal-Funktion ist in der bootstrap).

Eine häufige Ursache dieses Problems ist, wenn auch teilweise code-Blöcke innerhalb einer web-app wie die javascript-Datei verweisen könnte, erscheinen in einer kompletten Seite in der Ausgabe in mehr als einer Lage.
Dies ist besonders gefährlich, wenn Sie Ihre js-Definitionen sind verstreut über Ihre Seite, dh in den Kopf, an der Oberseite des Körpers und an der Unterseite des Körpers (in einer teilweise Vorlage).
- "...wenn Sie die jquery-Bibliothek mehr als einmal." Das ist der Schlüssel. Danke.
- Sie rettete meine Zeit! Danke. "die jquery-Bibliothek sollte nicht importiert werden, mehr als einmal."
InformationsquelleAutor Brad Baskin
4

Ich mein problem gelöst ändern
```
$(id).modal("show") 
```
zu
```
jQuery(id).modal("show"). 
```
- Erstaunlich, dass nur diese Lösung funktionierte für mich. Im mit MeteorJS mit ReactJS
InformationsquelleAutor Kiko Garcia
2

Fügen Sie folgenden script-tag, bevor Sie deklarieren Ihre eigenen js-Datei. Dieser löst den Fehler aus.
```
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
```
InformationsquelleAutor Yatin Mehandiratta
1

EDIT: ich fügte hinzu, eine auf klicken, um zu verstecken : DEMO2

DEMO

Es ist nicht so dass der Undefinierte Funktion wie Sie sagen. Ich schlage vor, wickeln Sie Ihre $("#registermodal").modal('show');

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

Wenn das nicht funktioniert (oder wenn Sie bereits haben, dass) ich schlage vor hinzufügen des js-script (oder link) rechts vor Ihrem </body>

Letzten case-Szenario, stellen Sie sicher, dass Sie bootstrap.min.js und jquery auf Ihrer HTML-Seite.
- Komisch, ich habe es in einer javascript-Methode, kann das Probleme?
- Können Sie mir zeigen, die js Methode, die Sie verwenden? Sie müssen sicherstellen, dass die Methode aufgerufen wird, nachdem die HTML-Seite fertig geladen ist.
- Es ist innerhalb einer Funktion aufgerufen wird, durch klicken auf eine Schaltfläche, damit der HTML-Code wird geladen.
- Das ist eine dumme Frage, aber ich bin immer Undefinierte Fehlermeldung, wenn ich entfernen bootstrap.min.js Datei. Sie haben es verlinkt auf Ihre Seite? Hier ist eine demo ohne die boostrap.min.js jsfiddle.net/Grimbode/bj6Lp/2
- Keiner der JS-code in Ihre demo funktioniert, ich wurde auf den neuesten bootstrap und jquery, noch gleiche problem.
- Ich weiß, es soll nicht zu arbeiten. Versuchen, neu zu erstellen Ihre undefiniert Fehler in der Konsole an. Auf der Spitze von meinem Kopf es gibt nichts, was ich denken kann, Ihr problem zu lösen. Zeigen Sie mir Ihre Methode, damit ich es testen kann in der jsfiddle.
- Lassen Sie uns weiter, diese Diskussion im chat.
InformationsquelleAutor kemicofa
0

Nur Hinzugefügt-id, um die schließen-Schaltfläche ausgelöst und klicken Sie auf es mit jquery funktioniert großartig..

InformationsquelleAutor Gowri Tumma
-3

Versuchen:
```
$("#registermodal").modal();
```
- Gleiche problem, Undefinierte Funktion.
- Bei der Bereitstellung ein code, der helfen könnte, ist es besser, zu erklären, warum Sie erwarten, dass es funktioniert und der link zu einer entsprechenden Dokumentation.
- Dies ist nicht eine Lösung!
InformationsquelleAutor user3383999
-4

Nur halt mit modal js-Funktion ! (Ich glaube, einige library-problem)

Können Sie modal öffnen durch hinzufügen von data-toggle " data-target Elemente zu Ihrem modal. So einfach klicken Sie auf die Schaltfläche öffnet sich die modal automatisch ohne die Notwendigkeit von js auslösen.

Wenn Sie möchten, öffnen Sie die modal-Programm, nur auszulösen, klicken Sie auf den modal-button mit jQuery wird es dann geöffnet. (nicht getestet)

Schließen modal fügen Sie einfach eine id an das vorhandene schließen-button und trigger, klicken Sie mit jQuery, Wann immer Sie wollen zu schließen. Es funktioniert ! (Getestet)

InformationsquelleAutor nikhil.raut

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.