• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Aktionen im nachgeladenen Formular (JQUERY)

S

Spoiler

Mitglied
Servus,

folgende Ausgangslage:
Auf einer Seite zeige ich Datensätze in einer Tabelle an. Klickt man auf einen Datensatz, wird per Ajax der einzelne Datensatz zum Bearbeiten geladen und der Content im MAIN-Div durch das Formular ersetzt.

Frage 1: Warum reagiert der Submit-Button in diesem nachgeladenen Formular nicht "normal" (der macht nämlich erstmal garnichts)?

Nach dem der Submit nichts getan hat, habe ich ihm per .click() angesteuert und dann ein Submit auf das Form gejagt
Code: 
<script type="text/javascript">
<!--
  $("#Submit").click( function() {
    $("#Form").submit(); 
  });
//-->
</script>

Das funktioniert erstmal, nur werden meinen Inputs nicht übertragen ... lediglich was beim Form im Action-Atrribut steht kommt beim Server an.

Frage 2: Warum überträgt der die Inputs nicht wenn ich das Form submitte?

Jetzt suche ich eine Möglichkeit, wie ich die im nachgeladenen Form befindlichen Daten an meinen Server am besten mit Post übertrage, und das Ganze so, als wäre das Form nicht per Ajax nachgeladen, sondern eben ein normales Form ... sprich, die Seite wird nach dem Submit einmal komplett neu geladen (das beinhaltet dann auch die soeben getätigte Änderung).

Frage 3: Wie sieht die genannte Lösung mit JQUERY aus?

Mir fällt eine Lösung ein, die aber doppeltes Senden bedeuten würde ... das fände ich nicht gut (per Ajax senden, Daten verarbeiten und im Success-Teil ein Page-Reload starten).
Da muss es doch irgendeine Alternative geben.

Kann mir bitte jemand helfen?

Danke im Voraus.
die besten Grüße

Spoiler
 
Werbung:
Was genau erwartest du von einem leeren .submit()?

Der erste Schritt wäre etwas wie:
Code: 
$('#Form').on('submit', function(event) {
  event.preventDefault();
  // do something
});;

Spoiler schrieb:
Kann mir bitte jemand helfen?
Zum Vergrößern anklicken....
Jo, wenn du mit Angular arbeiten willst und dir vorher die Grundlagen anliest. jQuery Gefrickel mache ich nicht mehr.
 
jQuery stellt für Ajax die tolle Funktion http://api.jquery.com/jQuery.ajax/ zur Verfügung, über die du mit der "data"- Methode die zu übertragenden Daten an PHP senden kannst. Bei dir würde das wahrscheinlich in etwa so aussehen:
Code: 
$.ajax({
    type: 'POST',
    url: 'auswertungsProgramm.php',
    data: 'name=' + $('#name').val() + '&email=' + $('#email').val(),
    success: function(daten) {
          $('#ausgabe').html(daten);
    }
})
Und mit PHP kannst du das dann auswerten
PHP: 
$name = $_POST['name'];
$mail = $_POST['email'];
 
Werbung:
Was genau erwartest du von einem leeren .submit()?
Zum Vergrößern anklicken....

Ich würde erwarten, dass er das Formular abschickt und die Seite neu lädt ... wie bei einem normalen Formular, ohne JQUERY und ohne Ajax.
Das wäre ja auch genau das, was ich brauche.

$.ajax kenne ich, hat aber genau das Problem, dass es Daten hin und her schickt, aber die Seite dabei nicht neu lädt.
Ich müsste das dann so gestalten
Code: 
$.ajax({
    type: 'POST',
    url: 'todo.php',
    data: $('#Form').serialize(),
    success: function(daten) {
          location.replace('WasIchAlsLetztesAufrief.php');
    }
})
Und das ist nunmal nicht wirklich schön ;-)
 
Spoiler schrieb:
Ich würde erwarten, dass er das Formular abschickt und die Seite neu lädt ... wie bei einem normalen Formular, ohne JQUERY und ohne Ajax.
Das wäre ja auch genau das, was ich brauche.

$.ajax kenne ich, hat aber genau das Problem, dass es Daten hin und her schickt, aber die Seite dabei nicht neu lädt.
Ich müsste das dann so gestalten
Code: 
$.ajax({
    type: 'POST',
    url: 'todo.php',
    data: $('#Form').serialize(),
    success: function(daten) {
          location.replace('WasIchAlsLetztesAufrief.php');
    }
})
Und das ist nunmal nicht wirklich schön ;-)
Zum Vergrößern anklicken....

Es ist ohnehin nicht schön was du da machst.
Entweder Ajax richtig einsetzen oder ein stinknormales HTML-Formular (Affenformular) erstellen mit anschließender serverseitiger Weiterleitung auf die letzte Seite.
 
Ich verstehe.

Allerdings habe ich dann eine andere Herausforderung ... ich benötige ein vernünftiges JQuery-Plugin zum Handeln der History .. also Browser vor/zurück.

Ich habe hier zwar ein Script, aber das ist mörder-alt ... was ist denn aktuell so der Stand am Markt wenn es um das Thema geht?

Danke!
 
Werbung:
Ok, ich bin jetzt dabei alles umzubauen ... was auch soweit bis jetzt gut funktioniert.
Allerdings reagiert mein EventHandler nicht auf ein Seiten-Refresh.

Das führt aktuell, wenn man F5 drückt oder Aktualisieren klickt zu wirklich unschönen Ergebnissen.

Wie kann ich das denn unterbinden oder abfangen?

Danke.
 
Spoiler schrieb:
Allerdings reagiert mein EventHandler nicht auf ein Seiten-Refresh.
Zum Vergrößern anklicken....

Wie sollte er auch?

Ein Eventhandler steht nach einem Reload zur Verfügung. Für dynamisch ins DOM eingefügten Content (Ajax) benötigt es einen Eventlistener und per history.pushState bewirkte URL-Manipulationen führen zu keinem Reload.
 
Werbung:
ok, dann bleibt aber immer noch die Frage, wie ich das Problem löse.

Ich habe ein EventListener wie folgt:
Code: 
window.addEventListener("popstate", function(e) { getContent(location.pathname, false); });

und die entsprechende Funktion:
Code: 
function getContent(url, addEntry)
{
  $.get(url).done(function( result )
  {
  // Updating Content on Page
  ajax = eval('(' + result + ')');
  if(ajax!=false)
  {
    if (ajax.MAIN !== undefined)
    {
      $('#MAIN').html(ajax.MAIN);
    }
  }

if(addEntry == true)
  {
  // Add History Entry using pushState
  history.pushState(null, null, url);
  }
  });
}

Dieses Konstrukt führt dazu, dass meine Navigation im Browser funktioniert ... also Vor und Zurück.
Klicke ich nun auf einen Link, der über dieses Konstrukt den Inhalt nachlädt, erscheint in der Adressleiste "index.php?Do=TuEtwas".
Wenn ich dann auf "Aktualisieren" klicke, lädt er eben genau diesen Teil ... das führt dazu, dass er vom Server eben NUR den Inhalt bekommt, nicht aber den Rahmen.

Was dabei rauskommt, kann man sich vorstellen ... also wie löse ich das jetzt am besten?

Hat jemand Buchtipps zu JQUERY oder ANGULAR, oder Links zu Tutorials, wo diese Problemmatik behandelt wird (am besten auf deutsch)?

Danke im Voraus.
 
Um nach dem Absenden des Formulars per AJAX einen kompletten Reload durchzuführen, brauchst du kein pushState sondern ein window.location.reload() im im Callback (aka .done() )
 
ahhh ... wir reden an einander vorbei ;-)

Das Thema Reload aus dem Formular ist vom Tisch ... wie gesagt, ich habe alles auf Ajax umgestellt ... und dabei die Kontrolle über die Navi-Button programmiert.
Wenn ich jetzt aber auf F5 drücke oder eben die Seite komplett aktualisiere, dann kommt der beschriebene Müll raus.

Soll ich das noch mal als extra Thema starten?
 
Werbung:
Ich weiß nicht, wie deine Seite aufgebaut ist oder was du erreichen willst.

Normaler Weise versendet der User sein Formular per AJAX, erhält darauf eine kurzes Feedback und bleibt auf der Seite. Damit funktionieren sowohl manuelle Aktualisierung als auch Back.
 
ich versuch mal zu erklären.

Wenn die Seite aufgerufen wird, wird quasi ein leerer Seitenrahmen geladen ... html, head, body mit div als Content.
Jquery prüft nun, ob dieses Div leer ist und lädt ggf. den Inhalt nach ... beim ersten Aufruf ein Login-Form, sonst den jeweiligen Inhalt der Seite.
Um die Navi-Button zu steuern habe ich den oben beschriebenen Eventlistener aktiviert und die Funktion dazu geschrieben.
Wenn ich nun z.B. auf den Home-Link klicke, schreibt die Funktion in die History die URL "index.php?Do=start" ... das steht dann oben auch in der Adressleiste.
Wenn ich jetzt aktualisieren drücke, wird eben genau das an den Server gesendet ... allerdings wird die Seite dann eben mit dem aktualisiert, was da als Rückgabe kommt ... und das wäre in diesem Fall nur der Inhalt des Content-Divs und nicht der komplatte Rahmen inkl. html, head und body-tag.

Aktualisieren müsste mir also entweder die komplette Seite mit allem drum und dran neu laden, was der Server aber nicht unterscheiden kann. Sobald ich per "Do=" einen Wert mitgebe, geht der Server davon aus, dass nur der Content-Div benötigt wird.

Oder ich müsste dem Aktualisieren mitteilen, dass es nur das Content-Div ersetzt, wo ich nicht genau weiß, wie ich das machen soll.

Ich hoffe, es ist klar geworden, was ich vor habe.

Gruß
 
Ist vom Ansatz her nicht richtig.

Du hast eine index.html, in die sämtliche Elemente, die auf allen Unterseiten includiert werden sollen (Head, Nav, Footer, etc.) sowie der Content der Startseite eingebunden wird.
Nehmen wir als URL: meine-seite.de

Wenn ein User auf die Seite gelangt, prüfst du, ob er sich bei einem vorherigen Besuch bereits eingelogt hat. Dazu kannst entweder einen Cookie oder den LocalStorage (ist einfacher) des Browsers auslesen. Ist das nicht der Fall, hast du zwei Möglichkeiten, a) du legst ein Modal mit Login-Form über die Seite, b) du leitest ihn auf eine Unterseite mit Login-Form und der Route meine-seite.de/login weiter.

Im Callback des AJAX-Request notierst du den erfolgreichen Login im LocalStorage und schließt bei der ersten Variante das Modal, bei der zweiten redirectest du zur Startseite.
 
Werbung:
Wobei das jetzt der einfachste Ansatz war. Du kannst theoretisch auch den Content der Startseite davon abhängig machen, ob der User schon mal da gewesen ist. Entscheidend ist die Sache mit Cookie / LocalStorage anhand dessen entschieden wird, welche Inhalte geladen, oder ob redirected werden soll.
 
Ok, ich verstehe nur nicht, wie ich damit mein Problem umgehe.
Wenn der User auf meine-seite.de/login steht und Aktualisieren drückt, bekommt der Browser als Rückgabe ja trotzdem nur den Inhalt des Contents und nicht die komplette index.html.
Oder habe ich hier irgendwo noch einen Denkfehler?

Danke für deine Geduld.
 
Eine auf AJAX basierende Seite nennt man SinglePage App. Wenn der User durch die einzelnen Seiten navigiert, bleibt er immer auf der index.html, die nie komplett neu geladen wird. Das einzige was sich ändert ist die URL und analog dazu der inkludierte Content. Wenn du von meine-seite.de/login manuell einen Browser Refresh durchführst, lädst du die index.html mit dem Formular.

Nachfolgend ein einfaches Beispiel mit gehashter URL. Das <ngview> im HTML wird durch das Template von JavaScript ersetzt.
Code: 
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <body ng-app="myApp">
    <div class="container">
      <div>
        <a class="btn btn-default" href="#/start">Startseite</a>
        <a class="btn btn-default" href="#/login">Login</a>
      </div>
      <ng-view></ng-view>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
    <script>
      angular.module('myApp', ['ngRoute'])
        .config(function($routeProvider) {
          $routeProvider
            .when('/start', { template: 'Hallo Startseite' })
            .when('/login', { template: 'Hallo Login Seite' })
            .otherwise({redirectTo: '/start'});
        });
  </script>
  </body>
</html>

Die Hashes in den Routen kann man auch weglassen. Das erfordert allerdings Anpassungen in der .htaccess und lässt sich im Forum nicht simulieren.
 
Werbung:
ich habe von Angular null Plan ;-)

Aber grundsätzlich habe ich wohl verstanden, wo die Reise hingehen soll und habe jetzt eine Idee, wie ich das umsetzen kann.

Vielen Dank nochmal für deine Geduld und ein schönes Wochenende
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben