Dynamic loading with AJAX

[Dilip H Pashupathi]

Hi,

I have requirement where I have to load the content of JSP dynamically. And this has to happen within the single page.

<div class="contentWrapper">
	<table class="main_table_header"  border="0"   >
		<tr>
		     <td><label class="subTitle"><bean:unimessage bundle="esmcoreRes" key="label.evprm.tree.structure" /></label></td></tr>
			</table>
				<table class="esm_form_div"  border="0"   >
						<tr>
							<td  id="treeView">
								<layout:treeview expandedLevelsAtFirst="4"  bundle="esmcoreRes" name="custome2b" width="100"></layout:treeview>
							</td>
						</tr>
					</table>
				</div>
				<div id="nodeDetailsDiv">
					
				</div>

now my problem in from the layout tree a tree will be displayed dynamically after the button on the top portion of the page. Once the tree is loaded a link will come called 'Add New Node' on click of which i need to replace the content of div - 'nodeDetailsDiv' with the html generated from another JSP. and that has to be used to save the data to db. I am using ajax here for the call.

function addChildNode(){
	req = getXMLHTTPRequest(); 
	var url = './getNodeDetails.do';
	var parentNode = arguments[0];
	var params ='parentNode='+parentNode;
	req.open("POST",url,true);
	req.onreadystatechange = function() {
   		if (req.readyState == 4 && req.status == 200) {
    		if (req.responseText) {
    				//alert(req.responseText);
    				/*winRef = window.open('/forums/ViewAttachmentBatch.do?section=export_section&msgNo='+msgNo,'myAttachedWindow','resizable=yes,width=560,height=300,top=50,left=50,scrollbars=yes');
					winRef.focus();*/
    				document.getElementById('nodeDetailsDiv').innerHTML = req.responseText;
    		}
     	}
  	};
	req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	req.send(params);
}	

Above is the script for dynamic loading. But document.getElementById('nodeDetailsDiv').innerHTML = req.responseText; at this line i am getting an error stating 'Unkonwn runtime error.'

Please help
Thanks and regards
Dilip

[Bear Bibeault]

Is there any valid reason that you are not using jQuery to perform the Ajax? It will likely do what you want with one line of code.

[Dilip H Pashupathi]

Hi Bear,

Can you please let me know about jQuery, as I am new to jQuery and AJAX, if possible to begin with novice level of how to's. I have studied a bit on ajax but not fully sure of how to work with it.

And in Ajax call the if page being loaded contains "form" element then also this will generate a run time error. My requirement is I already have a form associated with a jsp, now i am loading
a secondary jsp containing another form element. for example DoctypeEdit.jsp is one where i have some fields that are to be entered by user, once he clicks on proceed button, another jsp will be loaded called TreeView.jsp, where an xml tree will be shown in the form of collapsible format.

Now here in this tree I have added a link called "Add New Node" on click of which an ajax call has to happen which hits the action classes and fetches few details from db. Once details are fetched the data will be displayed in form of drop down list. And these dropdown lists are supposed to be in a "<form>" element.

But if I include the form element in third jsp i.e "CustomNodeDetails.jsp" ajax call fails and throws a Unknown runtime error.


Thanks and Regards
Dilip

[Bear Bibeault]

Dilip H Pashupathi wrote:Can you please let me know about jQuery

Well, I wrote an entire book on jQuery, so it's not something you're going to learn from a forum post. There are lots of good resources out there.

as I am new to jQuery and AJAX

Without jQuery (or some other library) Ajax can be a nightmare. But with kjQuery, fetching an HTML frgament from the server and loading intot he DOM is as simple as this statement:

$('#parentElement').load('/url/to/fragment');

It's that simple.

If you are going to be working with JavaScript in the browser, I highly recommend getting to know jQuery.