Ajax Post PHP Div刷新

Question

It is me again. I am getting so frustrated with this code it is not even funny. It's not that I am wanting to post it again. It is just that now I understand the where the problem was in the code and wanted to see if you guys can help me figure the last part out.

Basically I am trying to refresh a div without reloading the entire page. It's killing me. Here is some more information on it:

here is my js file first

    $(function() { 

   $(".button").click(function() { 
  // validate and process form 
     // first hide any error messages  
         var email = $("input#email").val();   
         //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: "http://www.edshaer.com/EdinburgCISD/Gorena/Gorena.php", data: {email:dataString},

                //in the php file do $email = $_POST['email']; 



                  //not a good practice but you can try with it and without it 
                   success: function() {  


                $("#div").fadeOut($("#div").html());

                   $("#div").fadeIn($("#div").html());
                       $("#email").val('');  

                   // Change the content of the message element    

                      // Fade the element back in 
                         }    });
                            //ajax ends 
                                         return false; });
                                         //click ends   
                                          });//document ready ends

Now the problem that I am running into with this code is on the Ajax part. After placing the alert(), I have relized that if I use the function() like this:

success: function(data)

Then the alert came out blank. The reason behind it is that my URL is going to my php file, but my div that I am trying to refresh is on my html file. Meaning if I do this:

 success: function(data) {  
                $("#div").html(data)}

I am sending blank data because it's trying to get the div from my php file instead of my html file.

Now if I do this:

    $("#div").html()

Then that gives me the div that is in my html file.

By knowing what is going on now, Can you guys please help me???

Answer 1

This might be a problem relating to the response from the php script. Jquery doesn't always correctly render the Ajax response as html.

Setting dataType: html in the $.ajax({ ... }) call can help. Also setting header("Content-Type: text/html"); at the top of your php ajax script.

Answer 2

My dear you should generate some sort of html in your php file that you want to generate in your div. Then you will see that you are having some content in data in the success function. This is an easy approach. But there is also some other approach that is more efficient but it needs some sort of search. This is the implementation of Client Side Scripting . You can do this with the help of a jquery plugin jquote2 . I hope it will work for you.

Answer 3

You're using

$("#div").fadeOut($("#div").html());
$("#div").fadeIn($("#div").html());

Both are wrong, jQuery .fadeIn() and .fadeOut() arguments are either [duration,] [callback] or [duration,] [easing,] [callback]. None take HTML as input.

Try changing

$("#div").fadeOut($("#div").html());

to

$("#div").fadeOut();

and moving it outside the $.ajax call to hide the previously showed (if any) results before the post and also change

$("#div").fadeIn($("#div").html());

to

$("#div").html(result).fadeIn();

Also change

success: function()

to

success: function(result)

Hope it helps.