I have a problem with auto updating a div. I have a script as shown below which refreshes the page content (like facebook) every 1 minute. The problem is that this div is newly added to the page and that it contains some ajax/jQuery elements to add effects.
function loadNewPosts(){
var id = $(".altbgcolor:first").attr("id");
$.get('/update.php', { updateid: id ,catid:'technology' }, function(data){
$(".newslist").prepend(data);
}, 'html');
}
window.setInterval(loadNewPosts, 1000*60)
Below is an example of div its supposed to populate if found via update.php
<li class="altbgcolor" id=755>
<div> <a href=http://mashup2.sunnydsouza.com/technology/755/ target="_blank" rel="nofollow">
<div class="newsthumb" center center no-repeat;"><img src="http://mashup2.sunnydsouza.com/timthumb.php?src=/images/tech/thumb-755.jpg&h=100&w=100&zc=1&a=t" /></div>
</a>
<div class="newstext" style="margin:0px;">
<a href=http://mashup2.sunnydsouza.com/technology/755/full/ target=_blank style="text-decoration:none; "><h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif"> Top 5 Android Apps for Travel </h1></a>
<!--<i><font color=red size=1.2>Technology</font></i><br>-->
<div style="font-size: 0.4em; color:#666666;">
<!-- AddThis Button BEGIN -->
<!--<span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=sunnydsouza"></script>-->
<!-- AddThis Button END -->
<span style="text-decoration:none; color:none; "><i> via <a href="#" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">demo1</a></i></span>
<span style="text-decoration:none; color:none; ">
<a class="example7" href="comments_3.php?id=755" style="text-decoration:none; color:#666666; "><img src="content/comment/comments.png" width=18 height=18><i>No comments</i></a></span>
<span style="text-decoration:none; color:none; margin:5px;"><img src="content/voting/eye.png" > 17</span>
<!-- Vote Buttons #vote-->
<span class="vote" id="755" name="up" style="text-decoration:none; color:none; margin:5px; ">
<img src="/content/voting/yes-enb.png" width=12 height=12 alt="">
<span style="text-decoration:none; color:none">1 </span></span>
<!-- Vote Buttons ENDS #vote-->
<br>
<i><font color=red size=1.2>Technology</font></i>
</div>
<!--<h1><a href=http://mashup2.sunnydsouza.com/technology/755/full/ class="more" target="_blank" rel="nofollow">read...</a></h1>-->
</div><div class="clear"></div>
</div>
<div class="sharedp">
<span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
<span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span>
</div>
</li>
Though the above code calls the update.php every 1 minute and adds elements to the current page. The current div is devoid on the javascript element
This is the javascript on the main page which attaches itself to every div on every element initially to the span class="vote" // thumbs up / thumbs down code
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
//$(this).fadeIn(200).html('<img src="/content/voting/yes-enb.JPG" />');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.find('span').html(html);
}
});
}
return false;
});
});
However for the new elements added during the auto update, when clicking on the vote button..nothing happens.
Why is this happening. Why is the jQuery mentioned in the page at start not working for the auto newly added divs?
Please help
EDIT:: I have 2 more javascript elements. How do i convert them to .live ?
$(document).ready(function(){
$(".altbgcolor").hover(function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
$(".example7").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
)};
});
EDIT2: This is what I am trying, Please validate if its correct...
$(".altbgcolor").live('hover',function() {
$(this)
.addClass('altbgcolor-active')
.find(".sharedp")
.slideDown('slow');
},function () {
$(this)
.removeClass('altbgcolor-active')
.find(".sharedp")
.slideUp('slow');
});
