jquery-steps | Senden Sie Daten an den Server auf Ajax Inhalt laden

Question

Ich verwende: http://www.jquery-steps.com/Examples#async in meinem Projekt. Es ist ein nettes Jquery-Plugin zum Hinzufügen von Wizards.

Meine Frage ist über dynamische Schritte. Der Inhalt des nächsten Schritts sollte von der Antwort des vorherigen Schritts abhängen. Wie kann ich mit dem AJAX-Aufruf zusätzliche Daten an mein Backend senden? Mein Backend wird basierend auf diesem Wert den nächsten Schritt ausführen.

Ich suchte die Dokumentation und den Quellcode, konnte aber keine Antwort finden.

Answer 1

Derzeit gibt es zwei Möglichkeiten, es zu realisieren. Einer mit mehr und der andere mit weniger Aufwand. Aber weniger Aufwand bedeutet auch weniger Kontrolle - mit anderen Worten jQuery Steps Griffe zeigt und versteckt die Lade-Nachricht und der Async-Aufruf selbst natürlich. Wie auch immer, die erste Lösung (weniger Aufwand) erfordert, dass Sie einen standardmäßigen asynchronen Schritt bei der Initialisierung hinzufügen, wie Sie es gewohnt sind.

<div id="wizard"> 
    <h1>Choose</h1> 
    <div> 
     <select id="choose"> 
      <option value="0" selected="selected">default</option> 
      <option value="1">extraordinary</option> 
     </select> 
    </div> 
    <h1>Result 1</h1> 
    <div data-mode="async" data-url="/rest/service/0"></div> 
</div> 

Dann einen kleinen Teil des Codes zum onStepChanging Ereignisse wie melc erwähnt hinzuzufügen. Dieser Code sollte die Daten des vorherigen Schritts analysieren und ggf. den asynchronen Standardschritt entfernen und einen neuen an derselben Position, aber mit einer anderen URL hinzufügen.

<script> 
    $(function() 
    { 
     var wizard = $("#wizard").steps({ 
      onStepChanging: function(event, currentIndex, newIndex) 
      { 
       if (currentIndex === 0) 
       { 
        if ($("#choose > option:selected").val() === "1") 
        { 
         wizard.steps("remove", 1); 
         // In this case you could also use add instead of insert 
         wizard.steps("insert", 1, { 
          title: "Result 2", 
          contentMode: "async", 
          contentUrl: "/rest/service/1" 
         }); 
        } 
       } 
       return true; 
      } 
     }); 
    }); 
</script> 

Die andere Lösung ist von melc bereits beschrieben.

Answer 2

In der Dokumentation ein Ereignis erwähnt, die vor dem Wechsel einen Schritt abgefeuert wird, https://github.com/rstaib/jquery-steps/wiki/Settings#events

Also, was Sie tun müssen, ist eine Callback-Funktion auf diesem Event hinzufügen und die Daten vom Server abgerufen werden, basierend auf, was gewesen ist im aktuellen Schritt ausgewählt. Sobald Sie die Daten erhalten, aktualisieren Sie den Inhalt des nächsten Schritts.

Vorsicht ist geboten, da der Aufruf an Ihren Server asynchron ist und das onStepChanging-Ereignis vor dem Übergang zum nächsten Schritt aufgerufen wird. Damit es sowohl für Sie als auch für Ihre Benutzer (nicht blockierend) funktioniert, müssen Sie auf der nächsten Seite einen Lade-Spinner anzeigen, bis Sie die Antwort von Ihrem Ajax-Aufruf an den Server erhalten und dann den Spinner durch Auffüllen der Daten ersetzen von dem Schritt.

Answer 3

Der letzte Schritt ist das Einstellen des Inhalts des 'neuen' leeren Schritts. Was ist der effektivste Weg, den Kontext dieses Schrittes zu setzen? Die IDs der DIVs werden dynamisch generiert, so dass ich sie nicht auswählen kann. PS Can Ich gebe nur Punkte zu 1 Antwort

Hatte das gleiche Problem mit user2779014. Hatte komplizierte Selektoren zu verwenden, um den Assistenten Inhalt für den richtigen Schritt

$.ajax({ url: './Advanced Example Content Loading with AJAX Alternative With More Control.php', 
     data: { GenerateContentName: $("#GenerateContentID > option:selected").val() }, 
     type: 'POST', 
     success: function(output) { 
         //Gets the options object (object passed to the steps() function) 
         var options = wizard.data("options"); 
         var bodyTag = options["bodyTag"]; 
         wizard.children(".content").children(bodyTag).eq(newIndex).html(output); 
        } 
}); 

Voll-Code zu erhalten: http://plnkr.co/edit/OyHkcZEBv8Fon3vJv7PZ

Beachten Sie den vollständigen Code ohne NICHT es das Herunterladen funktioniert, und über einen Web-Server-Hosting, wie Es verwendet PHP.