...

View Full Version : Need some simple Ajax help...



skcin7
12-27-2010, 03:54 AM
I am designing a feature on a website where a user clicks "Submit" and it posts a comment into a SQL database with ajax. When the Submit button is pressed, the text "OK" appears next to it if the post is successful. This all works fine, however, when you hit the Submit button a second time, It will say "OK" twice in a row (The first text isn't erased). I can't for the life of me figure out how to erase the text, so that it can only say "OK" once in a row.

Contents of add_comment.php:


<html>
<head>
<script type="text/javascript">
$(function(){
$(".comment_button").click(function() {

var dataString = $("#content").val();

$("#flash").fadeIn(400).html('Posting comment...');
$.ajax({
type: "POST",
url: "__Ajax-addcomment.php",
data: dataString,
cache: false,
success: function(html){
document.getElementById('content').value='';
$("#flash").after(html);
$("#flash").hide();
}
});

return false;
});
});
</script>
</head>
<body>
<form method="post" name="form" action="" style="padding:0px; margin:0px;">
<textarea name="content" id="content" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br />
<input type="submit" value="Post Comment" id="v" name="submit" class="comment_button"/> <span id="flash"></span>
</form>
</body>
</html>



Contents of __Ajax-addcomment.php:


<?php

$count = 0;

// just says OK for now... this is a stub
echo 'OK';

?>


Somebody please help, I imagine it is something simple, I am new with jQuery and learning. Thank you.

seco
12-27-2010, 04:02 AM
try this


$("#flash").html(html);

or


$("#flash").append(html);

skcin7
12-27-2010, 04:07 AM
I tried those already and they did not work. When I use those, the "OK" text does not appear at all.

skcin7
12-27-2010, 04:10 AM
$("#flash").after(html);


I think this is the problem right here, because it posts the "OK" after the identifier, instead of inside of it. So, you can't erase the text inside it for each consecutive click. However, I tried using html() and append() functions and they did not work.

seco
12-27-2010, 04:46 AM
try this, its really not how i would do this but it works

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".comment_button").click(function() {

var dataString = $("#content").val();
$("#flash").html("");
$("#wait").fadeIn(400).html('Posting comment...');
$.ajax({
type: "POST",
url: "__Ajax-addcomment.php",
data: dataString,
cache: false,
success: function(html){
document.getElementById('content').value='';
$("#wait").hide();
$("#flash").append(html);
}
});

return false;
});
});
</script>
</head>
<body>
<form method="post" name="form" action="" style="padding:0px; margin:0px;">
<textarea name="content" id="content" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br />
<input type="submit" value="Post Comment" id="v" name="submit" class="comment_button"/> <span id="wait"></span><span id="flash"></span>
</form>
</body>
</html>

skcin7
12-27-2010, 04:51 AM
Works, it does what I want it to, thank you!

skcin7
12-27-2010, 05:40 AM
Since we are on the topic, I am having another issue with this. The POST variables in __Ajax-addcomment.php are not loading for some reason.

This does nothing when it should output the contents of $content. The POST variables are not being sent. Any ideas why?



<?php

// this does nothing.
$content = $_POST['content'];

echo $content;

?>

seco
12-27-2010, 05:50 AM
data: "content=" + dataString,

you need to pass a variable name along with the variable.


$.ajax({
type: "POST",
url: "__Ajax-addcomment.php",
data: "content=" + dataString,
cache: false,
success: function(html){
$("#content").val("Enter your comment...");
$("#wait").hide();
$("#flash").append(html);
}
});

I also added to the textarea, on success add the original value



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum