JQuery - It fails on IE7. Crossbrowser compatibility?

Question

Hi. I tried to open a post time ago about this problem (here), thinking i was wrong making the code. Now more or less i've understood that some version of Jquery with my code doesnt work on IE7. What's Happening? I also tried to open a post on JQuery official forum (link) but no one reply. Anyway, in my old website i used to work with jquery-1.3.2.min.js , and i didnt problems. Now, i need to use the .delegate() function, so I include the jquery-1.4.2.min.js library.

Above you can see the usual code I used in my old application :

// html page
<a href="#" onClick="pmNew('1');return false">prova</a>    

// javascript page
function pmNew(mexid) {
    var time = new Date;
    $.ajax({
        type: 'POST',
        url: './folder/ajax.php',
        data: 'mexid='+escape(mexid)+'&id=pmnew',
        success: function(msg) {
            alert(msg);
        }
    });
    return false;
}

// asynchf.php
if($_POST['id']=="pmnew") {
    echo "please, i will just print this";
}

With some suggestions by some users of this website, i edited these functions :

// html page
<a href="#" onClick="pmNew('1');return false">prova</a>    

// javascript page
function pmNew(mexid) {
    var time = new Date;
    $.ajax({
        type: 'POST',
        cache: false,
        url: './folder/ajax.php' + '?dummy=' + time.getTime(),
        data: 'mexid='+escape(mexid)+'&id=pmnew',
        success: function(msg) {
            alert(msg);
        }
    });
    return false;
}

// asynchf.php
if($_POST['id']=="pmnew") {
    echo "please, i will just print this";
}

But it STILL DOESNT WORK on IE7. Firefox, Chrome, it rocks. It works on IE7 only if i load the page, i try (and i get the error message), i reload (F5) and i retry. Or, as i said before, i change the version of Jquery :)

I loaded a testpage on a real server (so you can check yourself this problem) : click here

I hope someone can help me with this big trouble.

Cheers

Answer 1

Can you add this argument to your .Ajax options:

error:function(xhr, status, errorThrown) {
            alert(errorThrown+'\n'+status+'\n'+xhr.statusText);
        }, 

and reply with the message ?

Answer 2

The reason behind this bug is when you are using relative URLs on IE7, it actually adds your base url (or wherever your page is loaded from e.g. if you place a relative url on your home page your relative URL would actually be http://gabbatracklistworld.com/http://gabbatracklistworld.com/folder/ajax.php)

I just came across your question here on SO while searching for a solution on some same problem I had myself a few minutes ago. There's actually an article from microsoft's blog that explains how IE7 handle relative urls (which is funny because it just shows that they are proud of how their stupid browser works) Seeing that you have no answer yet, I'd put my solution here for future reference and other devs too.

What I did is use substring() to strip the instances of my base url forcing the ajax request to use the actual relative URL.