2016-07-31 32 views
0

In diesem Projekt ist mir eine contact.js-Datei für die contact.html-Datei erstellen, die die Daten aus der Datei listings.html ziehen werden und fügen Sie den gesamten Inhalt auf die aboutUsdiv in der contact.html Seite. Ich schrieb eine Funktion, um den Inhalt der listings.html Datei in der Datei contact.html erscheinen zu lassen.Der Inhalt aus meiner XML-Datei erscheint manchmal auf meiner Webseite, wenn ich ihn lade, aber wenn ich ihn aktualisiere, verschwindet er. (JavaScript, jQuery, Ajax, xml)

Außerdem in der contact.js Datei, schrieb ich eine Funktion, die alle Inhalte meiner realtors.xml Datei direkt unter dem Inhalt der listings.html Datei im aboutUsdiv in der contact.html Seite anhängen wird. Meine Funktion funktioniert, aber manchmal, wenn ich die contact.html Webseite lade, zeigt sie den Inhalt der realtors.xml Datei an, aber manchmal erscheint sie nicht. Auf der anderen Seite erscheint der Inhalt der listings.html Datei immer auf meiner Webseite, wenn ich sie lade. Manchmal muss ich meine Webseite zwei- oder dreimal aktualisieren, damit der Inhalt der Datei realtors.xml angezeigt wird, und zu anderen Zeiten wird der Inhalt der Datei realtors.xml weiterhin angezeigt, nachdem die Webseite 5 Mal hintereinander aktualisiert wurde. Ich möchte, dass der Inhalt der Datei realtors.xml immer auf meiner Webseite erscheint, wenn ich die Webseite lade, aber manchmal geschieht dies.

Was mache ich hier falsch?

Ich verwende eine contact.html Datei, eine contact.js Datei, eine realtors.xml-Datei und eine listings.html-Datei (und eine Jquery-Datei (https://code.jquery.com/jquery-3.1.0.min.js)).

Meine contact.html Datei ist dies:

<!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=UTF-8" /> 
      <title>Real Estate Sold</title> 
      <link rel="stylesheet" type="text/css" href="listing.css" /> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
      <script type="text/javascript" src="contact.js"></script> 
     </head> 
     <body> 
      <nav class="main-navigation" role="navigation"> 
       <div> 
        <ul id="menu-main-menu" class="nav-menu"> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="index.html">Regional Info</a></li> 
         <li><a href="index.html">Current Listings</a></li> 
         <li><a href="#">Sold</a></li> 
         <li><a href="index.html">About Us</a></li> 
        </ul> 
       </div> 
      </nav> 
     <div id="aboutUs"></div> 
    </body> 
</html> 

Meine contact.js Datei ist dies:

$("document").ready(function() { 
     getData(); 
     getXMLData(); 
     }); 

     function getData() { 
     $("#aboutUs").load("listings.html"); 
     } 

    function getXMLData() { 
     $.get("realtors.xml", function(result) { 
      var phone = result.getElementsByTagName("phone")[0]; 
      var name = result.getElementsByTagName("name")[0]; 
      var realtor = name.firstChild.nodeValue + " : " + phone.firstChild.nodeValue; 
      var phone1 = result.getElementsByTagName("phone")[1]; 
      var name1 = result.getElementsByTagName("name")[1]; 
      var para = document.createElement("P");      
      var t = document.createTextNode(realtor1);  
      var realtor1 = name1.firstChild.nodeValue + " : " + phone1.firstChild.nodeValue; 
      $("#aboutUs").append(realtor); 
      $("#aboutUs").append(para).append(realtor1); 
     }); 
     } 

Meine listings.html Datei ist dies:

<h2>About Us</h2> 
<p> Wright Realty is a family owned real estate brokerage specializing in custom homes since 1852. 
    We appreciate that our customers demand quality that endures for generations, so we only 
    list with homeowners who have maticulously maintained their unique and timeless homes. 
</p> 
<h3>Our Realtors:</h3> 
<ul></ul> 

Meine realtors.xml Datei ist folgendes:

<data> 
    <name>Frank Lloyd</name> 
    <phone>555-123-4567</phone> 
    <name>Lloyd Wright</name> 
    <phone>555-123-8910</phone> 
</data> 

Antwort

1

Ich denke, das Problem ist, dass die (asynchrone) Behandlung von realtors.xml vor dem Laden von listings.html passieren kann, und dadurch überschrieben werden kann.

Sie müssen entweder:

  • Anruf getXMLData() nach dem Laden von listings.html, indem es als complete -callback beendet ist (siehe http://api.jquery.com/load/) oder
  • Erstellen Sie zwei verschiedene divs den Inhalt zu platzieren so dass es egal ist, was zuerst geladen wird.

Erste Methode würde wie folgt aussehen:

$("document").ready(function() { 
    getData(); 
    }); 

    function getData() { 
    $("#aboutUs").load("listings.html", getXMLData); 
    } 
+0

Ich sehe, was du meinst. Aber gibt es eine Möglichkeit, nur die contact.js-Datei zu ändern? –

+0

Ja, siehe oben. Rufen Sie nach dem Laden von Listings getXMLData() auf.html wird fertiggestellt, indem es als vollständiger Rückruf bereitgestellt wird (siehe http://api.jquery.com/load/) –

+0

Wie würde ich einen vollständigen Rückruf hinzufügen? Und was geht in den Rückruf? Ich lese die Website, aber es ist immer noch verwirrend. –