Bootstrap Modal Dialog html innerhalb eines javascrips ausführen.

R1100

Dabei seit: 04.05.2016
Beiträge: 288

Bootstrap Modal Dialog html innerhalb eines javascrips ausführen.

20.04.2018, 11:06

Hallo Zusammen,

in einer html Seite habe ich eine Javascript Funktion adresseGeaendert(data) sie wird aufgerufen sobald das Speichern durchgeführt wurde. Aktuell gebe ich nur ein alert("Adresse wurde erfolgreich geändert!"); aus.
Dieser Dialog gefällt mir optisch nicht. In der Bootstrap 4.0 Dokumentation habe ich Modale Dialoge gefunden. Genau das was ich möchte. Die Frage ist nun, wie kann ich in der Javascript Funktion ein html ausführen? Mit Document.write hat es nicht funktioniert. Noch besser wäre es wenn der code in einer Function z.B.: ShowDialog(hederText, showText) ausgelagert werden könnte.

Hat jemand eine Idee?

https://getbootstrap.com/docs/4.0/components/modal/

HTML-Code:

 function adresseGeaendert(data) {


            if (data.result > 0)
            {
                //alert("Adresse wurde erfolgreich geändert!");

                //das ist der Dialog Bootstrap Modal Dialog.

                <div class="modal" tabindex="-1" role="dialog">
                   <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title">Adressänderung</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <p>Modal Adresse wurde erfolgreich geändert!</p>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary">OK</button>
                        </div>
                      </div>
                   </div>
                </div>


            }else
            {
                alert("ACHTUNG: Adresse wurde NICHT geändert!");
            }
        }

Stichworte: -

jonas3344

Dabei seit: 22.10.2011

Beiträge: 2225
#2

20.04.2018, 11:12

Dein Modal gehört ganz normal in den <body>-Teil deiner Seite, nicht in einen Script-Tag. Dazu braucht das modal eine id (z.b. id="changeSuccessful" oder was du gerne magst.

Dann kannst du das Modal per javascript (in dem Fall jquery) aufrufen.

HTML-Code:

$("#changeSuccessful").modal();
Kommentar

R1100

Dabei seit: 04.05.2016
Beiträge: 288

20.04.2018, 11:42

Danke für die Hilfe.
Ich habe versucht es umzusetzen. Den komplette Dialog am Ende innerhalb des body bereicht. In der Javascript Funktion den Aufruf von dir. Chrome liefert beim Ausführen eine Fehlermeldung:
Uncaught TypeError: $(...).modal ist not a function. Der Dialog erscheint nicht.

Hast dun eine Idee?

HTML-Code:

         <div class="modal" id="changeSuccessful" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                 <div class="modal-header">
                   <h5 class="modal-title">Adressänderung</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                   </button>
                 </div>
                 <div class="modal-body">
                   <p>Modal Adresse wurde erfolgreich geändert!</p>
                 </div>
                 <div class="modal-footer">
                   <button type="button" class="btn btn-primary">OK</button>
                 </div>
               </div>
            </div>
         </div>

  </body>

HTML-Code:

function adresseGeaendert(data) {


            if (data.result > 0)
            {
                $("#changeSuccessful").modal();

            }else
            {
                alert("ACHTUNG: Adresse wurde NICHT geändert!");
            }
        }

Kommentar

jonas3344

Dabei seit: 22.10.2011

Beiträge: 2225
#4

20.04.2018, 11:45
Zuletzt geändert von jonas3344; 20.04.2018, 12:01.

Du hast kein jQuery, das müsstest du einbinden. Oder ansonsten mit Vanilla-Js.

PHP-Code:

document.getElementById("changeSuccessful").modal();

Edit: Der Hinweis war natürlich Quatsch.
Kommentar
R1100

Dabei seit: 04.05.2016

Beiträge: 288
#5

20.04.2018, 11:50

Zitat von jonas3344 Beitrag anzeigen

Du hast kein jQuery, das müsstest du einbinden. Oder ansonsten mit Vanilla-Js.

PHP-Code:

document.getElementById("changeSuccessful").modal();

jQuery habe ich eigentlich schon. Ich habe jetzt diese Variante ausprobiert und bekomme die gleiche Fehlermeldung. Haber ich den html Block richtig einfach im Body Bereich eingebaut?
Kommentar
jonas3344

Dabei seit: 22.10.2011

Beiträge: 2225
#6

20.04.2018, 11:54

Bootstrap-Javascript eingebunden?
Kommentar
Ulfikado

Dabei seit: 16.10.2014

Beiträge: 830
#7

20.04.2018, 11:57

Leute was hat das ganze JS Zeuge in der PHP Gruppe zu suchen?

PHP-Manual ¡ mysql_* ist veraltet ¡ Debugging: Finde DEINE Fehler selbst ¡ Passwort-Hashing ¡ Prepared Statements
Kommentar

R1100

Dabei seit: 04.05.2016
Beiträge: 288

20.04.2018, 13:11

Zitat von jonas3344 Beitrag anzeigen

Bootstrap-Javascript eingebunden?

Am Ende des Body sind ein paar js Files eingebunden. Danach folgen nur noch Javascripte. Der erste Eintrag müsste das doch sein oder?

HTML-Code:

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/vendor/twbs/bootstrap/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="/vendor/twbs/bootstrap/assets/js/vendor/popper.min.js"></script>
    <script src="/vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/vendor/twbs/bootstrap/assets/js/vendor/holder.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="/vendor/jquery-form/form/dist/jquery.form.min.js"></script>

Ich habe in der gleichen html Datei eine weitere javascript Funktion die Objte über querySelector sucht. Die funktioniert auch.

HTML-Code:

        function personGefunden(data) {

            if (data.PersonID > 0)
            {
                document.querySelector ('#aendernFormCnt').removeAttribute('style');
                document.querySelector ('#PersonID').value = data.PersonID;
                document.querySelector ('#Strasse').value = data.Strasse;
                document.querySelector ('#Plz').value = data.Plz;
                document.querySelector ('#Ort').value = data.Ort;

            }else
            {
                alert("2-Person wurde nicht gefunden!");
            }
        }

Alle drei Varianten funktionieren nicht. Somit liegt es sehr wahrscheinlich nicht am Aufruf.
Herzlichen Dank für die Hilfe ich werde es jetzt schon herausfinden wie das funktioniert.

HTML-Code:

        function adresseGeaendert(data) {


            if (data.result > 0)
            {
                document.querySelector ('#changeSuccessful').modal();
                //$("#changeSuccessful").modal();
                //document.getElementById("changeSuccessful").modal();

            }else
            {
                alert("ACHTUNG: Adresse wurde NICHT geändert!");
            }
        }

Kommentar

R1100

Dabei seit: 04.05.2016

Beiträge: 288
#9

20.04.2018, 13:12

Zitat von Ulfikado Beitrag anzeigen

Leute was hat das ganze JS Zeuge in der PHP Gruppe zu suchen?

Sorry, du hast absolut Recht. Ich arbeite an einem PHP Projekt indem auch etwas Javascript dabei ist. Ist für mich alles noch relativ neu. Der Thread können wir jetzt schon schließen.

Euch noch eine schöne Zeit.
Kommentar
jonas3344

Dabei seit: 22.10.2011

Beiträge: 2225
#10

20.04.2018, 13:16

Er findet .modal() nicht. Das ist das Problem. Du hast deinen JS-Code oberhalb dieses Blockes, oder? Das dürfte das Problem sein.
Du kannst natürlich das Modal erst aufrufen nachdem du bootstrap.min.js inkludiert hast. Du inkludierst auch 2 Mal jquery, weshalb?
Kommentar

Ankündigung

Bootstrap Modal Dialog html innerhalb eines javascrips ausführen.

Neue Werbung 2019

Bootstrap Modal Dialog html innerhalb eines javascrips ausführen.

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar