www.webdeveloper.com
Results 1 to 4 of 4

Thread: Jquery dialog with ajax content problem

Hybrid View

  1. #1
    Join Date
    Sep 2012
    Posts
    3

    Jquery dialog with ajax content problem

    Hi all,

    Im currenly facing the following problem.

    I have a javascript function like

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

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

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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.

  3. #3
    Join Date
    Sep 2012
    Posts
    3
    thanks indeed this works, working code is:
    Code:
    <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

  4. #4
    Join Date
    Sep 2012
    Posts
    3
    Quote Originally Posted by toicontien View Post
    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:
    Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles