CODEWITHSUNDEEP
phpjavascriptjqueryajax
TrippedStackers
TrippedStackers

Reputation: 423

AJAX fade on submit

I have a quick question about this fade out div. I use facebox, and after the submit, and it shows an error it'll show this:

http://puu.sh/1uPnF

however I want that to fade away, after they've caught that message. On my AJAX handler for the submit form, this is the PHP code:

<?php
require_once('....');

$form_name = $_GET['form_name'];
$form_comment = $_GET['form_comment'];
$date = date('Y-n-j');
$ip = $_SERVER['REMOTE_ADDR'];


 if($form_name == '') {
    echo("<div class='alert alert-error-x'>Don't forget to enter a name, as we need to identify who's commenting on this article!</div>");

} else if($form_comment == '') {
    echo("<div class='alert alert-error-x'>Please do not leave the comment field blank, we want to know what you're saying!</div>");

} else {
mysql_query("INSERT INTO comment (id, articleid, name, comment, date, ip) VALUES (NULL,'{$_GET['id']}','{$form_name}','{$form_comment}','{$date}','{$ip}')");

    // output comment
    echo "<div class='alert alert-success-x'>Posted by <strong>$form_name</strong> on     <strong>{$date}</strong>$form_comment</div>";
}

?>

This is where the output of what would be submitted, on the article.php:

 <?php

$amount_get = mysql_query("SELECT * FROM comment WHERE articleid='" . mysql_real_escape_string($_GET['id']) . "'"); $comments = mysql_num_rows($amount_get);

$grab = mysql_query("SELECT * FROM comment WHERE articleid='" . mysql_real_escape_string($_GET['id']) . "'");

if (mysql_num_rows($grab)==0) {

    echo "<div class='alert alert-note-x'>Sorry, it looks like their are no comments to be displayed, check back later!</div>";
}

    while($row = mysql_fetch_array($grab)){

    ?>

 <div id="new_comment"></div>
 <div class="article-comment">
 Posted by <b><?php echo $row['name'] ?></b> on <b><?php echo $row['date'] ?></b>  
 <br />  
 <?php echo $row['comment'] ?>
 </div>
   <?php } ?>         
</div>
</body>
</html>

Now I tried adding the below code in the core.js file, which is located on my site at krissales.com

$(window).bind("load", function() { 
$('#new_comment').fadeOut(4000);
});

However it did not work. If you want to test the demo, then check it out at: http://www.krissales.com/#/media/30.This-is-a-new-article-for-Testing!

What is it that I'm doing wrong, please?

Thanks!

Upvotes: 0

Views: 300

Answers (1)

Gerrit Bertier
Gerrit Bertier

Reputation: 4221

If you're using AJAX, I suggest you use jquery's ajax method (http://api.jquery.com/jQuery.ajax/) to make the call to your PHP file.

Then, use the success callback function of that method to show the correct response. Hiding the response can then simply be done by fading out the div (with a delay if you want that).

if ($('#new_comment').length > 0)
{
    $('#new_comment').delay(4000).fadeOut();
}

You are now trying to fade out the message on window load, but since you're using AJAX, there is no page reload happening.

Hope this helps you!

Upvotes: 1

Related Questions