I encountered a small, but ugly problem in our Symfony-driven project today: Unauthenticated AJAX requests, which f.e. may happen when the session timed out on the server, but the user hasn’t reloaded the page in the meantime, are also forwarded to the globally defined login module \/ action. This of course leaves the HTML page, which is constructed upon single HTML components, in a total mess. Ouch!<\/p>\n
So yeah, rendering the complete login mask HTML as partial to the client is stupid, but also relatively easy to fix:<\/p>\n
\r\npublic function executeLogin($request)\r\n{\r\n if ($request->isXmlHttpRequest())\r\n {\r\n \/\/ renderJSON is a custom function which json_encode's\r\n \/\/ the argument and sets an X-JSON header on response\r\n return $this->renderJSON(array(\"error\" =>\r\n \"Your session expired\"));\r\n }\r\n ...\r\n}\r\n<\/pre>\nThis was of course only half of the fix. I still had to handle this (and other) special JSON response on the browser’s side:<\/p>\n
\r\nnew Ajax.Request(\"mymodule\/myaction\", {\r\n onSuccess: function(response, json) {\r\n if (json.error)\r\n {\r\n \/\/ display the error\r\n alert(json.error);\r\n return;\r\n }\r\n \/\/ the actual callback functionality\r\n }\r\n}\r\n<\/pre>\nUh, anyone screams “spaghetti code”<\/a>? Yeah, you’re right. I quickly headed for a more general implementation, also since we can’t do that for a couple of symfony-specific prototype helpers anyways, like update_element_function<\/code>, whose Javascript code gets generated by Symfony dynamically. So how can this be generalized?<\/p>\nAjax.Responders to the rescue<\/h4>\n
Actually, prototype already contains some kind of “global hook-in” functionality for all Ajax requests triggered by the library: Ajax.Responders<\/a>.<\/p>\nWhile this seemed to support all common callbacks (among them onCreate, onSuccess, onFailure and onComplete), some testing showed though that f.e. the onComplete<\/code> callback was always called after<\/em> the specific AJAX request’s onComplete<\/code> callback, so this was pretty useless for me. After all, I also wanted to prevent<\/em> that the specific callback gets executed when I encountered an error…<\/p>\nAfter diving through prototype’s code for some hours I found a solution. Particularily helpful here is that prototype signals every created Ajax request to the onCreate<\/code> handler and gives the request and response object handling this request as arguments to it. Time to overwrite prototype’s responder code! Here is it:<\/p>\n\r\nAjax.Responders.register({\r\n onCreate: function(request) {\r\n var oldRespondToReadyState = request.respondToReadyState;\r\n request.respondToReadyState = function(readyState) {\r\n var state = Ajax.Request.Events[readyState];\r\n var response = new Ajax.Response(this);\r\n var json = response.headerJSON;\r\n \r\n if (state == 'Complete' && json && json.error)\r\n {\r\n alert(json.error);\r\n return;\r\n }\r\n oldRespondToReadyState.call(response.request, \r\n readyState);\r\n }\r\n }\r\n});\r\n<\/pre>\nAnother particularily useful piece of knowledge I gathered today to let this work is how Function.prototype.call<\/code> and Function.prototype.apply<\/code> work (both are available since Javascript 1.3).
\nBasically they allow the execution of a function in scope of the object given as first parameter (there is a nice introduction available here<\/a>).<\/p>\nIf you’ve ever wanted to “send an event to some object to make its listener fire” because the listener’s code depended on the fact that the this<\/code> reference points to the object the event was fired upon, you should now have a viable alternative:<\/p>\n\r\nEvent.observe(myObj, 'click', myHandler);\r\n\/\/ is call-wise equivalent to\r\nmyHandler.call(myObj);\r\n<\/pre>\nNo need to create custom mouse events and throw them around any longer… \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
I encountered a small, but ugly problem in our Symfony-driven project today: Unauthenticated AJAX requests, which f.e. may happen when the session timed out on the server, but the user hasn’t reloaded the page in the meantime, are also forwarded to the globally defined login module \/ action. This of course leaves the HTML page, … Continue reading Global AJAX responders in Prototype<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"class_list":["post-259","post","type-post","status-publish","format-standard","hentry","category-coding","category-work"],"_links":{"self":[{"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":20,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thomaskeller.biz\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}