✔ [Problem] Modal, Dialog whatever

[EuroCent]

Hallo zusammen,

ich sitze vor einem Problem.
Und zwar möchte Ich via (Modal oder Dialog) ein Formular einbauen.
Wenn man im Formular auf Senden klickt, soll das (Modal oder Dialog) nicht schließen sondern mir die Werte anzeigen, die Ich dann in der DB verarbeiten kann.

Allerdings hab Ich es schon mit dem Modal (BS4), Dialog (JQ-UI) und dem Thinkbox versucht.
Irgendwie schaff ich dass einfachste nicht...

Hat hier jemand eine Idee wie Ich es einfach umsetzen kann?

Hier mal meine JS:

/**
* Laden eines Dialoges
* @param {string} name Page-Name
* @param {integer} w Breite
* @param {integer} h Höhe
* @param {string} title Titlebar
*/
loadDialogs = function(name, w, h, title) {
    var url = './dialogs/' + name + '.php';
    $.ajax({
        url: url,
        success: function(data) {
            $(data).dialog({
                modal: true,
                draggable: true,
                resizable: false,
                position: {
                    my: 'center',
                    at: 'center',
                    of: window
                },
                width: w,
                height: h,
                title: title,
                open: function(evt, ui) {
                   
                }
            });
        },
        error: function(xhr, status, error) {
            console.log('Message: ' + xhr.responseText + ' | Status: ' + status + ' | Error: ' + error);
        }
    });
};

 

[Kalito]

wie sieht dein HTML aus? Kann es sein, dass du ein Submit-Button verwendest?

Ich hab es bei mir immer so gebaut (BS3):

<div class="modal fade" role="dialog" id="modal_id" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Titel</h4>
            </div>
            <div class="modal-body">
                   <!-- Mein Content -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="submit_ID">Speichern</button>
                <button type="button" class="btn btn-danger" id="close_ID">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

$('#submit_ID').click(function(event)
    {
        jQuery.ajax({
            method: "Post",
            url: url,
            data: {
                name: name,
            },
            success: function(data)
            {
                close_modal();
            },
            error: function(data)
            {
                $.alert({
                    title: 'Fehler',
                    content: 'Bei der Speicherung ist ein Fehler aufgetreten.',
                });
                console.log(data)
            }
        }); 
    });

$('#close_ID').click(function(event)
    {
        close_modal();
    });

function close_modal()
    {
      
        $('#modal_id').modal('hide');
    }

 

[EuroCent]

Hallo @Kalito,
vielen Dank für deine Antwort.

Allerdings hab Ich es aktuell zum Testen so:

<div id="dialog" title="Zeit erfassen">
        <input class="form-control" type="text" id="test1" />
        <input class="form-control" type="text" id="test2" />
        <input class="btn btn-sm btn-success" type="submit" name="senden" id="send" />
</div>

JS:

/**
 * Laden eines Dialoges
 * @param {string} name Page-Name
 * @param {integer} w Breite
 * @param {integer} h Höhe
 * @param {string} title Titlebar
 */
loadDialogs = function(name, w, h, title) {
    var url = './dialogs/' + name + '.php';
    $.ajax({
        async: false,
        url: url,
        data: {},
        type: 'GET',
        success: function(data) {
            $(data).dialog({
                modal: true,
                draggable: true,
                resizable: false,
                position: {
                    my: 'center',
                    at: 'center',
                    of: window
                },
                width: w,
                height: h,
                title: title,
                open: function(evt, ui) {
                    $('.ui-dialog-titlebar-close').hide();
                    $('#send').on('click', function() {
                        var test1 = $('#test1');
                        var test2 = $('#test2');
                        if(test1.val() == '') {
                            console.log("Test1 Leer");
                            test1.focus();
                        } else if(test2.val() == '') {
                            console.log("Test2 Leer");
                            test2.focus();
                        } else {
                            var form = $(this).serialize();
                            console.log(form);
                        }
                    });
                }
            });
        },
        error: function(xhr, status, error) {
            console.log('Message: ' + xhr.responseText + ' | Status: ' + status + ' | Error: ' + error);
        }
    });
};

Allerdings möchte Ich beim Senden, nicht dass das Dialog geschlossen wird, sondern dass das Formular sich aktualisiert.

Ich verwende BS4, wenn Ich BS3 nehme müsste Ich meine Seite komplett überarbeiten
Allerdings sollte es JS-Technisch ja keine Unterschiede geben.

Mein Haupt-Problem, ist eben wie erwähnt, das Formular.
Irgendwie Raff Ich das nicht

 

[Kalito]

Naja, der Button ist dein eigentliches Problem. Da er vom Typ Submit ist, führst du einen Request aus.

In meinem Code siehst du, dass ich nur einen einfachen Button definiere und jquery-seitig auf diesen Klick reagiere ($('#submit_ID').click(function(event) .....)

 

[EuroCent]

Achso... okay.. das hab Ich vollkommen übersehen

Jetzt muss Ich nur noch herausfinden, wie Ich das Formular auswerte und die Values dann in die DB speichern, ohne dass Ich dabei das Dialog schließe.

Am ende soll dann einfach nur der Hinweis erscheinen dass die Daten übermittelt wurden.

 

[merzi86]

Die Daten schreibst du am einfachsten mittels PHP in die Datenbank.
Du kannst ja die Daten aus dem Formular nehmen und diese durch ein AJAX-Request an den Server senden.

Für das Thema der Formular Prüfung hast du dann verschiedene Möglichkeiten. Die erste wäre du prüfst das Formular mit JavaScript im Browser und dann erst übermittelst die Werte. Das dann mit allen Risiken oder du übermittelst die Daten zuerst und Prüfst anschließend die Daten. Dies braucht länger besonders wenn Pflichtwerte nicht angegeben werden und der Browser erst die Rückmeldung abwartet.

Schöner für die Usability ist du Prüfst im Browser mittels JavaScript, ob alle Werte, die benötigt werden auch angegeben sind. Anschließend übermittelst du die Daten mittels AJAX-Request. Danach prüfst du die Daten mittels PHP und trägst diese in die Datenbank ein. Sobald dies geschehen ist, das kannst du über ein Rückgabewert des Requests steuern. Musst du nur noch mit JavaScript den DOM-Tree Manipulieren und den Hinweis ausgeben oder die Fehlermeldung im Fehlerfall.

 

[EuroCent]

Hallo @merzi86

vielen Dank für deine Antwort.

Mittels JS und PHP prüfen ist mit bereits bekannt.
Die frage ist, wie Ich das Formular senden kann ohne das dabei der Dialog geschlossen wird

 

[merzi86]

Du setzt einfach ein Event-Handler auf den Button, wie es Kalito bereits gesagt hat.

In diesen werden dann die Daten zu einen Query-String zusammen gesetzt, das kannst du entweder manuell machen, indem du von jedem Element die Werte abholst und diese in den Query-String schreibst oder du nutzt die JQuery Funktion serialize.

Die 2. Variante ist hierbei die etwas schönere

Sobald du das gemacht hast setzt du mittels JQuery ein AJAX-Request ab und schreibst den Query-String in den Data-Bereich des Requests.

Eine Erklärung zu dem JQuery AJAX-Request findest du z.B. hier in der Dokumentation.

PS: Ich bin jetzt Erstmal davon ausgegangen, das du JQuery nutzt, da es eines der häufigst verwendeten Frameworks ist.
Andere Framework bieten aber gleiche oder ähnliche Methoden.

 

[EuroCent]

Ich nutze jquery macht es mir leichter
Wenn Ich jedoch serialize() nutze bekomm Ich keine Werte Oo

 

[merzi86]

das Serialize musst du auf ein Form anwenden!

Wie sieht dein HTML DOM-Tree und der Aufruf des Serialize aus?