PDA

View Full Version : Reloading div overwrites page



devloomax
06-07-2014, 03:00 PM
I'm building a site for someone, and i'm working on a script that takes out feedbacks of an xml file and presents them in the site.
This with Javascript. (this works perfectly). Now I wanted to add a function that reloads the script with new variables to get the next 6 items out pf the xml.
But when reloading the div (with content out of an html document containing the script) the whole body tag gets overwritten.

Lavabeau | Beauty & Wellness (http://lavabeau.com)
--> just below the home page, clicking on "recensies" ---> the link below (Volgende recensies) overwrites the whole body tag.

I've alreafy tried lots of methods to load the next items, cleaning the div and re-executing the script,... but nothing works.

The link code

$(function() {
$(document).ready(function() {
$("#refresh").click
(function() {$("#Recensiekader").load("html/kader.html");});
});
});

kader.html

<script>Recensies();</script>

The xml-loading-script


var yR = 0;
var zR = 0;

function Recensies() {
yR = zR;
zR = yR + 6;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","feedbacks.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write(yR);
document.write("<br />");
document.write(zR);
var x=xmlDoc.getElementsByTagName("RECORD");
for (i=yR;i<zR;i++)
{
document.write("<div id='Recensie'><p><strong class='white'>\"");
document.write(x[i].getElementsByTagName("Feedback")[0].childNodes[0].nodeValue);
document.write("\"</strong><br>");
document.write("Bezocht op: ");
document.write(x[i].getElementsByTagName("VisitDate")[0].childNodes[0].nodeValue);
document.write(" door ");
document.write(x[i].getElementsByTagName("First_Name_Short")[0].childNodes[0].nodeValue);
if (typeof(x[i].getElementsByTagName("City")[0].childNodes[0]) == "undefined")
{ document.write("");}
else
{document.write(" uit ");
document.write(x[i].getElementsByTagName("City")[0].childNodes[0].nodeValue);}
document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
document.write("<img style='margin-left:5px;' src='/images/5sterren.png' alt='5 sterren' width='105px'>");
document.write("</p></div>");
}
}

xelawho
06-07-2014, 06:18 PM
overwriting the page is what document.write() is designed to do, which works while the page is loading (because you are overwriting nothing with something) but as you have discovered is less than useful once the page has loaded.

Don't use document.write() to construct html - use html markup for that, and hide/show and style it it using CSS. Give your elements IDs and update their content using document.getElementById()

if you need to create elements dynamically (ie, you don't know how many there will be) look at either document.createElement("div") or document.getElementById("somediv").innerHTML+="<div>", etc

beware of this:


for (i=yR;i<zR;i++)
{
document.write(" id='Recensie'>
//etc

as it will create zR-1 number of elements with the ID 'Recensie' - IDs have to be unique in valid HTML and if you give two or more elements the same ID it will surely get you into trouble (if you are ever planning on using the ID - if not, why bother assigning it?)