wjw Posted October 26, 2007 Share Posted October 26, 2007 I have an ajax function that retrieves html from the server. The html needs to be appended to an existing div.It should look like this: <div id="applicants"><div id = "app_1">...</div>...<div id="app_n">...</div></div> The problem is that the html being returned from the server contains the <div id="app_n"> tag. I can do a createElement() and then set innerHTML to the html retrieved from the server. However, this creates one too many levels of div. For example, if I were adding app_2: <div id="applicants"><div id = "app_1">...</div><div> <div id="app_2">...</div></div></div> Each app_x div contains a lot of child nodes. These child nodes contain form fields so I can't just get the innerHTML of the "applicants" div and add the new html to the bottom of it. The browsers lose the current values/states of the existing fields.Ideally I could create a document fragment and set it's innerHTML. Or, parse the first tag to create the app_x elements then set their innerHTML (I have no desire to build the entire fragment using the dom in this case unless there is a parser that can do it for me).There are several ways to workaround this problem, but I'm wondering if anyone knows how to do exactly what I'm trying to do? Link to comment Share on other sites More sharing options...
Jesdisciple Posted October 27, 2007 Share Posted October 27, 2007 <div id="applicants"><div id = "app_1">...</div></div> What if, in this arrangement, you said applicants.innerHTML += app_2?If that's not what you want, I need a running example. (You could put the server's HTML in a constant string to simplify it.) Link to comment Share on other sites More sharing options...
wjw Posted October 27, 2007 Author Share Posted October 27, 2007 Here's an example that shows the problem. If you have values in the text fields and click the Add Applicants button, the values in the text fields are lost using the when using the "innerHTML +=" method. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">var appNbr = 1;function addApplicant() { var applicantNbrStr = "app_" + (++appNbr); var newDivHTML = "<div id=\"" + applicantNbrStr + "\"><label>Test " + appNbr + "<input type=\"text\" name=\"" + applicantNbrStr + "_name\" id=\"" + applicantNbrStr +"\" /></label></div>"; var applicantsDiv = document.getElementById("applicants"); applicantsDiv.innerHTML += newDivHTML;}</script></head><body><form id="form1" name="form1" method="get" action=""><div id="applicants"><div id="app_1"> <label>Test 1<input type="text" id="app_1_name" name="app_1_name" /></label></div></div><input type="submit" value="Add Applicant" onclick="addApplicant(); return false;" /></form></body></html> Link to comment Share on other sites More sharing options...
Synook Posted October 27, 2007 Share Posted October 27, 2007 Oh - that is because the page is being reloaded. Change your code to look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">var appNbr = 1;function addApplicant() { var applicantNbrStr = "app_" + (++appNbr); var newDivHTML = "<div id=\"" + applicantNbrStr + "\"><label>Test " + appNbr + "<input type=\"text\" name=\"" + applicantNbrStr + "_name\" id=\"" + applicantNbrStr +"\" /></label></div>"; var applicantsDiv = document.getElementById("applicants"); applicantsDiv.innerHTML += newDivHTML;}</script></head><body><form id="form1" name="form1" method="get" action="" onsubmit="addApplicant(); return false; "><div id="applicants"><div id="app_1"> <label>Test 1<input type="text" id="app_1_name" name="app_1_name" /></label></div></div><input type="submit" value="Add Applicant" /></form></body></html> Link to comment Share on other sites More sharing options...
wjw Posted October 30, 2007 Author Share Posted October 30, 2007 Oh - that is because the page is being reloaded.You're right! I hadn't noticed and thought by canceling the button's onclick event that wouldn't happen.Unfortunately, having to do it with the form's onsubmit handler adds some complexity since I have several blocks that contain dynamic fields in a single form. That is, there are blocks for the applicants like the example, and there are also blocks that are added dynamically for medications, and several others items. Each has an "add" type of button.If I can't do it all from the buttons' onclick events, I'll have to determine which button was clicked from the forms onsubmit handler and do it from there. Not a major issue, but not as clean as I would have liked.Thanks for the help! Link to comment Share on other sites More sharing options...
justsomeguy Posted October 30, 2007 Share Posted October 30, 2007 A better solution might be to not use buttons at all, just use a link tag that you format to look like a button. Link to comment Share on other sites More sharing options...
wjw Posted October 31, 2007 Author Share Posted October 31, 2007 A better solution might be to not use buttons at all, just use a link tag that you format to look like a button.That would certainly work without having to do any special handling in the form's onsubmit. But, I want the button to submit the form if the user has Javascript turned off (in which case the server returns the entire page with the new div added in). So I could use <noscript> and use the link like you mentioned, or use the button and do the special handling. Either way, I have to work around something.Thanks. Link to comment Share on other sites More sharing options...
wjw Posted November 7, 2007 Author Share Posted November 7, 2007 On the off chance anyone runs into a similar problem, I'm posting the solution.Basically what this does is create a holding div and set it's innerHTML to that retrieved from the server. I then create a DocumentFragment and append the first child of the holding div. In actuality, this should add all the top level children but this example just adds one.Then I append the document fragment where I want the new div to go and voila! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>More Tests</title><script type="text/javascript"> var appNbr = 1; function addApplicant(evt) { var applicantNbrStr = "app_" + (++appNbr); var newDivHTML = "<div id=\"" + applicantNbrStr + "\"><label>Test " + appNbr + "<input type=\"text\" name=\"" + applicantNbrStr + "_name\" id=\"" + applicantNbrStr +"\" /></label></div>"; var applicantsDiv = document.getElementById("applicants"); var d = document.createElement("div"); d.innerHTML = newDivHTML; var df = document.createDocumentFragment(); df.appendChild(d.firstChild); applicantsDiv.appendChild(df); }</script></head><body><form id="form1" name="form1" method="get" action="" > <div id="applicants"> <div id="app_1"> <label>Test 1<input type="text" id="app_1_name" name="app_1_name" /></label> </div> </div> <input type="submit" value="Add Applicant" onclick="addApplicant(event); return false;" /></form></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.