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!

2 Answers 2

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();
}
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.