Jquery dialog with ajax content problem

[Djunity]

Hi all,

Im currenly facing the following problem.

I have a javascript function like

function ajaxdialog (var1,var2) {
	var newDiv = $(document.createElement('div'));
	$.post(__SITE_URL, { "var1" : var1 , "var2" : var2 }, function(data) {
		newDiv.html(data);
	});
	newDiv.dialog({
			modal:true,
			title: 'Title',
			width:700,
			height:'auto',
			resizable:false,
			show: "blind",
			hide: "explode",
			buttons:  {
				"Close": function() {
            		          newDiv.dialog( "destroy" );
		        }
    		}
		});
}

The content of the $.post is like

<p id="message">&nbsp;</p>
<form method="POST" name="ajaxform">
<table>
	<tr>
		<th>Input1:</th>
		<td><input type="text" name="var1" value="" align="right" size="16"></td>
	</tr>
	<tr>
		<th>input2:</th>
		<td><input type="text" name="var2" value="" align="right" size="16"> </td>
	</tr>
	<tr>
		<td colspan="3" align="right"><br />
			<input type="button" value="Add" onclick="javascript: ajaxaction(
								document.ajaxform.var1.value,
								document.ajaxform.var2.value
								);" />
		</td>
	</tr>
</table>
</form>

If i open the dialog for the first time every thing works fine i can click ont the Add button and "ajaxaction" is beeing executed but for example you open de dialog and do nothing and close the dialog with the close button or the x in the right upper corner of the dialog (dialog.("close") or dialog.("destroy")) and then reopen the dialog again and click the add button again im getting javascript errors like:

Fout: TypeError: document.ajaxform.var1 is undefined

the thing i dont understand is becouse the content of the dialog is requested true javascript $.post and the dialog was also destroy'd and re opend

So i hope someone knows how to sort this, thanks in advanced.

Kind regards, Dj

[toicontien]

Since you are creating new DOM nodes by inserting a string using the innerHTML property of a DOM node, the document.forms collection is probably not getting updated with the new form.

You'll have to get the form fields by Id or use a library like jQuery to grab ahold of them.

[Djunity]

thanks indeed this works, working code is:

<p id="message">&nbsp;</p>
<form method="POST" name="ajaxform">
<table>
	<tr>
		<th>Input1:</th>
		<td><input type="text" id="var1" name="var1" value="" align="right" size="16"></td>
	</tr>
	<tr>
		<th>input2:</th>
		<td><input type="text" id="var2" name="var2" value="" align="right" size="16"> </td>
	</tr>
	<tr>
		<td colspan="3" align="right"><br />
			<input type="button" value="Add" onclick="javascript: ajaxaction(
								$('#var1').val(),,
								$('#var2').val(),
								);" />
		</td>
	</tr>
</table>
</form>


Lees meer: http://www.webhostingtalk.nl/scripting-en-programmeren/175790-jquery-dialog-met-ajax-content-probleem.html#ixzz25tATTDV2

[Djunity]

Since you are creating new DOM nodes by inserting a string using the innerHTML property of a DOM node, the document.forms collection is probably not getting updated with the new form.

You'll have to get the form fields by Id or use a library like jQuery to grab ahold of them.

Thanks ideed this works, working code is like:

<p id="message">&nbsp;</p>
<form method="POST" name="ajaxform">
<table>
	<tr>
		<th>Input1:</th>
		<td><input type="text" id="var1" name="var1" value="" align="right" size="16"></td>
	</tr>
	<tr>
		<th>input2:</th>
		<td><input type="text" id="var2" name="var2" value="" align="right" size="16"> </td>
	</tr>
	<tr>
		<td colspan="3" align="right"><br />
			<input type="button" value="Add" onclick="javascript: ajaxaction(
								$('#var1').val(),,
								$('#var2').val(),
								);" />
		</td>
	</tr>
</table>
</form>