2009-06-11 7 views
0

Ich benutze JRails mit Ruby on Rails, so dass ich einfach jQuery verwenden kann, da ich mehr damit vertraut bin. Ich versuche auch, Low Pro zu verwenden, um einige meiner Formulare fernzusenden.Ruby on Rails, Low Pro und JQuery (über JRails)

Ich renne gerade in ein interessantes Problem, das mich ratlos hat. Ich habe folgend meine application.js Datei hinzugefügt, und ich weiß, dass dies korrekt arbeiten, weil ich die Antwort zurückgegeben sehe (mit Firebug in Firefox):

$.ajaxSetup({ 
    dataType: "script" 
}); 

$(function() { 
    $('a.remote').attach(Remote.Link); 
    $('form.remote').attach(Remote.Form); 
}); 

Alles, was ich tun muß, ist hinzuzufügen class="remote" meine Links und Meine Formen und alles funktioniert super. Der dataType: "script" Teil stellt sicher, dass es einen eval() auf dem zurückgegebenen Antworttext ausführt, damit es die Seite korrekt aktualisieren kann.

Also, ich habe einen einfachen Link, der eine neue Sendung erstellt. In meiner new.js.rjs Datei habe ich die folgenden:

page.insert_html :bottom, '#shipments_table', 
    :partial => 'test', :locals => { :shipment => @shipment } 

Wenn ich diese ersetzen mit page.visual_effect :fade, '#shipments_table' ist es, dass, wie man erwarten würde. Wenn meine _test.html.erb Datei ziemlich einfach ist, funktioniert sie auch. Das Problem ist, wenn ich versuche, eine <form> zu meinem Teil hinzuzufügen. Je nach Platzierung der <form> Tags ergeben sich unterschiedliche Probleme. Zum Beispiel diese

<tr> 
    <form> 
    <td>Some Text</td> 
    </form> 
</tr> 

und diese

<form> 
    <tr> 
    <td>Some Text</td> 
    </tr> 
</form> 

machen absolut nichts erscheinen. Diese

<form></form> 
<tr> 
    <td>Some Text</td> 
</tr> 

machen Some Text erscheinen, aber es verliert alle meine Formatierung. Und diese

<tr> 
    <td>Some Text</td> 
</tr> 
<form></form> 

funktioniert genau so, wie ich brauche (visuell gesprochen). Der offensichtliche Nachteil besteht jedoch darin, dass ich meine Formulareingaben nicht in die Tabellenspalten einfügen kann, was den gesamten Prozess im Grunde nutzlos macht. Ich kann das wahrscheinlich umgehen, indem ich sie alle auf eine Zeile innerhalb eines <div> oder ähnlichem setze, aber ich würde es vorziehen, dass alles ausgerichtet wird.

Alle Ideen, wie man dieses Rätsel zu lösen, wäre sehr dankbar :-)

Antwort

1

<form> sollte nur innerhalb der <td> oder wickeln die <table> platziert werden:

<form><table/></form> 
+0

Danke für die Antwort, aber die Idee ist, dass der Benutzer mehrere gleichzeitig hinzufügen kann, was bedeutet, dass alle Formulare alle Formularelemente umhüllen würden, was nicht funktionieren würde. –

+0

Nach ein bisschen Suchen, fand ich heraus, dass es einfach nicht erlaubt ist, ein Form-Tag in einen Tisch zu legen, so wie ich es versucht habe. Ich setze nun einfach die Eingaben in die Tabelle und benutze JavaScript, um die Daten zu serialisieren/zu senden, da es sich bei Verwendung von einfachem HTML verschlechtert, wenn JavaScript nicht verfügbar ist. Vielen Dank für Ihre Antwort. –

2

Wenn Sie vorhaben, zu verwenden, Tabellen, die Sie tun müssen, wie Tom gesagt und das Tabellenelement mit dem Formularelement wickeln, oder legen Sie es innerhalb der td-Elemente.

Alternativ können Sie Tabellen für Futter Dinge zu verlassen und das Label-Element verwenden, anstatt:

<style type="text/css"> 
label{ 
    float: left; 
    width: 120px; 
    font-weight: bold; 
} 

input, textarea{ 
    width: 180px; 
    margin-bottom: 5px; 
} 

textarea{ 
    width: 250px; 
    height: 150px; 
} 

.boxes{ 
    width: 1em; 
} 

#submitbutton{ 
    margin-left: 120px; 
    margin-top: 5px; 
    width: 90px; 
} 

br{ 
    clear: left; 
} 
</style> 
<form> 
<label for="user">Name</label> 
<input type="text" name="user" id="user" value="" /><br /> 
</form> 

http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

0

Es ist wahrscheinlich, dass tr Elemente nicht Form Kinder nur nicht erwarten, und dass Der Browser wird durcheinander gebracht. Das heißt, wenn Sie die Tabelle Tag innerhalb die Form Tag setzen, sollte es das Problem lösen. Wenn Sie dies nicht tun können, weil andere Formulare in der Umgebung verteilt sind, versuchen Sie es stattdessen in die Elemente td zu verschachteln.

In den letzten beiden Beispielen sind das Formular und die Tabelle Geschwister, nicht Eltern/Kind, daher kann jeder Übergang, der auf einen durchgeführt wird, den anderen nicht wie erwartet beeinflussen.

Wenn es immer noch nicht funktioniert, dann könnte es zu tun, wie Formular Elemente im Dokumentenfluss behandelt werden. Versuchen Sie, das Ganze in eine div einzupacken und den Übergang darauf anzuwenden.

+0

Danke, ich werde die div wrapping einen Versuch geben, wenn ich morgen zur Arbeit komme und ein paar mehr Infos posten/eine Antwort akzeptieren, wenn es funktioniert! –