Question

So I have found this code here

This basically lets me pull some data from a php file and place it into a div using jQuery. So everything from the tutorial works fine, but because I am thinking of putting together about 9-10 different links via that code, I thought I put all the function code in a js file and just call the function in html. Just to clarify, I have very minimal understanding of javascript, though I’ve experience with php.

In a new js file called links.js, I have put 2 different functions which I would like to call from my html

function getshow1() {
$('#sidebar').load('show1.php');
}


function getshow2() {
$('#sidebar').load('show2.php');
}

then in my html, I src the links.js and for 2 images, I’ve put this,

<a href="javascript:getshow1();"><img src="image1.jpg" /></a>
<a href="javascript:getshow2();"><img src="image2.jpg" /></a>

and of course #sidebar doesn’t display anything. How could I format the js file so I can just use the above html code to link different php files?

also, if there is a better way of pulling html code from a external file into a div, do let me know!

Thanks!

Answer 1

html:

<a href="#" id="show1"><img src="image1.jpg" /></a>
<a href="#" id="show2"><img src="image2.jpg" /></a>

jQuery:

$(document).ready(function(){
    $('#show1').click(function(){
      $('#sidebar').load('show1.php');
    });

    $('#show2').click(function(){
      $('#sidebar').load('show2.php');
    });
});

edit: added document ready function