Need some simple Ajax help...

skcin7 · 12-27-2010, 02: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:

Code:

<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:

Code:

<?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, 03:02 AM

try this

Code:

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

or

Code:

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

skcin7 · 12-27-2010, 03: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, 03:10 AM

Code:

$("#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, 03:46 AM

try this, its really not how i would do this but it works

Code:

<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, 03:51 AM

Works, it does what I want it to, thank you!

skcin7 · 12-27-2010, 04: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?

Code:

<?php

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

echo $content;

?>

seco · 12-27-2010, 04:50 AM

Code:

data: "content=" + dataString,

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

Code:

			$.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