Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Reloading div overwrites page

    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
    --> 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
    Code:
    $(function() {
    				 $(document).ready(function() {
          				$("#refresh").click
          				(function() {$("#Recensiekader").load("html/kader.html");});
        				});
        		});
    kader.html
    Code:
    <script>Recensies();</script>
    The xml-loading-script
    Code:
    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>"); 
      }
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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:
    Code:
    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?)


  •  

    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
    •