So I’m working on a web application that uses jquery to parse xml data and add it to a table dynamically. Theres four tables that get toggled on the same part of the page. Here’s the relevant html:
<div id = "toggleSection">
<div id = "autoPrevData"></div>
<div id = "firePrevData"></div>
<div id = "auto1Data"></div>
<div id = "auto2Data"></div>
<div id = "auto3Data"></div>
</div>
And this is the Jquery function with AJax:
$("#autoEarly").click(function() {
if (!$("#firePrevData").is(":hidden")) {
$("#firePrevData").toggle('slow');
}
if (!$("#auto1Data").is(":hidden")) {
$("#auto1Data").toggle('slow');
}
if (!$("#auto2Data").is(":hidden")) {
$("#auto2Data").toggle('slow');
}
if (!$("#auto3Data").is(":hidden")) {
$("#auto3Data").toggle('slow');
}
if (loadedModels[0]) {
loadedModels[0] = false;
$.ajax
({
type: "GET",
url: "dashboard_auto.xml",
dataType: "xml",
success: parseXml_AutoEarly
});
}
else {
$("#autoPrevData").toggle('slow');
}
return false;
});
And this is the function that actually parses the xml:
function parseXmlEarlyPrevention(xml, xmlRoot, data) {
//First Header
$(data).append("<table><tr><th colspan='5'>Model Information</th><th colspan='4'>Score Metrics</th><th colspan='5' >Variable Metrics</th><th colspan='5' style='600;'>Pseudo-Standardized Coefficient Metrics</th></tr>");
//Second headers
$(data).append("<tr><td> </td><td> </td><td> </td><td> </td><td class='thickBorder'> </td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black'>PSI:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:2px solid black;'>Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Divergence:</td><td colspan='3' style='font-size:1em; color:#888888; border-right:2px solid black;'>Largest Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Sum of Changes:</td><td colspan='3' style='font-size:1em; color:#888888;'>Largest Change in Relative Importance:</td></tr>");
//Third Headers
$(data).append("<tr><td>Model</td><td>Avg Rank</td><td>Benchmark</td><td>Current</td><td class='thickBorder'># in Curr Period</td><td>Rank</td><td class='thinBorder'>Value</td><td>Rank</td><td class='thickBorder'>Value</td><td>Rank</td><td class='thinBorder'>Average</td><td>1st</td><td>2nd</td><td class='thickBorder'>3rd</td><td>Rank</td><td style='border-right:1px solid black;'>Value</td><td>1st</td><td>2nd</td><td>3rd</td></tr>");
var x = 1;
$(xml).find(xmlRoot).each(function() {
if (x % 2 == 1) {
$(data).append("<tr>");
$(data).append("<td class='dataCellBlue'><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
$(data).append("<td class='dataCellBlue'>" + $(this).find("avg_rank").text() + "</td>");
$(data).append("<td class='dataCellBlue'>" + $(this).find("benchmark").text() + "</td>");
$(data).append("<td class='dataCellBlue'>" + $(this).find("current").text() + "</td>");
$(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("n_current").text() + "</td>");
$(data).append("<td class='dataCellBlue " + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
$(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("psi").text() + "</td>");
$(data).append("<td class='dataCellBlue'>" + $(this).find("divergence_rank").text() + "</td>");
$(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("divergence").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
$(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
$(data).append("<td class='dataCellBlue thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
$(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
$(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
$(data).append("</tr>");
}
else {
$(data).append("<tr>");
$(data).append("<td><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
$(data).append("<td>" + $(this).find("avg_rank").text() + "</td>");
$(data).append("<td>" + $(this).find("benchmark").text() + "</td>");
$(data).append("<td>" + $(this).find("current").text() + "</td>");
$(data).append("<td class='thickBorder'>" + $(this).find("n_current").text() + "</td>");
$(data).append("<td class='" + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
$(data).append("<td class='thinBorder'>" + $(this).find("psi").text() + "</td>");
$(data).append("<td>" + $(this).find("divergence_rank").text() + "</td>");
$(data).append("<td class='thickBorder'>" + $(this).find("divergence").text() + "</td>");
$(data).append("<td class='" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
$(data).append("<td class='thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
$(data).append("<td class='" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
$(data).append("<td class='" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
$(data).append("<td class='thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
$(data).append("<td class='" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
$(data).append("<td class='thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
$(data).append("<td class='" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
$(data).append("<td class='" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
$(data).append("<td class='" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
$(data).append("</tr>");
}
x++;
});
$(data).append("</table>");
$(data).toggle("slow");
}
The problem is that only the html in the first $(data).append() call is being displayed and nothing afterwards. It works fine in safari and firefox, but it’s for work and I need it working on IE. I’ve been pouring the internet for hours trying to find a good explanation but so far I’ve had no luck, and frankly its driving me a bit nuts. Thanks for any help
DOM updates are expensive, and one would occur after each append in this situation. You’re far better off building this up as ONE string and inserting it in one step.