I have a following data where I am showing data from database. When i click Comment a dialog appear, there i need to show data in modal from db. but for getting data from db i need msg_id in modal form.
<?php
$msg_id = $data['message_id'];
?>
<a data-toggle="modal" href="msg_id=<?php echo $msg_id; ?>#example" class="link_comment">Comment</a>
So here I want to pass msg_id to jquery modal form, where i can get data from db on the base of msg_id for that specific message and show it in modal box.
<div id="example" class="modal" style="display: none; ">
Your Message id : <?php echo $msg_id; ?>
</div>
So how can I pass $msg_id into jquery modal form.
php
<?php
$msg_id = 123; // testing mode
?>
html
<a data-toggle="modal" href="msg_id=<?php echo $msg_id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your Message id : <span class="msg_id">?</span>
</div>
<script type="text/javascript">
$('a.link_comment').click(function(event) {
event.preventDefault();
var a = $(this);
var msg_id = 'fetched id'; // parse msg_id from a.attr('href')
$('div.' + a.attr('data-toggle')).show().find('span.msg_id').text( msg_id );
});
</script>
Related
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
i am working on website with buttons each button fire up a bootstrap modal contain data from mysql database i pass a variable from the jquery that fire up the model into a mysql query inside the modal the problam is the php variable cannot get the data send it from the jquery any hints please ?!
i am passing data through jquery post to ajax.php file
the modal code
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<span id="codeElem"></span>
<?php
$resultHead = mysqli_query($con2,"SELECT * FROM coops WHERE Code = $getCode ");// WHERE Code IN ('".$codeArrayStr."')
?>
<?php
$i=0;
$row3 = mysqli_fetch_array($resultHead);
?>
<h4 class="modal-title"><?=$row3['CoopName'];?></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<?php
$result = mysqli_query($con,"SELECT DISTINCT * FROM reports WHERE host = $getCode GROUP BY host DESC");
?>
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<div class="card card-figure has-hoverable">
<figure class="figure">
<img class="img-fluid" src="http://www.iroof.tv/screenshots/<?=$row['screenshot'];?>" alt="Card image cap">
<figcaption class="figure-caption">
<h6 class="figure-title"><?=$row['host'];?></h6>
<p class="text-muted mb-0"> <?=$row['timestamp'];?> </p>
<?php
// Assign JSON encoded string to a PHP variable
$statusJson = $row['status'];
// Decode JSON data into PHP associative array format
$arr = json_decode($statusJson, true);
// Call the function and print all the values
// $result2 = printValues($arr);
echo "<hr>";
echo "<h3> Player </h3>";
// Print a single value
echo "Status: ".$arr["player"]["status"] . "<br>";
echo $arr["player"]["filename"] . "<br>";
echo "<hr>";
echo "<h3> Graphics </h3>";
echo "Display: ".$arr["video"]["display"] . "<br>";
echo "Resolution: ".$arr["video"]["resolution"] . "<br>";
echo "Colors: ".$arr["video"]["colors"] . "<br>";
echo "<hr>";
echo "<h3> System </h3>";
echo "CPU: ".$arr["cpu"] . "<br>";
echo "Ram: ".$arr["ram"] . "<br>";
//echo "Temprature: ".$arr["temperature"] . "<br>";
echo "Fan: ".$arr["fan"] . "<br>";
?>
</figcaption>
</figure>
</div>
<?php $i++;
}
?>
</div>
<!-- Modal footer
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>-->
</div>
the jquery script
<script>
$(document).ready(
function() {
setInterval(function() {
$('.card');
}, 5000); //Delay here = 5 seconds
var gen;
$(".btn").click(function(){
gen = $(this).attr("data-code");
//$.post("ajax.php", {"code": gen},function(data){console.log(data);});
});
$('#myModal').on('shown.bs.modal', function () {
$.post("ajax.php", {"code": gen},function(data){console.log(data);});
//var phpCode = "<? $getCode = $_POST["code"]; ?>";
//$('#codeElem').html(phpCode);
})
});
</script>
ajax.php file
<?php
if(isset($_POST['code']) && isset($_POST['code'])){
//$_SESSION["code"] = $_POST["code"];
$_SESSION['header'] = $_POST['code'];
$getCode = $_POST["code"];
echo $_SESSION['header'];
}
?>
i expect the variable $getCode to get the code from jquery to complete the mysql query inside the modal :
$resultHead = mysqli_query($con2,"SELECT * FROM coops WHERE Code = $getCode");
I dont think its possible to post variables to a modal, I didnt see example like that when I was searching for popup modal login.
guess you need an action page to forvard infos to modal.
This is the solution to post variables:
Change variables to your needs..
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
var post_id =$("#mail-id").val();
var name =$("#mail-name").val();
var email =$("#mail-email").val();
var message =$("#mail-message").val();
var type =$("#mail-type").val();
var captcha_code =$("#captcha_code").val();
var submit =$("#mail-submit").val();
$(".form-message").load("heads/comment.php",{
post_id: post_id,
name: name,
email: email,
message: message,
type: type,
captcha_code: captcha_code,
submit: submit
});
});
});
you probably need some thing like this to show variables in popup
<p class="form-message"></p>
Or you can check Bootstrap modal table :
Here
i want to get images that i fetched from database in my page and show them again in div with id test by ajax i want to show fetched datas again in div with test id when i click on button with addCart class . i think i haveto get value of button that i set it to ids of products in my datbase . and my problem is how can i get id s in ajax code?
$(document).ready(function(){
$(".addCart").click(function(){
$.post(".addCart.val()",function(data){
$("#test").html(data).show();
});
});
});
<div id="test" style="background-color: grey"></div>
<?php while ($row = mysqli_fetch_array($products)):?>
<div class="span3">
<div class="product">
<div class="product-img">
<div class="picture">
<img src="images/<?php echo $row['image'] ?>" alt="" width="540" height="374" />
<div class="img-overlay">
توضیحات بیشتر
<button value="<?php echo $row['id']?>" class="btn buy btn-danger addCart">اضافه به سبد خرید</button>
</div>
</div>
</div>
<div class="main-titles no-margin">
<h4 class="title"><?php echo $row['price'] ?></h4>
<!--<h5 class="no-margin">محصول ویژه 434</h5>-->
</div>
<p class="desc"><?php echo $row['name']?></p>
<p class="center-align stars">
<span class="icon-star stars-clr"></span>
<span class="icon-star stars-clr"></span>
<span class="icon-star"></span>
<span class="icon-star"></span>
<span class="icon-star"></span>
</p>
</div>
</div> <!-- /product -->
<?php endwhile;?>
$(".addCart").click(function(event){
var id = event.target.val();
});
This will get an value of your button element. But is this id is a valid url to make a ajax call? I dont think so. Please checkout Jquery Docs before returning to work on this part of functionality
in your code you are not passing correct value to php file
please do correction in your code
$(document).ready(function(){
$(".addCart").click(function(){
var jq = $(this);
var cart_id = jq.val(); /* get cart value */
$.post("ajax.php",{cart_id:cart_id},function(data){
$("#test").html(data).show();
});
});
});
and fetch cart_id in php ajax.php file like this
<?php
if(isset($_POST['cart_id'])){
/* put your code here */
}
?>
I am printing out pictures and names (in a grid view). The user will be able to click on the picture or the name, and this will open up a modal with the title of the picture/name (which will be the same) which was clicked.
<?php
$i = 0;
while ($row = mysqli_fetch_assoc($data)) {
print '<li>';
print '<a class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>';
print '<a class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>';
print '</li>';
}
?>
When the image/name is clicked, how do I store the image path or the name that was clicked to a variable and send it to php so I can run a query and get more information (based on the click) to populate the modal?
I was reading this other post: How to pass jQuery variables to PHP variable?
But it is only for a single case, how would I pass variables which are printed out using a while loop?
WOuld the data-id tag of modals be useful here?
Basically, what you need to do is this:
Load your images onto the page with your php code
At the same time, load the buttons/links that select each picture
For each button, add a data attribute and store the database row id for each image record in that data attribute (these buttons are all also setup to open the same modal)
When the user clicks the button, get the stored row id from the clicked button
Make an ajax call to another php page passing in the row id
On the other php page, use the id to look up the record and return all of the fields
Back on the first page, when the ajax call returns, use the returned data to fill in the modal's content
Here is a working example
Also note: depending on the additional information you are getting from the database, you might just store all of the information in data attributes of the button when the first page loads and avoid the ajax call all together. Of course, if you're getting a lot of data like pdf files or something, that might not be practical.
Full code for: imagesfromdb.php (the main page):
<?php
// remove below for production
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
// remove above for production
// change these to your own database details
$db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$sql = 'SELECT id, url FROM imagebase ORDER BY id';
$stmt = $db->prepare($sql);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
$imgGroups=array();
// check for errors
if($stmt->errorCode() == 0) {
// no errors
foreach($rows as $row) {
$id = $row['id'];
$url= $row['url'];
$imgGrp ='<div class="col-sm-4">'.
'<div class="row">'.
'<div class="col-sm-12 text-center"><img src="'.$url.'" width="100" height="100" alt=""/></div>'.
'<div class="col-sm-12 text-center">'. //note the addition of the "data-row-id" attribute below
'<button type="button" class="btn btn-primary get-data" data-row-id="'.$id.'" data-toggle="modal" href="#my-modal">Select image</button>'.
'</div>'.
'</div>'.
'</div>';
array_push($imgGroups,$imgGrp);
}
} else {
// had errors
$errors = $stmt->errorInfo();
return $errors[2];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Images From Database Test</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
img {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<div class="row text-center" >
<h1>Image From DB Test</h1>
</div>
<div class="row" >
<div class="col-sm-12" id="image-groups"> <?php echo join('',$imgGroups); ?> </div>
</div>
<!-- Modal 7 (Ajax Modal)-->
<div class="modal fade" id="my-modal" >
<div class="modal-dialog">
<div class="modal-content modal-shadow">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="my-modal-title" >Help</h4>
</div>
<div class="modal-body">
<div class="col-sm-12 text-center"><img src="" class="image" id="my-modal-image" width="100" height="100" alt=""/></div>
<div class="col-sm-12 text-center description" id="my-modal-description"> </div>
</div>
<div class="modal-footer">
<button type="button" id="" class="btn btn-default reload" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
// when the user clicks on one of the buttons, get the id from the clicked button
// then make an ajax call to another php page
$('#image-groups').on('click', '.get-data', function(){
var id = $(this).data('row-id');
var sendVars = 'id='+encodeURIComponent(id);
$.ajax({
type: "POST",
url: "getimagedetails.php",
data: sendVars,
success: function(rtnData) {
rtnData = $.parseJSON(rtnData)
$('#my-modal-title').html(rtnData.title);
$('#my-modal-image').attr('src', rtnData.url);
$('#my-modal-description').html(rtnData.description);
}
});
});
});
</script>
</body>
</html>
Full code for: getimagedetails.php (the page we make the ajax call to)
<?php
// remove below for production
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
// remove above for production
// change these to your own database details
$db = new PDO('mysql:host=sotestdbuser.db.10125908.hostedresource.com;dbname=sotestdbuser;charset=utf8', 'sotestdbuser', 'Sotestuser398!');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
if(isset($_POST['id'])){
$sql = 'SELECT url, title, description FROM imagebase WHERE id=? LIMIT 1'; // "?"s here will get replaced with the array elements belowlinkslinks
$stmt = $db->prepare($sql);
$stmt->execute(array($_POST['id'])); // these array elements will replace the above "?"s in this same order
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
// check for errors
if($stmt->errorCode() == 0) {
// no errors
$rowdata = 'test';
foreach($rows as $row) {
$rowdata = array('url' =>$row['url'], 'title' =>$row['title'], 'description' =>$row['description']);
}
echo json_encode($rowdata);
} else {
// had errors
$errors = $stmt->errorInfo();
echo $errors[2];
}
}
?>
Try to make an ajax call onClick of the element
<?php
$i = 0;
while ($row = mysqli_fetch_assoc($data)) {
print '<li>';
print '<a class="pass_href btn btn-default" data-toggle="modal" data-href="test/path/to-the-image.jpg" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>';
print '<a class="pass_href btn btn-default" data-toggle="modal" data-href="test/path/to-the-image-2.jpg" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>';
print '</li>';
}
?>
Now the jQuery
$(function(){
$('.pass_href').click(function(){
var href = $(this).attr('data-href');
$.post( "test.php", { href:href } );
});
});
For showing details information on the modal you need to post a form using ajax.Here i am giving you a solution.First add a data-id attribute in your both buttons and also call a function in onclick event.
print '<li>';
print '<a class="btn btn-default" data-id='.$row['id'].' onclick="show(this);" data-toggle="modal" data-target=".bs-example-modal-lg"><img src="'.$row["image"].'" /></a><br>';
print '<a class="btn btn-default" data-id='.$row['id'].' onclick="show(this);" data-toggle="modal" data-target=".bs-example-modal-lg"><h4>'.$row['name'].'</h4></a>';
print '</li>';
and then post a form using ajax on that function call.like-
<script>
function show(x){
var id = $(x).data('id');
$.ajax({
type: "POST",
url: "your/url",
data: { id: id},
success: function(data) {
//parse your json data
var obj = $.parseJSON(data);
if (obj != null){
//append/show your data in your modal body
}
}
});
}
</script>
and in your php function receive your posted id and find details for that id from the database or anywhere. and then return your data as json type using php json_encode() function.
Hello guys I'm trying to delete a record/row from my table using a modal delete confirmation. This is what I've tried so far:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<table class="table table-bordered">
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr>
<td><a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a></td>
<td><?php echo $desc; ?></td>
<td><a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white">
</i>
</a></td>
<td><a href="#<?php echo $project; ?>"
id="<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i></a></td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
But the problem is, when I am about to delete the last row the one that gets deleted is the first row. Why is it like that? Any ideas? Help is much appreciated. Thanks.
The problem lies in the modal generation and passing the $project value.
You are using a loop as
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
And inside the above loop you are generating the modals so basically you will have many modals which are equal to the num of rows in the query.
Now all of them are having the same "id" i.e. "dialog-example" and once you click on the delete it pop ups the first modal from the DOM and is deleting wrong data.
Solution
For each modal you give the id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the blow code
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
Get the id of the element using attr("id") and append this at the end of
"dialog-example_"+{id you received}
The same thing you need to do for the hide modal as well.
UPDATE ON HOW TO DO IT
Give the modal div id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the click function to as
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
Change
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
to
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="<?php echo $project ;?>">Yes<a>
AND finally
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
to
$(".btn btn-danger").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('hide');
});
because you generate modal for every row this is wrong !
and show modal(first modal show) this is wrong!(this delete first row)
create one modal and set parameter with jquery e.g
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
$("#dialog-example #btn-delete").attr('href','delete-project.php?code='+$(this).attr('data-id'));
});
good luck
On topic
Problem is you have multiple modals. But select it on 1 id. So jQuery will select the first value.
A solution would be to put the delete url in an hidden input field. Then when the user clicks the open delete modal you select the url and put it in the a tag.
Example time
JavaScript Part
$(function(){
$(".btn-show-modal").click(function(e){
// put the right url in the delete
$("#dialog-example .delete-url").attr('href', $(this).attr('data-delete-url');
$("#dialog-example").modal('show');
return e.preventDefault();
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
PHP part
I assume $stmt is prepared etc
<ul>
<? foreach($stmt->fetchAll() as $record) : ?>
<li>
delete
</li>
<? endforeach; ?>
</ul>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a class="delete-url btn btn-danger">Yes<a>
</div>
</div>
Code explaind
It is not handy to put an bootstrap modal in an foreach/for/while unless you change the id. But then again lot of duplicate code.
What the code does it changes the delete-url on the fly depending on which a the user clicked
Off topic
I highly recommend using the foreach for your iteration of the data records instead of a for loop.
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){ /** code **/}
would be
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
foreach($stmt2->fetchAll() as $record){}
Because when you open the modal, it open the first #dialog-example div.
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$(this).parent().find("#dialog-example").modal('show');
});
I am using Jquery RateIt plugin with the view more button.
so In my project i am showing restaurant rating with these plugin by default i am displaying first 5 rating.Then after 5 records i am displaying other content through ajax so in the content loded through ajax rating is not being showd i am using readonly mode..If anyone can help thanks in advance
foreach($list_review as $row): ?>
<div class="user_reviews_data">
<div class="width-20 float-left">
<span class="padleft-10"><?php echo $row->User; ?> </span>
<br/>
<span class="padleft-10">
**<div class="rateit" data-rateit-value="<?php echo $row->Rating;?>" data-rateit-ispreset="true" data-rateit-readonly="true"></div>**
</span>
<div class="muted padleft-10 float-left"><small><?php echo date('dS M Y' ,strtotime($row->CreatedDate)); ?></small></div>
</div>
<div class="width-80 float-left"><?php echo $row->Feedback;?></div>
<span class="report_span">Report this Feedback <img src="<?php echo base_url();?>themes/images/FLAG_GREY.png"></span>
</div>
<?php
$msg_id=$row->Id;
endforeach;?>
</div>
<div id="more<?php echo $msg_id; ?>" class="btn-container center_text morebox">
View More
</div>
Now code of jquery
/*view More Button*/
$('.more').live("click",function()
{
var this_tag = $(this);
var ID = $(this).attr("id");
if(ID)
{
$.post(siteUrl+"ajax/ajax_more",{lastmsg:ID,restid:$(this_tag).data("restid")},function(html){
$("ol#updates").append(html);
$("#more"+ID).remove();// removing old more button
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
I am adding content on view more button click through ajax ajax code is same as above code
I am Using this plugin http://www.radioactivethinking.com/rateit/example/example.htm
In the $.post success handler you should invoke rateit again via JavaScript after you append the HTML like so:
$("ol#updates").append(html);
$(".rateit").rateit();
Replace $(this_tag) with either this_tag or $(this) in your ajax call.
You should use var this_tag = this; instead of using var this_tag = $(this);
OR try var $(this_tag) = $(this);