✔ jQueryUI Dialog | Form - Refresh /Dialog - Refresh

[EuroCent]

Hallo zusammen,

ich habe ein Dialog in dessen ein Formular hinterlegt ist.
Beim absenden des Formulars überprüfe Ich die Daten und lass Sie dann von der DB mittels Ajax bearbeiten.

Nun möchte ich aber nachdem das passiert ist, dass das Formular oder das Dialog in sich selbst refresh also aktualisiert ohne dass die gesamte Seite neu geladen wird.

Das hier hab Ich bereits schon versucht:

window.location.refresh();

oder:

form[0].reset();

hier mal der Abschied der Funtion die Ich dazu aufrufe:

teamChange = function(userid) {
    var url = './load/teamChange.php';
    var dburl = './load/teamChange_db.php';
    $.ajax({
        url: url,
        type: 'POST',
        data: { uid: userid },
        success: function(data) {
            $(data).dialog({
                modal: true,
                draggable: true,
                resizable: false,
                position: {
                    my: 'center',
                    at: 'center',
                    of: window
                },
                buttons: [
                    {
                        text: 'Speichern',
                        "class": "btn btn-sm btn-success",
                        "type": "button",
                        click: function(e) {
                            e.preventDefault();
                            var form = $("#form").serialize();
                            var ele = form.split("&");
                            var newTeam = ele[1].split("=");
                            $.ajax({
                                url: dburl,
                                type: "POST",
                                data: { uid: userid, teamname: newTeam[1] },
                                success: function(data) {
                                    console.log(data);
                                    //window.loacation.refresh();
                                    //form[0].reset();
                                },
                                error: function(xhr, status, error) {
                                    console.log('Message: ' + xhr.responseText + ' | Status: ' + status + ' | Error: ' + error);
                                }
                            });
                        }
                    },
                    {
                        text: 'Abbrechen',
                        "class": "btn btn-sm btn-warning",
                        "type": "button",
                        click: function(e) {
                            e.preventDefault();
                            $(this).dialog("destroy");
                        }
                    }
                ],
                width: 400,
                height: 300,
                title: '[' + userid + '] Teamwechsel bearbeiten'
            });
            
            $('.ui-dialog-titlebar-close').hide();
        },
        error: function(xhr, status, error) {
            console.log('Message: ' + xhr.responseText + ' | Status: ' + status + ' | Error: ' + error);
        }
    });
};

Hier die PHP-Dateien:

<?php
include_once('../../libs/configs.php');

$options = '';

$sqluser = $db->__query("SELECT * FROM benutzer WHERE id = '". filter_input(INPUT_POST, 'uid')."'");
$rowuser = $db->__fetchArray($sqluser);

$sql = $db->__query("SELECT * FROM team WHERE teamhash != '". __getTeamtag($rowuser['username'])."' ORDER BY teamhash ASC");
while($row = $db->__fetchArray($sql)) {
    $options .= '<option value="'.$row['teamhash'].'">'.$row['teamname'].'</option>';
}
?>
<div id="dialog" title="Teamwechsel bearbeiten">
    <div id="errorMsg"></div>
    <form id="form" class="form-horizontal">
        <div class="form-group">
            <label for="curr_team" class="text">aktuelles Team:</label>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-users"></i>
                    </span>
                </div>
                <input type="text" class="form-control disabled" name="curr_team" id="curr_team" value="<?= __getTeam($rowuser['username']); ?>" readonly />
            </div>
        </div>
        
        <div class="form-group">
            <label for="new_team" class="text">neues Team:</label>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-exchange-alt"></i>
                    </span>
                </div>
                <select class="form-control" name="new_team" id="new_team">
                    <?= $options; ?>
                </select>
            </div>
        </div>
    </form>
</div>

Wie gesagt das Ergebnis wird auch geliefert nur sollte es beim Success dann eben das Formular oder das Dialog selbst in sich aktualisieren
Entweder bin Ich zu blöd beim Such-Tags in Google oder Ich habe tatsächlich dazu nichts finden können :/

 

[Sempervivum]

window.loacation.refresh()wird wohl die Seite neu laden.
reset() dürfte die richtige Wahl sein. Das Problem ist wahrscheinlich, dass die Variable form nicht das jQuery-Element des Formulars enthält, sondern die serialisierte Form.
Versuche dies:
$("#form")[0].reset();

 

[EuroCent]

@Sempervivum
das hat leider nicht den gewünschten Effekt gebracht.
Das Formular selbst muss sich aktualisieren, also so dass Ich die änderung auch gleich erkennen kann

Ich könnte zwar das dialog closen und wieder öffen, aber das ist ja nicht der Grundgedanke

 

[Sempervivum]

Was meinst Du denn eigentlich mit aktualisieren? Weil Du reset() versucht hast, habe ich angenommen, dass Du das Formular löschen bzw. in Grundstellung bringen willst?
Gibt die Console irgend welche Hinweise?

 

[EuroCent]

@Sempervivum
Es steht aber oben was Ich möchte, vom resetten war oben nicht die Rede
Deine Annahme ist daher falsch.

Ich möchte nachdem Ich auf den Absenden Button geklickt habe, dass das Formular in sich selbst aktualisiert, als würde man eine Seite neu Laden.

Sprich wenn Ich auf Absenden klicke, werden die Daten geändert, die Änderung soll aber danach gleich sichtbar sein, ohne dass Ich das Dialog-Fenster schließen und wieder öffnen muss.

 

[Sempervivum]

Sprich wenn Ich auf Absenden klicke, werden die Daten geändert, die Änderung soll aber danach gleich sichtbar sein, ohne dass Ich das Dialog-Fenster schließen und wieder öffnen muss.

Hm, verstehe ich es so richtig? In deinem PHP-Code generierst Du die Optionen eines Select aus der Datenbank. Und Du möchtest, dass dieses Select aktualisiert wird, wenn Du das Formular über Ajax abschickst? Dann würde ich empfehlen, das Skript, das Du über Ajax aufrufst, so zu erweitern, dass es das HTML mit den Optionen ausgibt. Dann stehen sie im Success-Callback zur Verfügung und Du kannst sie in das Select eintragen.

 

[EuroCent]

Nein, nicht das Select-Feld sondern das komplette Formular.

Es gibt einmal das Input und einmal die Selection.
Beide sollen aktualisiert werden nach dem Ich auf Absende geklickt hatte.

 

[Sempervivum]

Das würde nichts an dem Lösungsweg ändern: Statt nur das Select, das HTML des ganzen Formulars durch das PHP-Skript ausgeben lassen. Dann steht es im Success-Callback zur Verfügung und Du kannst es mit Javascript in das Formular eintragen.

 

[EuroCent]

Ich hab mit Callbacks bisher nicht gearbeitet

Hast Du einen Ansatz oder ein Beispiel in dem Ich es beispielhaft sehen kann?
Mir geht es da nur um den Aufbau, da Ich selbst noch lernen möchte ist es für Mich persönlich besser keinen fertigen Code zu haben

 

[Sempervivum]

Den Success-Callback hast Du ja schon:

                                success: function(data) {
                                    console.log(data);
                                    // Unter dem Parameter data steht die Ausgabe des PHP-Skripts zu Verfügung
                                    // Mit der jQuery-Funktion html() brauchst Du diese nur in das Formular einzutragen                                      },