You are browsing the archive for IE.

Checking the Local Storage limits across the browsers

February 15, 2013 in HTML5, JavaScript, mobile, Web 2.0

One of the issues you may face during your daily job (if you are a web developer) is how to check the limits of the Local Storage across the different browsers. This is because there is no unified fixed storage quota for local storage across all the browsers, for example, Chrome local storage quota is 2.5 MB. In Firefox, it is 5 MB and in IE, it is 10 MB.

In order to check if the local storage reaches its maximum quota, it will not be efficient to depend on the mentioned quota sizes on every browser, other than this, I prefer to do this programmatic-ally as shown in the following JavaScript function:

function saveInLocalStorage(name, value) {
    try {
        localStorage.name = value;
        return true;
    } catch (e) {
        return false;
    }
}

Using saveInLocalStorage method, you can safely store your local storage entry, and if saveInLocalStorage method returns false, this is an indicator that the browser’s local storage maximum quota is reached, and you will need to show the user an error message asking him to free some of the saved entries in the local storage.

These are my thoughts regarding how to implement this requirement, if you have other thoughts, let me know.

Preventing backspace from navigating back in all the browsers

July 16, 2012 in JavaScript, Web 2.0

One of the requirements which you may face is preventing the backspace key from navigating back in the browser. This requirement can be achieved by listening on the keyboard keys in the browser and acting when the backspace key is pressed under the condition that the mouse cursor is NOT inside an input or a text area elements. Actually, you have to take care of the IE broken event model when you are implementing this feature. for example, the event.stopPropagation() method is not working in IE, adding to this, you have to get the keycode from the window.event not from the passed event object to the event handler.

I wrote the following code which works on all the common browsers (IE, Safari, Chrome, and Firefox) perfectly, and I wish it can be useful for you:

document.onkeydown = function (event) {
	
	if (!event) { /* This will happen in IE */
		event = window.event;
	}
		
	var keyCode = event.keyCode;
	
	if (keyCode == 8 &&
		((event.target || event.srcElement).tagName != "TEXTAREA") && 
		((event.target || event.srcElement).tagName != "INPUT")) { 
		
		if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
			event.stopPropagation();
		} else {
			alert("prevented");
			event.returnValue = false;
		}
		
		return false;
	}
};	

Using this code inside a <script> tag of the HTML <body> element can do this job for you.

The effective Java logout servlet code

July 8, 2012 in Java, Java Web

What is the issue?

You may face an issue when you try to write your own Servlet logout code as follows:

protected void doGet(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {

	request.getSession().invalidate();
	response.sendRedirect(request.getContextPath() + "/login.jsp");
}

The issue in this code is that after it runs on the web container, You may find that the user session is not cleared completely in IE (However, on Safari, Chrome, and Firefox, it may work fine). i.e) You can access pages that requires a user authentication after running this logout code in IE.

Why do we have this issue?

Well, this issue is related to the caching of the pages in the Internet Explorer.

How to solve this issue?

You need to prevent the page caching from the HTTP response as follows:

protected void doGet(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {

	response.setHeader("Cache-Control", "no-cache, no-store");
	response.setHeader("Pragma", "no-cache");

	request.getSession().invalidate();
	response.sendRedirect(request.getContextPath() + "/login.jsp");
}

After writing the first two headers response lines, your logout will work in all the browsers.

JsTestDriver integration with Hudson

May 5, 2012 in Continuous Integration, JsTestDriver

Abstract

JsTestDriver is one of the most efficient JavaScript unit testing tools. Integrating JsTestDriver with continuous integration tools is a mandatory step for ensuring the web application quality. In this article, I will illustrate how this sort of integration can be done between JsTestDriver and Hudson.

Installing Hudson

To install Hudson on your machine, you need to download it from http://hudson-ci.org/.

Run the following command to start Hudson:

java -jar hudson-2.2.0.war

You can start launching Hudson by typing the following address in your browser:

http://localhost:8080/

You should now be redirected to the Hudson home page.

Creating Hudson Job

First of all, you need to create a new Job in Hudson. You can do this by clicking on “New Job” and entering the Job name and selecting “Build a free-style software project” as shown in the figure below:

Configuring JsTestDriver with Hudson

Click the “Configure” link of the project. In the configuration page, enter the project description. In order to run the job periodically, you need to configure the “Build Triggers”. Check the “Build periodically” option and enter the cron-like expression. To run the job every 5 mins past the hour (for example), enter the following expression 5 * * * * as shown below in the figure:

In order to execute the JsTestDriver test command, you need to configure the “Build” section. There are many ways to do so, you can either add “Execute Shell”, “Invoke Ant or Maven2 or Maven3”, or “Execute Windows Batch command”. The latter case can be used when you are working on Windows environment. For the case of this example, I use the “Execute Windows Batch command” option and specify the path of the batch file as shown in the screenshot below:

The batch file has the following content:

java -jar JsTestDriver-1.3.4.b.jar 
      --config jsTestDriver.conf 
      --tests all 
      --testOutput c:/outputFolder 
      --reset

For the matter of simplicity, I assume that the JsTestDriver server is already started and some browsers are already captured. This step is not included in this post, however, This step also can be automated if required.

Testing the integration of JsTestDriver with Hudson

In order to test the integration of JsTestDriver with Hudson, this can be done by manually or automatically (as indicated in the “Build periodically” option). To test the integration manually, click on the “Build Now” link as shown in the screenshot below:

Click the “console output” link to check the output of the results:

setting runnermode QUIET
Firefox: Reset
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (3.00 ms)
  Firefox 12.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (3.00 ms)

Notices

You may face this error while trying to run a new Job:

hudson java.io.IOException: Cannot run program "sh"

In order to fix this error, check this post:
http://www.technicaladvices.com/2012/05/04/hudson-java-io-ioexception-cannot-run-program-sh-resolution/.

More Information about JsTestDriver

Efficient JavaScript unit testing

Generating Test Reports using JsTestDriver

Running Jasmine on the top of the JsTestDriver test runner

Detecting the Page Leave event in JavaScript

March 26, 2012 in JavaScript

You may need to detect if the user is leaving your web page for displaying a warning message to the user mentioning that he may not leave the page and the form is containing data filled by him. To be able to detect this event in JavaScript, you need to deal with the "onbeforeunload" event. The following example explains the idea.

In this example, there is a simple form that contains an input text. When the user enters something in the input text, a warning message appears.

<HTML>
<HEAD>
	<TITLE>Welcome to the test Page</TITLE>
	<SCRIPT type="text/javascript">
		window.onbeforeunload = function(event) {
			
			if (hasData()) {
				return "You entered information in the page. Are you sure you want to leave now?"; // Very important
			}
		}
		
		function hasData() {
			var someThing = document.getElementById("someThing");
			
			if (someThing.value != "") {
				return true;
			}		
			
			return false;
		}
	</SCRIPT>
	
</HEAD>
<BODY>
	<H1>Welcome to the test page</H1>
	
	<FORM>
		<LABEL for="someThing">Enter something here:</LABEL>
		<INPUT type="text" id="someThing"/>
	</FORM>
</BODY>
</HTML>

The "onbeforeunload" event is called when the user tries to leave the page. As shown in the code, to display the interruption message "You entered information in the page. Are you sure you want to leave now?", you have to specify the interruption message in the return of the event. The interruption message is displayed as shown in the figure below.
IE Preview

This code works with me on IE, Firefox, and Safari. I wish that this tip can be useful for you.

window.open Invalid argument in IE

January 8, 2012 in JavaScript, Web 2.0

You may face the following error message in IE while working with the window.open JavaScript API:

Message: Invalid argument.
Line: 21
Char: 4
Code: 0
URI: ...

This error happens because IE does not allow spaces in the window name, for example the following code will cause the invalid argument error in IE:

window.open('test.htm','New Window','width=400,height=400');

To resolve this error, the solution is simple just remove the spaces from the window name and it will work fine:

window.open('test.htm','NewWindow','width=400,height=400');

Finally, the other interesting fact is that IE does not allow the window name to have dashes “-“, so you have to remove it from the window name to make the window.open API working fine in IE.

Profile photo of hazems

by hazems

IE Redirection Problem inside Facebook Application's Canvas (IFrame) and Solution

December 27, 2010 in Java, Web 2.0

When working in my Facebook java application that performs Facebook authentication through OAuth. I found a very weird behavior when configuring my application on Facebook and setting the application canvas type to “IFrame”.

My FacebookSignInServlet is just redirecting the user to the Facebook graph OAuth authorization URL[1] and appending the application callback servlet URL to the Facebook graph OAuth authorization URL. This scenario works fine on all the browsers except IE.

After digging in the problem, I found that the problem was due to an IE iframe redirection security issue.

How to resolve this issue?

In your FacebookSignInServlet, set the P3P header to “IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT” as follows:

response.addHeader("P3P",
"CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

And redirection will work without extra efforts from your side.

[1] https://graph.facebook.com/oauth/authorize

Profile photo of hazems

by hazems

"IE Sucks" Series continued – #2

April 14, 2008 in JavaScript, Web 2.0

IE Ajax problem “Could not complete operation c00ce56e”.
This error appears in the stupid IE when you don't set your server response character encoding to “UTF-8”.
This ugly behavior is M$ IE copyrighted, I really didn't find in any other modern browsers like (FF, Opera).

To solve this problem :
Set your Servlet or JSP response type to UTF-8 as follows:

response.setCharacterEncoding("UTF-8");

Profile photo of hazems

by hazems

"IE Sucks" Series continued

April 11, 2008 in JavaScript, Web 2.0

Last days, I was developing a pure Ajax JS component from scratch that should work cross browsers, I really found nightmares during my way because of the ugly bad stupid IE.

One of the bad IE stupid features that really suck is the IE Ajax Caching.

UnLike FF, If you are trying to send simple Ajax GET requests to your server servlet, you will find the stupid IE returns stale old request data.

After spending one hour in investigation, I found the way that got me out of this hole.

To solve this problem you should add a random dummy parameter to your GET url request to force IE to refresh itself.

For example)

var url = "/RichTextEditorWorld/ImageUploaderServlet?ieDummyStupidParameter=" + new Date().getTime();
Profile photo of hazems

by hazems

DOM setAttribute() is different in M$ IE "the crappy"

March 17, 2008 in JavaScript, Web 2.0

Last days, I was working on a pure heavy (JavaScript/Ajax) component.
The component was required to run correctly across different browsers.
I really did the job in few hours but after start testing the component, I found it works fine on both FF and Opera but as usual I found the M$ IE complaining. I really found alot of IE weird things.

For example, if we try the following code in FF or even Opera, it would work fine.

<html>

<div id="myDiv">
</div>

<input value="Add New Element to div" type="button"
onclick="createNewElement();" />

<script>
function createNewElement() {
   var parentDiv = document.getElementById("myDiv");
   var buttonElement = document.createElement("input");

   buttonElement.setAttribute("type", "button");
   buttonElement.setAttribute("id", "myButton");
   buttonElement.setAttribute("value", "New Button");
   buttonElement.setAttribute("onMouseDown", "alert('Hi');");

   parentDiv.appendChild(buttonElement);
}
</script>

</html>

The “New Button” button would be created if we click on the “Add New Element to div” button.
The 'Hi' message would appear also if we click on the “New Button” button. Here is the output :



But if we try to run the previous code on the M$ IE, we will find the code written under the “onMouseDown” doesn't work.
After spending some time in investigation, I found that the M$ crappy browser doesn't support setAttribute onEventXXX.
Here is the IE output (Nothing is done after clicking on the “New Button” button :





Finally after spending some time with the ugly IE, I could fix this problem by doing the following:

// The IE Fix.
buttonElement.onmousedown = function() {
     alert("Hi - Fixed on the crappy IE");
};
Skip to toolbar