boyka boyka - 1 month ago 4
jQuery Question

dynamically change attribute id input jquery

Here I want to affect a value to dynamically attribute id of input
here my code jQuery : for this code I can change to 0 the first value of input as

id=ouseval_0__SousEval_Note
but I have many input with dynamic id

<script type="text/javascript">
$("#idselectdiv .tdLabelwidht").change(function () {
var idd = $(this).val();
alert(" selected value@ ="+idd);
if(idd=="-1"){
alert(" Veuillez selectionner un bon choix ");
}
if($(this).find("option:selected").text()!="Conforme"){
$("#souseval_5__SousEval_Note").val(0);
}
alert(" selected option- "+$(this).find("option:selected").text());

});
</script>


in my JSP I have a slect tag and the input who I want edit here value if user select an option of select tag different of conform:

<s:set name="n" value="0"/>
<s:iterator value="item" status="idStatus" >
<s:select
label="%{Item_Libelle}"
headerValue="---------------- Select ---------------"
headerKey="-1"
list="sousitem"
listKey="SousItem_ID"
listValue="SousItem_Libelle"
cssClass="tdLabelwidht"
id="selectedId"
name="%{'souseval['+#n+'].sousEvalItem.SousItem_ID'}"
/>
<s:textfield name="%{'souseval['+#n+'].SousEval_Note'}"
value="%{ponderation}"
placeholder="entrer Note"
/>
<s:set name="n" value="%{#n+1}"/>
</s:iterator>


equivalent code HTML :

<tr>
<td class="tdLabel"></td>
<td>
<input id="souseval_5__SousEval_Note" type="text" placeholder="entrer Note" value="10" name="souseval[5].SousEval_Note">
</td>
</tr>

Answer

I'm not entirely familiar with JSP, but as a server-side language it must have some way to simply echo a literal value to the client-side output. This commonly happens throughout server-side code. For example, if you have some raw HTML in your markup and you just need to put some text within it.

That same mechanism for echoing a raw value to the output can be used to echo JavaScript code as well. From the server-side code's perspective, there's really no difference between HTML and JavaScript. It's just output being rendered to the page. It's only on the client-side that it becomes significant.

So let's say you have JavaScript like this:

$('#souseval_5__SousEval_Note').val(0);

Now let's say you want the 5 to be dynamic, based on a variable. Since this is JavaScript code, it would need to be a client-side JavaScript variable:

$('#souseval_' + someVariable + '__SousEval_Note').val(0);

But since we're talking about server-side variables, those variables can emit client-side constants. So the client-side code can end up looking like this:

$('#souseval_' + '5' + '__SousEval_Note').val(0);

So let's say, for example, you want 5 of these:

$('#souseval_' + '1' + '__SousEval_Note').val(0);
$('#souseval_' + '2' + '__SousEval_Note').val(0);
$('#souseval_' + '3' + '__SousEval_Note').val(0);
$('#souseval_' + '4' + '__SousEval_Note').val(0);
$('#souseval_' + '5' + '__SousEval_Note').val(0);

And you want these to be built in a loop based on some server-side collection. Again, I'm not familiar with JSP, but in pseudo-code it might look something like this:

<% for(int i = 0; i < someCollection.Length; i++) { %>
    $('#souseval_' + '<% i %>' + '__SousEval_Note').val(0);
<% } %>

Essentially what this is doing it looping through a server-side collection to emit multiple lines of client-side code. This would create the 5 lines above. So on the client-side it's not looping, it's just running multiple statements. But the code being maintained, the server-side code, is using a loop based on the collection.

Comments