[Problem] Modal, Dialog whatever


EuroCent

Klappstuhl 2.0
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:
Javascript:
/**
* 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);
        }
    });
};
 
Zuletzt bearbeitet:

Kalito

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

Ich hab es bei mir immer so gebaut (BS3):
HTML:
<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>

Javascript:
$('#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

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

Allerdings hab Ich es aktuell zum Testen so:
HTML:
<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:
Javascript:
/**
 * 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

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

Klappstuhl 2.0
Achso... okay.. das hab Ich vollkommen übersehen :D

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

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

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

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

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

merzi86

Erfahrenes Mitglied
das Serialize musst du auf ein Form anwenden!

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

EuroCent

Klappstuhl 2.0
Die Seite die geladen wird:
HTML:
<div id="dialog" title="Zeit erfassen">
    <form id="form" class="form-horizontal">
        <div class="form-group">
            <label for="worktype">Arbeitszeit-Typ:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-list-ol"></i>
                    </span>
                </div>
                <select class="form-control" name="worktype" id="worktype" aria-label="Arbeitszeit-Typ" required>
                    <option value="" selected>Arbeitszeit-Typ w&auml;hlen</option>
                    <option value="worktime">Produktivzeit</option>
                    <option value="forbuild">Fortbildung</option>
                    <option value="triptime">Reisezeit</option>
                    <option value="businesstrip">Dienstreise</option>
                    <option value="overtime">Abbau von &Uuml;berstunden</option>
                </select>
            </div>
        </div>
        
        <div class="form-group">
            <label for="layertype">Schicht-Typ:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-list-ol"></i>
                    </span>
                </div>
                <select class="form-control" name="layertype" id="layertype" aria-label="Schicht-Typ" required>
                    <option value="" selected>Schicht ausw&auml;hlen</option>
                    <option value="w1">Schicht von: 06:00 bis 14:12</option>
                    <option value="w3">Schicht von: 06:25 bis 14:37</option>
                    <option value="w2">Schicht von: 14:20 bis 22:32</option>
                    <option value="w4">Schicht von: 14:45 bis 22:57</option>
                    <option value="w5">keine regul&auml;re Schicht</option>
                </select>
            </div>
        </div>
        
        <div class="form-group">
            <label for="timefrom">Arbeitszeit von:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="far fa-clock"></i>
                    </span>
                </div>
                <input type="time" class="form-control" aria-label="Arbeitszeit von" name="timefrom" id="timefrom" required />
            </div>
        </div>
        
        <div class="form-group">
            <label for="timeto">Arbeitszeit bis:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="far fa-clock"></i>
                    </span>
                </div>
                <input type="time" class="form-control" aria-label="Arbeitszeit bis" name="timeto" id="timeto" required />
            </div>
        </div>
        
        <div class="form-group">
            <label for="datenow">Datum:</label>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-calendar"></i>
                    </span>
                </div>
                <input type="date" class="form-control" aria-label="Datum" name="timeto" id="timeto" required />
            </div>
        </div>
        
        <div class="form-group">
            <button type="button" class="btn btn-sm btn-warning" id="reset">Reset</button>
            <button type="button" class="btn btn-sm btn-success" id="submit">Senden</button>
        </div>
    </form>
</div>

JS:
Javascript:
/**
 * 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';
    $.post({
        url: url,
        data: { name: name },
        type: 'POST',
        success: function(data) {
            $(data).dialog({
                modal: true,
                draggable: true,
                resizable: false,
                position: {
                    my: 'center',
                    at: 'center',
                    of: window
                },
                width: w,
                height: h,
                title: title
            });
            $('#submit').click(function(e) {
                e.preventDefault();
                $('#form').serialize();
            });
        },
        error: function(data) {
            $.alert({
                title: 'Fehler',
                content: 'Blablabla'
            });
            console.log(data);
        }
    });
};

Aufruf der Seite:
HTML:
<a onClick="loadDialogs('timeAdd', 600, 600, 'Zeit erfassen')" role="button" class="nav-link"><i class="far fa-clock"></i> Zeit erfassen</a>
 

Neue Beiträge

Forum-Statistiken

Themen
272.360
Beiträge
1.558.622
Mitglieder
187.833
Neuestes Mitglied
SirrDansen