Updating div using ajax not working correctly

Sorry but I know something similar to this has already been posted. I have tried every single resource out there and did my research and I still couldn't find out what is wrong with my code. I am using a Ajax Post with php. Everything seems to be working fine except for the fact that the div is not reloading on submit. After I refresh the page what I posted came up. 开发者_如何学GoCan someone please tell me what I am doing wrong.

js code:

$(function() {
    $('.error').hide();
    $('input.text-input').css({
        backgroundColor: "#FFFFFF"
    });
    $('input.text-input').focus(function() {
        $(this).css({
            backgroundColor: "#C0DDFA"
        });
    });
    $('input.text-input').blur(function() {
        $(this).css({
            backgroundColor: "#FFFFFF"
        });
    });

    $(".button").click(function() {
        // validate and process form
        // first hide any error messages
        $('.error').hide();


        var email = $("input#email").val();
        if (email == "") {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
        }


        var dataString = '&email=' + email;
        //alert (dataString);return false;
        $.ajax({
            type: "POST",

            url: "../EdinburgCISD/Gorena/Gorena.php",
            data: dataString,
            success: function(data) {
                $("#email").val('');


                $("#div").fadeOut(1000);
                // Change the content of the message element
                $("#div").html(data);

                // Fade the element back in
                $("#div").fadeIn(1000);


            }
        });
        return false;
    });
});​

html code:

This is where I have my div.

 <div id="div"> <?php \\database select query ?> </div>

I am new to this website sorry if I posted something wrong...

---

did you get any error in console (firebug/developer tools) ?

otherwise you can try below

check with alert

 $.ajax({
  type: "POST",
  url: "../EdinburgCISD/Gorena/Gorena.php",
  data: dataString,   
  success: function(data) {
     alert(data);//what you get here? are you getting "object" in alert? then you need to specify property or mention dataType

     $("#email").val('');
     $("#div").fadeOut(1000);
     // Change the content of the message element
     $("#div").html(data);
    // Fade the element back in
       $("#div").fadeIn(1000);
     }
  });

---

modified your code a bit see the comments, you should specify dataType:html (see the ajax part).

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
  $(this).css({backgroundColor:"#C0DDFA"});
 });//focus ends

 $('input.text-input').blur(function(){
   $(this).css({backgroundColor:"#FFFFFF"});
 });//blur ends

  $(".button").click(function() {
    // validate and process form
    // first hide any error messages
    $('.error').hide();
    var email = $("input#email").val();
    if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }

    //var dataString = '&email=' + email; commented out 
     var dataString = email; //try insted this
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  dataType:'html', //or the appropiate type of data you are getting back
  url: "../EdinburgCISD/Gorena/Gorena.php",
  data: {email:dataString},     //in the php file do $email = $_POST['email'];
  async:false, //not a good practice but you can try with it and without it
  success: function(data) {
     $("#email").val('');
     $("#div").fadeOut(1000);
     // Change the content of the message element
     $("#div").html(data);
   // Fade the element back in
     $("#div").fadeIn(1000);
     }
    });  //ajax ends            
  return false;
 });//click ends    
});//document ready ends

update

see this fiddle you will get the idea http://jsfiddle.net/3nigma/LuCQw/ and the delay function is optional i have used it so that the effect is prominent