Ajax programming, jQuery Tips, Tutorials, Uncategorized, Web Programming|November 23, 2011 5:05 pm

Visited 2,422 times.

jQuery problems with Internet Explorer: objects, arrays and other input problems

Hello Guys.

Everyone loves jQuery : Quick coding, ajax, browser effects, DOM exploring, etc. But what happen when a programmer (like me) keeps using only firefox for debugging and face the fact many users have problems with Internet Explorer?

I want to spend some of my time writing some of this annoying glitches to have in consideration in order to keep clean the code and to avoid problems in that application we developed with sweat and tears.

Object Notation and Arrays

jQuery uses this a lot. Everytime we define a property for an object or element, we uses arrays or objects to define certain behaviors… for example, like creating on the fly elements:

$('<div>',{
    id:'sprint',
    name:'sprint',
}).appendTo('body');

or an $.ajax petition:

var data_arr ={
        name :$("#name").val(),
        email:$("#email").val(),
        phone:$("phone").val(),
}
var attr = {
    url : 'save.php',
    dataType: 'json',
    data : data_arr,
    type : 'post',
    success : function(data){
    alert("saved!");
    }
}
$.ajax(attr);

The set of attributes of the new division or the ajax request like the examples above are contained in an Array object. From here our headaches starts when we uses IE6, 7, and 8 (seems like 9 fixes part of the object notation, but not at all). Everytime you run your application, you will have probably a popup window with your code and a message error in the beggining :

SyntaxError:Expected identifier, string or number

It usually happens when we use eval() in a Ajax request asking to check the content of a js file we want to run in the fly. Not sure if it happens if you use $.getScript() function, but again, EVAL IS EVIL!!!!!

Now, in order to avoid problems with objects and arrays, you should quote every key of the array/object:

$('<div>',{
    "id":'sprint',
    "name":'sprint',
}).appendTo('body');

In this example of creating elements on the fly, the attributes id and name are quoted in the array of keys of this div object. In IE 6,7,and 8 you will have errors if you don’t manage adequately the keys as string. if not, you are using in many case reserved words of javascript as key names, and then you may have errors in your script.

in the next code, the Ajax request has in its attributes every key quoted, and it works perfect…

var data_arr ={
        "name" :$("#name").val(),
        "email":$("#email").val(),
        "phone":$("phone").val(),
}
var attr = {
    "url" : 'save.php',
    "dataType": 'json',
    "data" : data_arr,
    "type" : 'post',
    "success" : function(data){
    alert("saved!");
    }
}
$.ajax(attr);

So far, quoting keys make valid this kind of array/objects using old browsers. Quoting your key are required to run properly basic attributes and data sets of information using arrays. Pay particular attention to any comma after every array or object you write because IE is very sensitive about it.

Input Select, Input Radio problems

Eventually, evaluating selects and radio buttons can become a nightmare if we don’t refer adequately to them in Internet Explorer.

For example, in the jQuery Standard to get the selected element of a list, you usually do:

$("#contact :selected").val();

Not all the time it will work, especially if we refer to Internet Explorer. Treat Selects like this:

$("input:select [id=contact] option:selected").val();

I know, it is long, but good enough to keep referenced in our compatibility with IE.

The radiobuttons are also subject to this rule. For example, you usually will do this to get the value of the selected element in an array of radiobuttons

$("#rbuttons :checked").val();

Think twice. In IE you cannot get the value as you want (even if you check another element), So, we need again to be very specific in order our retard IE browser can understand what we want

$("input:radio[id=rbuttons]:checked").val();

Somehow using $(“#id”) is not helpful at all specially if you use IE. Next time try to remember to point directly to your objects. It is not complicated at all if you know how to do it.

Some of this good practices can help you to make your applications work with old browsers such IE. If you find this helpful or if you want to extend the topic, feel free to add more content, gladly I will add it to this topic of IE glitches with jQuery.

Tags: , , , , ,
  • Share this post:
  • Facebook
  • Twitter
  • Delicious
  • Digg

Leave a Reply


Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


%d bloggers like this: