TypeError: invalid ‘in’ operand obj

A weird JavaScript error that you may face when using Dojo Ajax for retrieving some JSON data from the server to render on the browser. This error happens because Dojo is unable to process the resulted JSON data which is the case when handleAs attribute is set to “text”.

In order to fix this error, set handleAs attribute to “json” instead of “text” as shown below in the example:

xhr.get({
	url: '/SomeServlet',
	handleAs: "json",
	timeout: 3000,
	load: function(data) { /* Success Handling */ },
	error: function(err) { /* Failure Handling */ }
});

This is my today’s two cent advice.

Overriding Android back button behavior in Apache Cordova

If you are using Apache Cordova for building a native application on mobiles using HTML, CSS, and JavaScript. You may need to override the default behavior of the back button on the Android mobiles to implement your application specific back button behavior.

In order to do this, you can register an event handler on the "backbutton" event on the document object but before you do this, you need to make sure that the device is ready using the "deviceready" event as follows.

// In the initialization ...
document.addEventListener("deviceready", deviceReadyHandler, false);  


function deviceReadyHandler () {
    document.addEventListener("backbutton", backButtonHandler, false);
}


function backButtonHandler(e) {
    //Here implement the back button handler
}

What the JavaScript Unit Testing book covers?


The JavaScript Unit Testing book is a comprehensive practical guide that illustrates in details how to efficiently perform and automate JavaScript testing for web applications using the most popular JavaScript unit testing frameworks.

The book starts by explaining the concept of JavaScript unit testing and by exploring the bits of an interactive Ajax web application. Throughout the book chapters, the JavaScript part of the web application is tested using popular JavaScript unit testing frameworks (Jasmine, YUITest, QUnit, and JsTestDriver). The book illustrates how to generate JavaScript test reports, how to automate running the tests in the build and the continuous integration environments, and how to make all of the mentioned JavaScript unit testing frameworks work together in order to test the web applications in the most efficient way.

After reading this book, you will learn everything you need to know in order to make efficient JavaScript tests for the web applications. You will learn how to generate test and code coverage reports, how to automate running the JavaScript tests, and the bits of the JavaScript testing by following the book practical hands-on detailed examples.

You can order the book from: http://www.amazon.com/dp/1782160620/.

Finally, I would like to thank all of the persons that worked with me in order to produce this book (Acquisition Editor, Commissioning Editors, Technical Editors, Copy Editors, Project Coordinator, Proofreaders, Graphics Designers, Production Coordinator) and certainly the technical reviewer of this book Allan Lykke Christensen.

Ajax Error Handling

In Order to return an Ajax error from the server, you need to set the response status to 500, For example if you are working with Java Servlets, your Java Servlet will return the error as follows:

public class AjaxServlet extends HttpServlet {

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		
		try {
			// Do whatever you want to do
		} catch (Exception exception) {
			response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
	                response.getWriter().write(exception.getMessage());
	                response.flushBuffer();			
		} finally {
			// Clean up ...
		}
	}
	
}

In the client side, you can get the server error message (after checking that the readyState of the XML HTTP Request (XHR) is 4, and the status of the XHR object is 500) from the responseText of the XHR object.

If you are using a JavaScript framework (the Dojo for example): In the Dojo xhrPost API, in order to get the error message, you can get it from the ioArgs parameter of the error callback as follows:

dojo.xhrPost( {
	url: 'service URL',
	content: {},
	handleAs: 'text',
	load: function(response, ioArgs) {
		// Do something
	},
	error: function(response, ioArgs) {
		alert("Failed while doing the operation: " + ioArgs.xhr.response);
	}
});

Using the ioArgs.xhr.response, you can get the full error message from the server response, you can also get the status code from the ioArgs.xhr.status.

I wish that this advice can be useful for you in order to make Ajax error handling correctly.

“Ajax Status Zero” Resolution

“Ajax status is zero” is one of the hardest errors to debug especially when the Ajax readyState is 4. If we looked at the XMLHTTPRequest documentation, we will find that the readyState attribute can have one of the following values:

  • 0 “The object has been constructed.”
  • 1 “The open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using the send() method.”
  • 2 “All redirects (if any) have been followed and all HTTP headers of the final response have been received. Several response members of the object are now available.”
  • 3 “The response entity body is being received.”
  • 4 “The data transfer has been completed.”

This means that although the data transfer is completed, the status is not OK (not 200).

After some hours of investigation, I found that the XHR (XMLHTTPRequest) zero status means that there is a permission problem of the Ajax request. In other words, the Ajax request is trying to access a domain that the request is not authorized to access.

The actual problem was that my JavaScript JsTestDriver asynchronous test case was running on the JsTestDriver server which is using a different port other than the one that is used by the application server which hosts the Ajax servlet.

The other interesting point to mention is that I only faced this issue on Firefox 10 while in Internet Explorer 8, the Ajax request worked without any problems.

To solve this problem, I authorized the Ajax request that comes from the JsTestDriver server to access the application server by setting the "Access-Control-Allow-Origin" header from my servlet as follows.

response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:42442");

The "http://127.0.0.1:42442" is the JsTestDriver server address from which the Ajax request is constructed and sent to the application server.

After making this workaround the scenario worked fine on all the browsers, I wish that this tip can be helpful for you.