Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts

    Need some simple Ajax help...

    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.
    Last edited by skcin7; 12-27-2010 at 03:57 AM.

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    try this

    Code:
    $("#flash").html(html);
    or

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

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    I tried those already and they did not work. When I use those, the "OK" text does not appear at all.

  • #4
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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.

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    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>

  • Users who have thanked seco for this post:

    skcin7 (12-27-2010)

  • #6
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    Works, it does what I want it to, thank you!

  • #7
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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;
    
    ?>
    Last edited by skcin7; 12-27-2010 at 05:42 AM.

  • #8
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    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
    Last edited by seco; 12-27-2010 at 05:53 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •