The AJAX request functions in the following way:
success: function(data) {
$('#totalvotes1').text(data);
}
However, I need it to work with unique IDs as follows:
success: function(data) {
$('#total_' + $(this).attr("id")). text(data);
}
Where
<span id="total_vote_up_<?php echo $mes_id; ?>">and
<a id="vote_up_<?php echo $mes_id1; ?>">I am unable to identify what is wrong with the code provided. If anyone has a simple solution using JSON, I would be willing to try that approach. I have no knowledge of how JSON works, so any help debugging this code would be greatly appreciated.
In general.js:
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var eData = $(this).attr("data-options");
var dataString = 'id='+ id + '&' + eData ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('');
$.ajax({
type: "POST",
url: "up.php",
data: dataString,
cache: false,
success: function(data) {
$('#total_' + $(this).attr("id")).text(data);
}
});
}
});
});
});
In index.php
<div id="main">
<div id="left">
vote_up_<?php echo $mes_id1; ?>
<span class='up'><a id="vote_up_<?php echo $mes_id1; ?>" class="vote" name="up" data-options="key1=<?php echo $mes_id1;?>&key2=<?php echo $mes_id2;?>&key3=<?php echo $totalvotes1;?>&key4=<?php echo $totalvotes2;?>"> <img src="up.png" alt="Down" /></a></span><br />
<span id="total_vote_up_<?php echo $mes_id1; ?>"><?php echo $totalvotes1; ?></span><br />
</div>
<div id="message">
<?php echo $message1; ?>
</div>
<div class="clearfix"></div>
</div>