Обновление div с использованием ajax работает неправильно

Question

Извините, но я знаю, что нечто подобное уже было опубликовано. Я перепробовал каждый ресурс там и провел свое исследование, и я до сих пор не могу выяснить, что не так с моим кодом. Я использую Ajax Post с php. Кажется, все работает нормально, за исключением того факта, что div не перезагружается при отправке. После того, как я обновил страницу, появилось то, что я написал. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно.

JS код:

$(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-код:

Здесь у меня есть мой div.

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

Я новичок в этом сайте, извините, если я написал что-то не так ...

Answer 1

Вы получили какую-либо ошибку в консоли (firebug / tools)?

в противном случае вы можете попробовать ниже

проверить с предупреждением

 $.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);
     }
  });

Answer 2

немного изменил ваш код, смотрите комментарии, вы должны указать dataType:html (см. Часть ajax).

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

см. Эту скрипкуВы получите идею http://jsfiddle.net/3nigma/LuCQw/, и функция задержки не является обязательной, я использовал ее, чтобы эффект был заметным