I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link"><a href="info">my Info</a></div><!--it works here-->
<div id="link"><a href= "table">My Table</a></div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link"><a href="info">my Info</a></div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div>
(as pointed out by @scragar) have the same id link
, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live()
or on()
instead of click()
:
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php
is loaded in the page. ( http://api.jquery.com/live/ )