jQuery Help

[jimm]

I have some code which calls a php script and replaces an image. This works all well and good but Im looking to improve it but I just cant figure out how to get it to do what I want.

The current code is:

$(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(20000).html('<img  class="thumb" src="images/upg.png" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "upvote.php",
   data: dataString,
   cache: false,

   success: function(html)
   {

    parent.html(here);
  
  }  });
  
}
else
{

$(this).fadeIn(200).html('<img  class="thumb" src="images/downr.png" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "downvote.php",
   data: dataString,
   cache: false,

   success: function(html)
   {
       parent.html(html);
  }
   
 });


}
  
  
   
 

return false;
	});

});

The click part is:

<div class="thumb<?php echo $id; ?>">
<a href="" class="vote" id="<?php echo $id; ?>" name="up"><img  class="thumb" src="images/up.png" align="absmiddle"></a>
<a href="" class="vote" id="<?php echo $id; ?>" name="down"><img class="thumb"  src="images/down.png" align="absmiddle"></a></div>

Then the php part:

<?php
include("config.php");
$conn = mysql_connect($dbhost,$dbuser,$dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
$ip=$_SERVER['REMOTE_ADDR'];

if($_POST['id'])
{
$id=$_POST['id'];
$id = mysql_escape_String($id);
$ip_sql=mysql_query("select ip_add from logip where quo_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);

if($count==0)
{
$sql = "update quotes set vote=vote+1 where id='$id'";
mysql_query( $sql);
$sql_in = "insert into logip (quo_id_fk,ip_add) values ('$id','$ip')";
mysql_query( $sql_in);
//echo "<script>alert('Debug, ID: $id IP: $ip');</script>";
} 
else {
//maybe do something if $count !=0
}



echo '<img  class="thumb" src="images/up.png" align="absmiddle">';

}
?>

ideal situation would be for a click to remove the full content of the thumb$id div and let me replace it with code from the called script.

Any jQuery gurus?

 

[gareth_brown]

Do you have this code running online so I can see it running?

 

[jimm]

I have just put a cut down version on http://www.musicquotes.co.uk
You can currently only vote upwards.

 

[gareth_brown]

Don't want to sound stupid here but what are you missing or having issues with? The code presented above, kind of looks ok, although I am not a PHP developer. I'm purely .Net and have been programming JavaScript for 10 years so hopefully I will be able to help you out.

What are you trying to achieve? Do you have an example site that works the way you want yours to?

 

[jimm]

The issue is that when someone clicks say up in this part:

<div class="thumb<?php echo $id; ?>">
<a href="" class="vote" id="<?php echo $id; ?>" name="up"><img  class="thumb" src="images/up.png" align="absmiddle"></a>
<a href="" class="vote" id="<?php echo $id; ?>" name="down"><img class="thumb"  src="images/down.png" align="absmiddle"></a></div>

The code becomes:

<div class="thumb<?php echo $id; ?>">
<a href="" class="vote" id="<?php echo $id; ?>" name="down"><img class="thumb"  src="images/down.png" align="absmiddle"></a></div>

before being changed by the vote php.

Ideally i want the code to be changed to :

<div class="thumb<?php echo $id; ?>">
</div>

Allowing me to print the

echo '<img  class="thumb" src="images/up.png" align="absmiddle">';

(or what ever) from my php script.
Thats the bit Im struggling with.

 

[gareth_brown]

The easiest solution is to use the closest() method. http://api.jquery.com/closest/

$(".vote").click(function() {

var holdingDiv = $(this).closest("div");

//...the rest of your code

});

Now you have the div element you can do what ever you want with it.

 

[tifosi]

1. Change the response of the remote script to send back the success of the sql call, not a built up html tag:

<?php 
include("config.php"); 

$ret = array();

$conn = mysql_connect($dbhost,$dbuser,$dbpass) or die ('Error connecting to mysql'); 
mysql_select_db($dbname); 
$ip=$_SERVER['REMOTE_ADDR']; 

if($_POST['id']) 
{ 
$id=$_POST['id']; 
$id = mysql_escape_String($id); 
$ip_sql=mysql_query("select ip_add from logip where quo_id_fk='$id' and ip_add='$ip'"); 
$count=mysql_num_rows($ip_sql); 

if($count==0) { 
$sql = "update quotes set vote=vote+1 where id='$id'"; 
mysql_query( $sql); 
$sql_in = "insert into logip (quo_id_fk,ip_add) values ('$id','$ip')"; 
$result = mysql_query( $sql_in); 
//echo "<script>alert('Debug, ID: $id IP: $ip');</script>"; 
if (!$result) {
$ret['success'] = '-1';
$ret['msg'] = "<script>alert('Debug, ID: $id IP: $ip');</script>"; 
echo json_encode($ret); 
die();
} else {
...
}
}  
else { 
//more stuff with $ret & json encode
//maybe do something if $count !=0 
} 

$ret['success'] = 1;

}

2. add dataType to ajax call:

.ajax{
...
 dataType: "json"
}

3. Change parent=$(this); to parent=$(this).parent(); to set the parent var to be the parent div

2. add a before send part to the ajax call
...
beforeSend: function() {
$(parent).html('');
}

3. move the fade in to the success section of the ajax call
e.g

success: function(data)  {
res = parseInt(data.success);
 if (res == 1) {
$(this).fadeIn(200).html('<img  class="thumb" src="images/downr.png" align="absmiddle">'); 
  } else {
alert('Error:'+data.msg);
}
}

Hope that helps!