JQuery instrukcja: znajdź i załącz nie działa dla spring form:form

0

Mam formularz w springu (form:form). Dynamicznie przez klonowanie dodaje dodatkowe pola do formularza. Pola te to encje Y (adres, atrybuty: ulica, numer, kod, miasto). Czyli w formularzu tym dynamicznie określam ile encji ma być zbindowanych. Dodatkowo encje te (y) są bindowane do listy, która jest atrybutem encji X (relacja jeden do wielu).

przykładowy "path" w formularzu wygląda tak: path="addresses[0].streetNumber"

Jeżeli statycznie określę liczby porządkowe w formularzu (path="addresses[0].streetNumber", path="addresses[1].streetNumber", path="addresses[2].streetNumber" ... ) to bindowanie jest poprawne.

Za pomocą jQuery chcę wymieniać w dynamicznie dodawanym kolnie liczbę porządkową (indeksować i wymieniać)
Problem polega na tym, że instrukcja jQuery nie działa.

 
...

var $template = $('#addressTemlate'),
         $clone    = $template
                         .clone()
                         .removeClass('hide')
                         .removeAttr('id')
                         .attr('data-address-index', addressIndex)
                         .insertBefore($template);
		$clone
        .find('[path="addresses[0].street"]').attr('path', 'addresses[' + addressIndex + '].street').end()
        .find('[path="addresses[0].streetNumber"]').attr('path', 'addresses[' + addressIndex + '].streetNumber').end()
        .find('[path="addresses[0].zipcode"]').attr('path', 'addresses[' + addressIndex + '].zipcode').end()
        .find('[path="addresses[0].city"]').attr('path', 'addresses[' + addressIndex + '].city').end()

Czy coś jest tu nie poprawnie w kodzie czy po prostu w spring formularzu taka zmiana jest niemożliwa ?

Rezultat jest taki, że po dodaniu dynamicznie kilku dodatkowych pól na adres i po zatwierdzeniu formularza wszystko binduje się do jednej encji która na liście ma numer [0].

Utknąłem na tym, bardzo proszę o pomoc.

1

a jaki HTML ci generuje to cudo ?

0

@niezdecydowany dziękuję za wskazówkę. Problem nadal istnieje. HTML jest taki:

<input id="addresses0.zipcode" name="addresses[0].zipcode" class="form-control" type="text" value="">

<label for="addresses[3].zipcode" class="col-sm-12 control-label">Zipcode:</label>

Wnioski:

  • jQuery zadziałało dla <label> i indeksuje poprawnie.
  • dla formularza spring dla <input> jest generowane "id" którego w kodzie nie mam oraz następuje zamiana "path" na "name" ale bez indeksowania.

@niezdecydowany zadziałało po zmianie po stronie jQuery "path" na "name".

Pytanie dodatkowe.
Jak wyłączyć <input> aby się nie bindował? , mam kilka input'ów które są w pomocniczym templete który musi być w obrębie formularza ponieważ służy do klonowania i jest ukryty. Ale formularz go widzi i tworzy niepotrzebnie jeden obiekt za dużo

Mam formularz który dynamicznie dodaje zestaw kolejnych pól które łącznie są nową encją. Wszystko jest bindowane jako lista przez springa.

Dodawanie dynamiczne oparte jest na kopiowaniu szablonu kilku pól który jest w obrębie formularza. Po naciśnięciu przycisku szablon jest wstawiany i zmieniane są indeksy.

 
<!-- The template for adding new address -->

							<table class="table table-bordered hide" id="addressTemlate">
								<thead>
									<tr>
										<th>Fields</th>
										<th>Edit</th>
									</tr>
								</thead>
								<tbody>

									<tr>
										<td><label for="addresses[0].street"
											class="col-sm-12 control-label">Street:</label></td>
										<td><div class="form-group" id="addStreet">
												<div class="col-sm-12">
													<form:input id="street" path="addresses[0].street"
														cssClass="form-control" disabled="true"/>

												</div>
											</div></td>
									</tr>

									<tr>
										<td><label for="addresses[0].streetNumber"
											class="col-sm-12 control-label">Street Number:</label></td>
										<td><div class="form-group">
												<div class="col-sm-12">
													<form:input path="addresses[0].streetNumber"
														cssClass="form-control" disabled="true" />

												</div>
											</div></td>
									</tr>

									<tr>
										<td><label for="addresses[0].zipcode"
											class="col-sm-12 control-label">Zipcode:</label></td>
										<td><div class="form-group">
												<div class="col-sm-12">
													<form:input path="addresses[0].zipcode"
														cssClass="form-control" disabled="true"/>
													<form:errors path="addresses[0].zipcode" />
												</div>
											</div></td>
									</tr>
									<tr>
										<td><label for="addresses[0].city"
											class="col-sm-12 control-label">City:</label></td>
										<td><div class="form-group">
												<div class="col-sm-12">
													<form:input path="addresses[0].city"
														cssClass="form-control" disabled="true"/>
													<form:errors path="addresses[0].city" />
												</div>
											</div></td>
									</tr>
 
var $template = $('#addressTemlate'),
         $clone    = $template
                         .clone()
                         .removeClass('hide')
                         .removeAttr('id')
                         .attr('data-address-index', addressIndex)
                         .insertBefore($template);
		$clone
        .find('[name="addresses[0].street"]').attr('name', 'addresses[' + addressIndex + '].street').end()
        .find('[name="addresses[0].streetNumber"]').attr('name', 'addresses[' + addressIndex + '].streetNumber').end()
        .find('[name="addresses[0].zipcode"]').attr('name', 'addresses[' + addressIndex + '].zipcode').end()
        .find('[name="addresses[0].city"]').attr('name', 'addresses[' + addressIndex + '].city').end()

Teraz chodzi o to, że ten ukryty szablon też się binduje.

Znalazłem rozwiązanie - temat zamykam. Dzięki. Indexowanie miałem liczone od 1 i zapisywało o jeden obiekt za dużo.

1 użytkowników online, w tym zalogowanych: 0, gości: 1