.val not updating the value of a hidden field created using .html
I have an html form that loads with a <div id="orders"></div>. The user can trigger an event that makes an ajax call that returns an xml file that is parsed out into multiple forms using $("#orders").html(newHtmlCodeFromXml) to create this :
<div id="orders">
<form id="order_1">
<input type="hidden" id="pid_1" name="pid" value="123" />
</form>
<form id="order_2">
</input type="hidden" id="pid_2" name="pid" value="123" />
</form>
</div>
This part of the code works great. The trouble starts when the user triggers this code :
function tranfersOrder(newPid){
alert("This is alert #1 pid : " + $("#pid_1").val());
$("#pid_1").val(newPid);
alert("This is alert #2 pid : " + $("#pid_1").val());
$("#order_1").formSerialize();
$("#order_1").ajaxSubmit();
}
Alert #1 shows the original value of pid_1, alert #2 shows the new value, HOWEVER if you view the source via firebug the value hasn't changed, and it is the original value that gets submitted.
If I do the exact same thing with a hidden field that existed on the form when initially loaded, the value change is reflected in the source and in the posted value.
Any ideas on why this isn't working?