Yaz's Blog

Ajax.Updater’s default insert property is weird.

Ajax.Updater’s default insertion option is to replace the contents of the container… So, if I have:

<div id="test"></div>

And I run Ajax.Updater on $(‘test’), the results are:

<div id="test">
       <div id="test"></div>
</div>

Not what I was expecting. You expect it to “replace” itself, not add it as a child.

Prototype 1.5 to 1.6 upgrade nightmare.

The issue: in prototype 1.5, there are some Ajax.Request calls that return onComplete, the response, and then a second variable passed through with json from php. Prototype 1.5 handled this perfectly fine.

But on the new prototype (1.6.1), Ajax.Request doesn’t handle that second variable. So the there are some chunks of code not executing because the variable is null.

This has taken me 2 days to figure out. Two whole days of researching, reading random people’s code, reading documentation, and when none of those panned out, reading the prototype file side by side to find what changed.

So, on to the practical example of what happened.

For prototype 1.5..

// In the php file that handles the ajax request
if( $_POST['ajax_request'] ) {
        $arrSomeStuff['name'] = "John Smith";
        $arrSomeStuff['city'] = "Toronto";
        echo json_encode( $arrSomeStuff );
}
//and the javascript request: 
new Ajax.Request('some_url.php', {
       parameters  : { 'ajax_request' = 1 },
       onComplete: function(response, arrSomeStuff){
               $('name_div').update(arrSomeStuff.name);
       },
       onFailure: function(response){
               // handle errors
       }
});
// assumes all the other defauls from Ajax.Options

The above code, processed just fine… until Prototype 1.6, where you can’t do that because the second parameter is the response.headerJSON. Something completely unnecessarily for my use. I need it to be the response.responseJSON option!

So if you want to get this to work with 1.6, you have to send along the right header in the php file.. otherwise javascript will read responseJSON as null

// NEW: send the content type 
header('Content-type: application/json');
echo json_encode( $arrSomeStuff );
// And the javascript request has to be modified like so: 
onComplete: function(response){
	var arrSiteVariable = response.responseJSON;
	// do whatever
}

There is another method of course, you could just forget about sending the json header, and parse the response.responseText string, which contains everything sent back from the server. (This might be a good thing because responseJSON only works for “small ammounts of text”, the limit is not specified. So trial and error friends)

The reason for this change? Well, the Ajax class now wraps xmlHttpRequest in this: Ajax.Response class/object/whatever thing. For more info: http://www.prototypejs.org/api/ajax/response

Now if you excuse me I have to go shoot myself, as there are about 20 or so Ajax.Request per javascript files, and there are about 50ish files.