jQuery error only in IE (8) - "Object doesn't support..."

Question

I have this snippet of code (AJAX) in jQuery.

$.get('someScript.php?lat=' + clickedLatLng.lat() + '&lon=' + clickedLatLng.lng() + '&value=5', doSomething);

And this is a function (shows an icon on Google Maps and changes some values in input fields).

function doSomething(data) {
    data = data.trim();
    data = data.split(","); 
    var stopName = data[0];
    var stopLat = data[1];
    var stopLon = data[2];

    $("#start").val(stopName);

    if (startMarker == null) {
        startMarker = new google.maps.Marker({
                            position: new google.maps.LatLng(stopLat,stopLon),
                            map: map,
                            zIndex: 2,
                            title: stopName,
                            icon: startImage 
        });
    } else {
        startMarker.setPosition(new google.maps.LatLng(stopLat,stopLon));
    }
}

But it works in all browsers except IE, in my case IE 8. I didn't test it in IE 6/7. It pops out this error...

jquery error in IE 8

I looked into jquery.js and this is the function where it breaks...

            // resolve with given context and args
            resolveWith: function( context, args ) {
                if ( !cancelled && !fired && !firing ) {
                    firing = 1;
                    try {
                        while( callbacks[ 0 ] ) {
                            callbacks.shift().apply( context, args );
                        }
                    }
                    finally {
                        fired = [ context, args ];
                        firing = 0;
                    }
                }
                return this;
            },

actually

callbacks.shift().apply( context, args );

Can someone help? Where is the problem? The same thing with jquery-1.4.4.js

EDIT: This is my larger code...

    // Set some events on the context menu links
contextMenu.find('a').click( function()
{
    // fade out the menu
    contextMenu.fadeOut(75);

    // The link's href minus the #
    var action = $(this).attr('href').substr(1);

    switch (action) {
        case 'startMenu':
            $.get('someScript.php?lat=' + clickedLatLng.lat() + '&lon=' + clickedLatLng.lng() + '&radijus=5', doSomethingWithData1);
            break;

        case 'stopMenu':
            $.get('someScript.php?lat=' + clickedLatLng.lat() + '&lon=' + clickedLatLng.lng() + '&radijus=5', doSomethingWithData2);    
            break;
    }

    return false;
});

When user clicks on an item within context menu on Google Maps then do "doSomethingWithData1" and "doSomethingWithData2". This is also some code for context menu

    // Hover events for effect
contextMenu.find('a').hover( function() {
    $(this).parent().addClass('hover');
}, function() {
    $(this).parent().removeClass('hover');
});

and this for AJAX

$.ajaxSetup ({  
        cache: false  
    });

This is how I included my jQuery scripts.

    <!-- Google Maps -->       
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- Load Javascript / jQuery -->
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.autocomplete.js"></script>

<link rel="stylesheet" href="js/jquery.ptTimeSelect.css" type="text/css" media="all" />

<script type="text/javascript" src="js/jqtransformplugin/jquery.jqtransform.js"></script>
<link rel="stylesheet" href="js/jqtransformplugin/jqtransform.css" type="text/css" media="all" />

<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>

If you're getting an error in the `jquery.js` file, 99.9999% of the time, it's a problem with **your** code. Looking into it. — Dutchie432, Feb 22 '11 at 15:24
Can you provide how you're referencing jQuery.js in your HTML markup? — David Hoerster, Feb 22 '11 at 15:25
Also, do you get the error on the loading of the page?...or in your callback function? Is your callback actually getting called? — David Hoerster, Feb 22 '11 at 15:26
I'd recommend setting a breakpoint on the first line of your `setPosition` callback and single-stepping through it. Look at the resulting `data` and make sure it makes sense. Find out what line of code is actually failing (the jQuery line you've quoted is just calling your callback; much more likely that the error is *in* the callback). — T.J. Crowder, Feb 22 '11 at 15:27

score 10 · Accepted Answer · edited May 23 '17 at 12:19

10

This was it =/ - .trim() in JavaScript not working in IE

Solution - add this before you use .trim function.

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

edited May 23 '17 at 12:19

Community

1
1

answered Feb 22 '11 at 16:11

svenkapudija

5,128
14
68
96

Don't forget to accept your own answer so anyone coming to the question in the future will be able to see the solution at a glance. – Malice Feb 22 '11 at 16:54

score 0 · Answer 2 · answered Feb 22 '11 at 15:32

The problem is that the variable callbacks is not an array somehow in this case. hence callbacks.shift() fails

As for the reason, Call me paranoid but try your code this way

var url = 'someScript.php?lat=' + clickedLatLng.lat() + '&lon=' + clickedLatLng.lng() + '&value=5';
$.get(url,function(data){
console.log(data);
});

//if the above worked then try this
$.get(url, doSomething);

jQuery error only in IE (8) - "Object doesn't support..."

2 Answers2