Quali regole segue l'HTML durante la costruzione dei parametri?

Question

Uso Rails per creare automaticamente oggetti figlio in base a un insieme complesso di attributi nidificati. Pertanto, ho bisogno che i parametri siano annidati in un modo molto particolare. Ovviamente mi rendo conto che posso costruirli comunque con JS, ma mi piacerebbe che l'ordine del modulo aiuti automaticamente con la costruzione. Per il contesto, ho 2 colonne, rappresentate da 2 <td> s. Ogni colonna può creare un nuovo record o modificare un record esistente. Ovviamente, quando un record esistente deve essere modificato, l'id del record deve essere passato.

Il rendering HTML è il seguente:

<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> 

In questo caso, il primo <td> sta modificando un record esistente con id di 1, mentre il secondo <td> sta fornendo i parametri per creare un nuovo record. Quando viene creato un nuovo record, vengono creati anche i child charged_amounts. Così, questi sono i parametri che ci si aspetterebbe:

"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"} 
] 

Invece, io sono sempre qui sotto:

"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"} 
] 

In qualche modo, il confine <td> non funziona e gli attributi bambino charged_amount sono stati in qualche modo concentrati nella prima modifica del record <td> esistente.

Grazie!

Answer 1

Non è <td> o qualsiasi elemento HTML simile che fa un "confine" per gli ingressi, è l'unica <form> element. Tutti gli input che si trovano all'interno di un tag <form> vengono inviati dal browser come parametri durante l'invio del modulo. Probabilmente hai entrambe le colonne in uno <form> ed è per questo che i parametri di entrambe le colonne sono mescolati nello params.

Answer 2

non sono sicuro che ci sia un modo per farlo specificamente come si vuole, ma si può fare params simile a questa:

"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"} 
] 

si può raggiungere con l'aggiunta di ulteriore id ripetere input nascosto qui :

<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 ha una regola per la gestione di questo: ci vogliono gli attributi da sinistra a destra nella querystring (o verso il basso nel codice HTML), e crea un nuovo oggetto ogni volta che vede un attributo ripetuto.

Answer 3

L'unico modo che conosco con cui è possibile ottenere entrambi i parametri in una forma ma nidificati in modo diverso è che se si fornisce un ID al nuovo campo di input. Questo è ciò che distingue gli elementi dell'array type_logistics_attributes.

Avevo un bisogno simile e ho usato ryanb's nested form. Quando lo uso per lo stesso scopo del tuo, quello che fa è fornire un ID casuale al nuovo campo di input. Ecco come è differenziato.

Spero che questo ti guidi nella giusta direzione.