Question

I am trying to dynamicaly load specific html files into a container DIV with a single onclick function instead of one for each button.

I am pretty new to this (it’s my first time working with AJAX or JQuery) and this is what I managed to come up with so far.

$(document).ready(function(){

$("#container").load("home.html");

$("#home").click(function(){
    $("#container").load("home.html");
});
$("#news").click(function(){
    $("#container").load("news.html");
});
$("#about").click(function(){
    $("#container").load("about.html");
});
$("#contact").click(function(){
    $("#container").load("contact.html");
});
});

As you see, for now I have 4 buttons with unique IDs and a function for each of them. But what I’d like to do is to simplify this and create a single function that takes each button’s ID and uses it as the URL for the page to load in the container. So that URL = ID + “.html”.

This would help me avoid having to add script with every new entry on my portfolio.

Anyone has any ideas on how I can do this?

Thanks!

Answer 1

You could do this :

$("#home, #news, #about, #contact").click(function(){ 
    $("#container").load(this.id+".html");
}

But the right thing to do would be to use an attribute instead of an id :

<div link=home>something</div>
...
$("[link]").click(function(){ 
    $("#container").load($(this).attr('link')+".html");
}

Then you wouldn’t have to change your selector each time you add a link.