Wie kann ich eine Schleife in einem onClick-Ereignis erstellen?

Question

Ich möchte ein onClick Ereignis schreiben, das ein Formular mehrere Male übermittelt, indem es durch ausgewählte Elemente in einem Mehrfachauswahlfeld iteriert und für jedes einmal sendet.

Wie programmiere ich die Schleife?

Ich arbeite in Ruby on Rails und mit remote_function(), um das JavaScript für den Ajax-Aufruf zu generieren.

Answer 1

Meine schnelle Antwort (wie ich es noch nicht codiert habe) wäre, eine andere Funktion zu erstellen, die einen POST mit XMLHTTPRequest und den spezifischen Parametern für einen einzelnen Anruf erstellt. Dann rufen Sie in Ihrer onClick() - Prozedur diese Funktion auf, während Sie die ausgewählten Elemente durchlaufen.

Ich würde vorschlagen, dass Sie eine Proof of Concept nur mit einer Dummy-HTML-Seite und Javascript und dann versuchen, herauszufinden, wie man es in RoR arbeiten.

Auch, warum versuchen Sie, die mehrfachen Anrufe vom Browser zu machen, anstatt die Schleifenbedingungen im RoR-Controller zu behandeln?

Answer 2

Sie müssten manuell etwas Javascript schreiben. Die Generatoren von Rails werden etwas nicht so komplex für Sie tun.

Prototype.js wird fast alle schweren Lasten für Sie erledigen. Aus der Spitze von meinem Kopf, würde der Code wie folgt aussehen: (ungetestet)

<%= javascript_include_tag 'prototype' %> 

<form id="my-form"> 
    <input type="text" name="username" /> 

    <select multiple="true" id="select-box"> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
    <option value="3">Third</option> 
    <option value="4">Fourth</option> 
    </select> 
</form> 

<script type="text/javascript" language="javascript"> 
submitFormMultipleTimes = function() { 
    $F('select-box').each(function(selectedItemValue){ 
    new Ajax.Request('/somewhere?val='+selectedItemValue, 
     {method: 'POST', postBody: Form.serialize('my-form')}); 
    }); 
} 
</script> 

<a href="#" onclick="submitFormMultipleTimes(); return false;">Clicky Clicky</a> 

Hinweis:

• Mit Prototype $F() Methode die ausgewählten Elementwerte zu erhalten. Sie gibt ein Array für Mehrfachauswahlfelder zurück.

• Verwenden Sie Ajax.Request, um die Daten als POST an den Server zu senden.
  an den Server, das sieht genau das gleiche wie ein ganz normaler Formular

• Form.serialize Unter Verwendung der Daten aus dem Formular zu bekommen und es in den Körper der Wunsch zu bleiben.
  Diese exakt die gleichen Daten, die wenn Sie das Formular normalerweise vorgelegt gesendet bekommen würde

Answer 3

Sofern Sie den Browser DOM sind ändern, kann ich mir nicht aus einem Grund, dass Sie wollen würde, dies zu tun. (Aber ohne genau zu wissen, was Sie versuchen, könnte ich mich in diesem Fall irren =)

Sie sollten in der Lage sein, Daten von mehreren Objekten (sogar verschachtelte komplexe Objekte in Ihrem Formular) in nur einem POST zu senden .

Chancen sind die Schienen Code wird viel weniger komplex, einfacher zu schreiben (und einfacher zu debuggen!) Als jedes Javascript Sie kommen mit.

Wenn Sie verschiedene Teile der Seite aktualisieren müssen, je nachdem, was der Benutzer ausgewählt hat, können Sie das DOM immer noch über RJS in Ihrem render: update-Block aktualisieren, so dass dies kein Problem sein sollte.

Sie haben auch den (großen) Vorteil von nur einem Server-Round-Trip statt der mehreren Fahrten, die Sie mit mehreren POSTS benötigen würden.