Jakie zasady stosuje HTML podczas konstruowania parametrów?

Question

Używam Railsów do automatycznego tworzenia obiektów podrzędnych na podstawie złożonego zestawu zagnieżdżonych atrybutów. Dlatego potrzebuję zagnieżdżać parametry w bardzo szczególny sposób. Oczywiście zdaję sobie sprawę, że mogę je skonstruować, ale chcę z JS, ale chciałbym, aby kolejność formularzy automatycznie pomogła w konstrukcji. W kontekście mam 2 kolumny, reprezentowane przez 2 <td> s. Każda kolumna może utworzyć nowy rekord lub edytować istniejący rekord. Oczywiście, gdy istniejący rekord ma zostać zmodyfikowany, identyfikator rekordu musi zostać przekazany.

wytopione HTML, jak następuje:

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="delivery" data-instructions="test instructions" data-id="1" data-amount="20"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="delivery"> 
    <input class="labeler-response" name="type_logistics_attributes[][id]" type="hidden" value="1"> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" value="test instructions"> 
    </span> 
</td> 

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged"> 
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup"> 
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20"> 
    <span class="area-to-inject-type-of-amount"> 
     <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics"> 
    </span> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions"> 
    </span>      
</td> 

W tym przypadku, pierwszy <td> modyfikuje istniejący zapis z identyfikatorem 1, podczas gdy drugi <td> dostarcza parametry, aby utworzyć nowy rekord. Po utworzeniu nowego rekordu tworzone jest również dziecko charged_amounts. Są to więc parametry spodziewałbym:

"type_logistics_attributes"=>[ 
    {"id"=>"1", "instructions"=>"test instructions"}, 
    {"type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"} 
] 

Zamiast tego, jestem coraz niżej:

"type_logistics_attributes"=>[ 
    {"id"=>"1", "type_of_logistics"=>"pickup", "instructions"=>"test instructions", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}]}, 
    {"instructions"=>"123 Fake street"} 
] 

Jakoś granica <td> nie działa i atrybuty dziecko charged_amount jakoś zostały skupione do pierwszej istniejącej modyfikacji rekordu.

Dzięki!

Answer 1

Nie jest <td> lub innego podobnego elementu HTML, który sprawia, że ​​„granica” dla wejść, to <form> element tylko. Wszystkie dane wejściowe znajdujące się w tagu <form> są wysyłane przez przeglądarkę jako parametry podczas przesyłania formularza. Prawdopodobnie masz obie kolumny w jednym <form> i dlatego parametry z obu kolumn są wymieszane w params.

Answer 2

nie jestem pewien, że istnieje sposób, aby to zrobić specjalnie, jak chcesz, ale można zrobić params wyglądać następująco:

"type_logistics_attributes"=>[ 
    {"id"=>"1", "instructions"=>"test instructions"}, 
    {"id"=>"1", "type_of_logistics"=>"pickup", "charged_amounts_attributes"=>[{"amount"=>"40", "type_of_amount"=>"logistics"}], "instructions" => "123 Fake street"} 
] 

Można to osiągnąć przez dodanie dodatkowych ukryte wejście powtarzający id tutaj :

<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0"> 
    <span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged"> 
    <input name="type_logistics_attributes[][id]" type="hidden" value="1"> 
    <input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup"> 
    <input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20"> 
    <span class="area-to-inject-type-of-amount"> 
     <input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics"> 
    </span> 
    <input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions"> 
    </span>      
</td> 

Rails ma reguły dla obsługi to: potrzeba atrybuty od lewej do prawej w ciągu kwerendy (lub góry do dołu w HTML), i tworzy nowy obiekt za każdym razem, gdy widzi powtarzany atrybut.

Answer 3

Jedynym sposobem, dzięki któremu można uzyskać oba parametry w jednym formularzu, ale zagnieżdżone w inny sposób, jest podanie pewnego identyfikatora w nowym polu wejściowym. To właśnie wyróżnia elementy tablicy type_logistics_attributes.

Miałem podobną potrzebę i użyłem ryanb's nested form. Kiedy używam go w tym samym celu, co twoja, dostarcza on losowy identyfikator do nowego pola wejściowego. Tak to jest zróżnicowane.

Mamy nadzieję, że pomoże to w zaplanowaniu wycieczki.