Ajax Response Empty?

[quben]

Hey,

i hope this post belongs here and not in PHP help..

 

im trying to make an Ajax request to a PHP page, and display the response which is HTML, into an existing DIV.

 

this is the JS

      var   newPic = '1';
      newPic = $.ajax({
           url: 'picChange.php',
           type: 'POST',
           data: {picID: '200' , to: 'prev'},
           success: function (){
              alert(this.responseText); //for debug
              
           }
           }).responseText;
      document.getElementById('pola').innerHTML = newPic;

 

and PHP:

<?php

include("config.php");
include("php.functions.php");

$picID=$_POST['picID'];
$to=$_POST['to'];

if ($to=='prev'){
   $picArray= getPrevPic($picID);
} else {
   $picArray= getNextPic($picID);
}

$response = "       <div id='someID'> HTML_CONTENT </div> ";
                  ";

echo $response;

?>

 

i can see that the PHP give the HTML in response, but Ajax.textResponse is still "undefined"

 

any advice?

thanks

[F1Fan]

What are you using for your JS? That's not standard AJAX stuff.

[seventheyejosh]

That is jquery. And your success : function callback needs a parameter of some sort.

 

http://api.jquery.com/jQuery.ajax/

 

$.ajax({
    type:"POST",
    url:"picChange.php",
    data:{picId: "200", to: "prev"},
    success:function(msg){
    
        $("#pola").html(msg);
    
    }
});

[quben]

oh man, thank you so much!

now i dont have to use that getElementByBlahBlah..

 

although, now since its working, it introduces a new problem..

i also have animations and other events connected to divs inside the HTML content i am replacing with this Ajax request, and after i get the new content, they dont work.

 

i guess it has something to do with that fact that its only applied to the DOM after all JS event/ handles stuff has been done..

[seventheyejosh]

Ya basically you'll have to rebind the events. One thing to note though, is that sometimes the success callback can be a wee bit jenky, so if you don't delay your binding it can 'miss'.

 

$.ajax({
    type:"POST",
    url:"picChange.php",
    data:{picId: "200", to: "prev"},
    success:function(msg){
   
        $("#pola").html(msg);
        setTimeout(function(){
               bindStuff();
        },1000); // 1000 = 1 second
    }
});

function bindStuff(){

     $("#someId").animate(); // or something

}//end function

 

And yes, the $() is amazing. $("#someId") == document.getElementById('someId')

 

This page is definitely worthy of an hour of reading, if not just to know the selectors exist:  http://api.jquery.com/category/selectors/

[quben]

cool, this works for the rest of the animations i wanted to run after the ajax, but...

inside my html content there is also more divs which are suppose to be clickable [for example, the same div id which ran this whole thing to begin with..

 

 

$('#clickMe').click(function(){
  $('#pola').animate();
  newPic = $.ajax ({
    ...
    ...
    ...
   success: function (newPic){
				$('#pola').html(newPic);
				setTimeout(function(){
					bindStuff();}, 50);
			  
		  }
		  }).responseText;

});				  
function bindStuff(){				  
	$('#inside_pola').fadeIn(1);
	$('#inside_pola').animate({
					   left:'-=600',
					   opacity:1,
					   } ,600);
}

 

in this example, i wont be able to click '#clickMe' again..

[seventheyejosh]

You'll have to rebind anything that gets overwritten. And you may wanna up the 50 a wee bit, 50 miliseconds is still cutting it close.

[quben]

yeah ill test it to see what value i can go with, right now its on my own server so its fast enough..

 

but is there a way to "just rebind" the functions? i mean, the animation inside the bindStuff() is cool because it happens right away, but how will i rebind a click event, or specifically, that same click event which started it..?

[seventheyejosh]

Like this? And why are you doing newPic=$.ajax ? It is seemingly unnecessary.

 

$('#clickMe').click(function(){
  
  runAjax();

});

function runAjax(){

    $('#pola').animate();
    
    $.ajax({
        ...
        ...
        ...
        success: function (newPic){
            
            $('#pola').html(newPic);
            
            setTimeout(function(){
               
               bindStuff();
               
            }, 50);
                 
        }
    });
           
}

function bindStuff(){
    
    $('#inside_pola').fadeIn(1);
    $('#inside_pola').animate({
        left:'-=600',
        opacity:1
    },600);
        
    $('#clickMe').click(function(){ // rebind first one
    
        runAjax();
    
    });
}

[quben]

wow isnt that messy?

i would also have to put every function i have [which is in that content] into every other function...

 

also, i think we can also shorten it like this:

 

$('#clickMe').click(function(){

     $runAjax();
}

function runAjax() {
    $('#pola').animate();
   
    $.ajax({
        ...
        ...
        ...
        success: function (newPic){
            $('#pola').html(newPic);

            setTimeout(function(){
               
                   $('#inside_pola').fadeIn(1);
                   $('#inside_pola').animate({
                        left:'-=600',
                        opacity:1
                     },600);
            
                   $('#clickMe').click(function(){ // rebind first one
                         runAjax();
                   });
             }, 50);
                 
        }
    });
           
}

 

 

 

 

AHA

i found a better solution

jQuery Live Plugin.

 

it looks like this:

$('#clickMe').live('click',function(){
     //do it all
});

and it hangs on forever..

[seventheyejosh]

All you would have to do is add more stuff to the bindStuff(); function call. And I don't see why it is messy, You need the first chunk to bind the kickoff, the ajax function to run ajax and call callback function, and the final function to bind the new html stuff. If 2.5 functions intimidate you, coding may not be your thing...

 

If you saw some of these thousands of lines long class files I work with everyday... hoo boy...

[quben]

actually, coding isnt really my thing, i just want to get this website running!

but about this function, i do think its messy because if i have call to 5 other functions in that overwritten HTML, and  each of those functions contains around 20 lines of code, than i would have to add over 100 lines of code to each function....

 

 

[seventheyejosh]

Well, lets step back. Why are you overwriting the entire html? What is changing?

[quben]

well its not the entire html, its a container, in which i have

a picture,

a containter and some design

links for nextPic | prevPic

 

and all of this is inside another div, so im just pooring it all in there..

 

im returning the pic path, a few names, and i havent gotten to it yet, but probably the next and prev picIDs as well [not sure how to do it since its not really a link.. its running the Ajax request].

 

 

for the binding i think the live() thing will do it, im gonna work on it tonight and see how it goes..

[seventheyejosh]

Another option is, instead of doing the $("#id").click(function(){}); binding, you can just do <something onclick="function();"> binding in your returned html. That would alleviate a lot of the repeat js problem.

[quben]

interesting, my links arent actually a tag, but i can make them so..

yeah, i think that might be the best solution..