zrsmith92
28 Nov 2008, 01:58 PM
I'm working on a site that grabs news feeds from lots of sites using php and jQuery javascript. I also created previous and next buttons to go to earlier and later posts, respectively. These buttons update via ajax. The problem is, after the buttons are clicked, the javascript applied to them doesn't work.
<head>
<script src="path/to/jquery.js"></script>
<script>
$(function(){
$('a#prev').click(function(){
var parent = $(this).parent().get(0);
$(parent).fadeOut('slow');
$(parent).append('<span id="loading">LOADING...</span>');
$('#loading').fadeIn('slow');
var href = $(this).attr('href');
$(parent).load(href, "", hideLoader);
$(parent).fadeIn('slow');
return false;
});
$('a#next').click(function(){
var parent = $(this).parent().get(0);
$(parent).fadeOut('slow');
$(parent).append('<span id="loading">LOADING...</span>');
$('#loading').fadeIn('slow');
var href = $(this).attr('href');
$(parent).load(href, "", hideLoader);
$(parent).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="list">content to be updated here.</div>
<a href="feedparser.php" id="prev">previous</a><a id="next" href="feedparser.php">next</a>
</div>
</body>
I have to update the whole (#content) thing and not just the #list because the feedparser.php file tells me if there are any more feed items in the rss feed (by giving me up and down arrows, or just up, or just down).
Any advice/suggestions/ideas/anything will be appreciated. Thanks
<head>
<script src="path/to/jquery.js"></script>
<script>
$(function(){
$('a#prev').click(function(){
var parent = $(this).parent().get(0);
$(parent).fadeOut('slow');
$(parent).append('<span id="loading">LOADING...</span>');
$('#loading').fadeIn('slow');
var href = $(this).attr('href');
$(parent).load(href, "", hideLoader);
$(parent).fadeIn('slow');
return false;
});
$('a#next').click(function(){
var parent = $(this).parent().get(0);
$(parent).fadeOut('slow');
$(parent).append('<span id="loading">LOADING...</span>');
$('#loading').fadeIn('slow');
var href = $(this).attr('href');
$(parent).load(href, "", hideLoader);
$(parent).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="list">content to be updated here.</div>
<a href="feedparser.php" id="prev">previous</a><a id="next" href="feedparser.php">next</a>
</div>
</body>
I have to update the whole (#content) thing and not just the #list because the feedparser.php file tells me if there are any more feed items in the rss feed (by giving me up and down arrows, or just up, or just down).
Any advice/suggestions/ideas/anything will be appreciated. Thanks