0

I have three Links:

    <div class="btn-group btn-group-justified">
        <a class="btn btn-default" href="#" onclick="changeSite('all.html')">All</a>
        <a class="btn btn-default" href="#" onclick="changeSite('new.html')">New</a>
        <a class="btn btn-default" href="#" onclick="changeSite('random.html')">Random</a>
    </div>

How you can see on onclick the function changeSite is triggered:

var changeSite = function(pathName){
    document.getElementById("siteContent").innerHTML = 
}

With the help of this function i would like to replace the content of the div with the id siteContent, to either the content of all.html, new.html or random.html. These three sites are in the same Folder like my index.html where the code is actually triggered. How can i set the .innerHTML to the content of one of this sites? Thanks!

John Smith
  • 6,105
  • 16
  • 58
  • 109

2 Answers2

0

Optional: When you say 'external site' it usually means that the resources are hosted on a server different from the one that serves the initial page. Your external server needs to be configured to either support JSONP or respond with proper CORS headers to allow for cross-site ajax.

Then you can use XMLHttpRequest, or jQuery.ajax to request the data from the site, and place it into your template.

You can use jQuery, but it's pretty straightforward without it:

var changeSite = function(pathName) {
  var r = new XMLHttpRequest();
  r.onreadystatechange = function() {
    if (this.readyState == 4) {
      document.getElementById("siteContent").innerHTML = this.responseText;
    }
  }
  r.open('get', pathName, true);
  r.send();
}
Community
  • 1
  • 1
lxe
  • 7,051
  • 2
  • 20
  • 32
0

the jquery load function allows you to specify an element id to load

$('#<id to load html to>').load('xyz.html');

http://api.jquery.com/load/

Varun Bhatia
  • 4,326
  • 32
  • 46