jQuery code does work after updating - php

I have page where an instant search results are displaying using PHP & AJAX and <a> tag onclick from response item, it generate preview of track. Everything is working fine but when I update my jQuery version from 1.7.2 to 1.11.3 or 2.1.4. It open link instead of generating preview.
My code
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(".videos .expand-video a.soundcloud").live("click", function(){
var scURL = $(this).attr("href");
var scID = $(this).attr("id");
var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false\"></iframe>";
$("#sc-"+scID).html(embedAudio);
return false;
});
var timer = null;
$("#keyword").keyup(function()
{
if(timer)
{
clearTimeout(timer);
}
timer = setTimeout(function()
{
var sc_keyword = $("#keyword").val();
var obj = $(this);
if(sc_keyword != '')
{
$(".ajax_indi").show();
var str = $("#fb_expand").serialize();
$.ajax({
type: "POST",
url: "fetch.php",
data: str,
cache: false,
success: function(htmlresp)
{
$('#results').html(htmlresp);
$(".ajax_indi").hide();
}
});
}
else
{
alert("Search for your favourite news");
$("#keyword").focus();
}
}, 1000);
});
});
</script>
I know .live() has been removed in version 1.9 onwards. So, I tried to update it to .on() but does not done it successfully
What I have tried to update from .live() to .on() is below
$(".videos .expand-video a.soundcloud").on("click", 'a', function(){
var scURL = $(this).attr("href");
var scID = $(this).attr("id");
var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false\"></iframe>";
$("#sc-"+scID).html(embedAudio);
return false;
});
HTML OUTPUT Response of ajax request
<div class="videos" id="sc-80912043">
<div class="expand-video"> <a class="soundcloud" id="80912043" href="https://api.soundcloud.com/tracks
/80912043"><span></span> <img src="https://i1.sndcdn.com/avatars-000033051760-4ugg0i-large.jpg" width
="120" height="90" title="Play" alt="Play"/> </a> </div>
<div class="details">
<h6>DJ MHA - Menu Chad De (MHA Remix)</h6>
<p class="link">Gangzta Khan</p>
<p class="desc">DJ MHA - Menu Chad De (MHA Remix)..
Gangzta Khan ..</p>
</div>
</div>
<div class="videos" id="sc-24508938">
<div class="expand-video"> <a class="soundcloud" id="24508938" href="https://api.soundcloud.com/tracks
/24508938"><span></span> <img src="https://i1.sndcdn.com/avatars-000002625883-ve8pmk-large.jpg" width
="120" height="90" title="Play" alt="Play"/> </a> </div>
<div class="details">
<h6>Halka Halka Suroor - MHA Mix</h6>
<p class="link">DJ MHA</p>
<p class="desc">Yeh Jo Halka Halka Suroor Hai
Direct Download Link:
http://www.djmha.com/get.php?file=Halka_Halka_Suroor_-_MHA_Mix.mp3</p>
</div>
</div>
<div class="videos" id="sc-65996317">
<div class="expand-video"> <a class="soundcloud" id="65996317" href="https://api.soundcloud.com/tracks
/65996317"><span></span> <img src="https://i1.sndcdn.com/avatars-000002625883-ve8pmk-large.jpg" width
="120" height="90" title="Play" alt="Play"/> </a> </div>
<div class="details">
<h6>Zarina Taylor - (DJ MHA Remix)</h6>
<p class="link">DJ MHA</p>
</div>
</div>

You're being too specific with your selector before calling .on(). The way the function works is you select elements that will always exist on the page, and bind the delegated event handler to those. Since you're replacing the content of the <div> elements with class videos, your code should be this:
$(".videos").on("click", ".expand-video a.soundcloud", function(){
var scURL = $(this).attr("href");
var scID = $(this).attr("id");
var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false\"></iframe>";
$("#sc-"+scID).html(embedAudio);
return false;
});
First, we select the .videos elements, then we bind a delegated event handler for a.soundcloud elements which are inside a .expand-video element (which are in turn inside a .videos element). That way, when you update the content of one of those elements in this line - $("#sc-"+scID).html(embedAudio); - the delegated event handler still exists.

I dont know why this worked in an old version!!!
So just for one video
<div class="videos" id="sc-80912043">
<div class="expand-video"> <a class="soundcloud" id="80912043" href="https://api.soundcloud.com/tracks
/80912043"><span></span> <img src="https://i1.sndcdn.com/avatars-000033051760-4ugg0i-large.jpg" width
="120" height="90" title="Play" alt="Play"/> </a> </div>
<div class="details">
<h6>DJ MHA - Menu Chad De (MHA Remix)</h6>
<p class="link">Gangzta Khan</p>
<p class="desc">DJ MHA - Menu Chad De (MHA Remix)..
Gangzta Khan ..</p>
</div>
</div>
This is a problem i have had a few times .on does not act the same as live with the active binding even though it's supposed to...
function gotAJAXResults(){
$(".videos .expand-video a.soundcloud").unbind("click");
$(".videos .expand-video a.soundcloud").click(function(e){
e.preventDefault();
var scURL = $(this).attr("href");
var scID = $(this).attr("id");
var embedAudio = "<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?url="+scURL+"&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false\"></iframe>";
$("#sc-"+scID).html(embedAudio);
return false;
});
}
Ok so now your AJAX call becomes
$.ajax({
type: "POST",
url: "fetch.php",
data: str,
cache: false,
success: function(htmlresp)
{
$('#results').html(htmlresp);
gotAJAXResults();
$(".ajax_indi").hide();
}
});
This method will then force it to bind the event when ajax receives and has inserted them into the page. (DOM scope)

Related

I am using laravel5.5 Ajax paging. When I click on page second, It will output data in JSON format

I'm using laravel5.5 Ajax paging. I am the HTML part assembled in the controller. When I clicked on page second, I jumped to this method. How to make the compiled HTML code continue to display on the page?
After clicking on the second page, a string of JSON data is returned. This is a problem. How can we make the data on the second page continue to display in the original page?
PHP
//Screen video, playback volume and key points.
public function accept(Request $ request){
$id=$_GET['id'];
$summer=$_GET['key'];
$name=DB::table('vd_category')->where('address',$summer)->value('name');
if($id=='1'){
$video=DB::table('vd_video_'.$summer)->orderBy('state','desc')->paginate(25);
}else if($id=='2'){
$video=DB::table('vd_video_'.$summer)->orderBy('thumbs','desc')-
>paginate(25);
}
$data='';
foreach($video as $list){
$data.='<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0
5px;"><div class="movie-item">';
$data.="<a style='position:relative;display:block;' title='$list-
>video_name' target='_blank' href='details?id=$list->id&key =$summer'>";
$data.="<img alt='$list->video_name' title='$list->video_name'
src=\"uploads/$list->image_address\" height=\"230px\" width='100%'>";
$data.="<button class='bdtag'></button>";
$data.="</a>";
$data.="<div class=\"meta\"><div
style=\"width:100%;overflow:hidden;height:20px;\">";
$data.="<a href='/details?id='$list->id'&key='$summer'
target='_blank' title='$list->video_name' class=\"movie-name\">$list-
>video_name</a>";
$data.="<span class=\"otherinfo\"> 5.0分</span></div><div
class=\"otherinfo\">类型:$name</div></div></div></div>";
}
$datav['1']=$data;
$datav['2']="<div>"."{$video->appends(['id' =>
$id,'key'=>$summer,'name'=>'page'])->links()}"."</div>";
return json_encode($datav);
}
HTML
<div id="data">
#foreach($video as $list)
<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 5px;">
<div class="movie-item">
<a style="position:relative;display:block;" title="{{$list-
>video_name}}" target="_blank" href="/details?id={{$list->id}}&key=
{{$status}}">
<img alt="{{$list->video_name}}" title="{{$list-
>video_name}}" src="{{asset('uploads')}}/{{$list->image_address}}"
height="230"
width="100%">
<button class="bdtag"></button>
</a>
<div class="meta">
<div style="width:100%;overflow:hidden;height:20px;"><a
href="/details?id={{$list->id}}&key={{$status}}" target="_blank" title="
{{$list-
>video_name}}" class="movie-name">{{$list->video_name}}</a><span
class="otherinfo"> 5.0分</span></div>
<div class="otherinfo">类型:{{$namme}}</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<div id="datav" style="background:#FFF;padding-left:15px;">
{{$video->appends(['id' => $page,'name'=>'page'])->links()}}
</div>
JavaScript
<select name="" required id="where_id" style="float: right;padding-
left:10px;border-left:8px;width: 90px;height: 30px;">
<option value="">Click screening</option>
<option value="1">Sort by play volume</option>
<option value="2">Ranking by points</option>
</select>
<input type="hidden" id="summer" value="{{$status}}">
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
}
});
});
</script>
It has been solved.js has been modified.
That is, the parameters carried by the URL through the Ajax request to the
back-end again, and then the back-end returned JSON data inserted into the
specified location again, probably this is the solution, my English is not
very good, please forgive me.
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
fun();
});
function fun() {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
});
}
function pagedata(){
$(".page-item a").click(function (){
var href=this.href;
this.href="javascript:void(0);";
var id=getQueryVariable('page',href);
var key=getQueryVariable('key',href);
var page=getQueryVariable('page',href);
$.ajax({
type: "get",
url: "accept",
dataType: 'json',
data: {id: id, key: key,page:page},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
})
})
}
// Intercept the parameter values carried by URL, such as page parameters
//and some custom parameters.
function getQueryVariable(name,url) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var data=url.slice(url.indexOf('?'));
var r =data.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>

Can't pass value in image tag

hi i am new in php i am tryig to pass value on image click through ajax call but i can not find value on click on that image
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type= "text/javascript">
function getItem()
{
var dataString = "category_id=" +$(".category_id").val();
alert(dataString);
alert(category_id);
$.ajax({
type: "GET",
url: "header.php",
data: dataString,
success:function(data)
{
$("#partyId").html(data);
}
});
}
</script>
</head>
my html code is like this here i am trying get that category id on click of that image but i can not get this id on click on image
<?php
$catarray = array();
$selectcat = "SELECT * FROM category";
$selectcatRes = mysql_query($selectcat);
while($row = mysql_fetch_assoc($selectcatRes))
{
$category_id = $row['category_id'];
$category_nm = $row['category_nm'];
$cat_img = $row['cat_img'];
echo'<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 category_id">
<a href="images/product_1.jpg" class="fh5co-figure to-animate image-popup category_id" onclick="getItem();">
<figure>
<img width="500" height="300" src="vraj/_cat_img/thumb/'.$row['cat_img'].'" onclick="getItem();" class="img-responsive category_id">
</figure>
<h3 class="fh5co-figure-lead">'.$category_nm.'</h3>
<p class="fh5co-figure-text"></p>
</a>
</div>';
}
?>
You haven't output the category id anywhere and so it's impossible to retrieve it.
Output it to a data attribute on the div, remove the other category_id classes and then change the click event to delegated like below (removing getItem). Using this you can get the category id when the anchor or image is clicked.
I also changed to pass an object as the ajax data because there is no need to concatenate your own data string.
jsFiddle demo
Updated PHP:
while($row = mysql_fetch_assoc($selectcatRes))
{
$category_id = $row['category_id'];
$category_nm = $row['category_nm'];
$cat_img = $row['cat_img'];
echo'<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 category_id" data-category_id="' . htmlspecialchars($category_id) . '">
<a href="images/product_1.jpg" class="fh5co-figure to-animate image-popup">
<figure>
<img width="500" height="300" src="vraj/_cat_img/thumb/'.$row['cat_img'].'" class="img-responsive">
</figure>
<h3 class="fh5co-figure-lead">'.$category_nm.'</h3>
<p class="fh5co-figure-text"></p>
</a>
</div>';
}
Updated JavaScript:
<script type= "text/javascript">
$(document).on('click', '.category_id a.image-popup, .category_id img.img-responsive', function(){
var category_id = $(this).closest('.category_id').data('category_id');
alert(category_id);
$.ajax({
type: "GET",
url: "header.php",
data: { category_id : category_id },
success:function(data)
{
$("#partyId").html(data);
}
});
return false;
});
</script>
There are a few things that don't work.
Your img tag has no value attribute
You never defined a variable called category_id
You have multiple elements with a class called category_id, you should use an id to have a unique selector.
I guess by value you mean the src attribute? This would be .attr('src') and not val(). val() is only used for input fields because they actually have a value attribute to store data.

Loop jQuery with PHP

I am trying to use Backstretch to show photos. The plugin requires this code to correspond with a button to display the photo.
$("#someId").click(function(e) {
e.preventDefault();
$.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});
I have a dynamic site built with PHP, I can loop through my photos to create the thumbnails and links, but I cant get the values into this code. This jQuery code needs to be looped through with the data from the photo PHP loop.
I tried using a .each() loop to grab the data, but still no luck.
Here is what I have so far
$(".id").each(function(){
var id;
var photo;
$(this).attr('id', function(i, val){
id = '#' + val;
$(".img").each(function(){
$(this).attr('src', function(i, val){
photo = val;
});
});
console.log(id)
console.log(photo)
$(id).click(function(e) {
e.preventDefault();
$.backstretch(photo);
});
});
});
Nothing seems, to work, any help would be appreciated.
HTML
<?php
$category = "urban";
$photos = Photo::find_all_category($category);
?>
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/jquery.backstretch.js"></script>
<div class="row urban">
<div class="col-lg-2">
<div class="row">
<?php foreach($photos as $photo): ?>
<a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a>
<?php endforeach; ?>
</div>
</div>
<div class="col-lg-10">
<div class="backstretch"></div>
</div>
</div>
I changed the format to
$(".id").each(function(){
var id;
var photo;
id = '#' + (this).getAttribute('id');
console.log(id);
photo = (this).getAttribute('src');
console.log(photo);
$(id).click(function(e) {
e.preventDefault();
$(".backstretch").backstretch(photo);
});
});
And also found I was including jQuery twice. Removed it and it works. Thank you!
You can simply target the classname:
$('.id').click(function(ev){
ev.preventDefault();
$(".backstretch").backstretch($(this).attr('src'));
});

get data on mousehover for different id

I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products
Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});
There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin
You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()
Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/

Attaching jQuery/AJAX scripts to elements added using window.setInterval(, 1000*60) method

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;">
<h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif"> Top 5 Android Apps for Travel </h1>
<!--<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 demo1</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>read...</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');
});
$(function() {
$(".vote").live('click', function () {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function (html) {
parent.find('span').html(html);
}
});
}
return false;
});
});
Have you considered jQuery's live() for this? It will attach the eventhandler to all current and future elements.

Categories