jQuery/Ajax call - It Doesn't work on IE7

Question

Hi... i make a Jquery function that (for the moment) call a function dinamically and print it with an alert. with firefox, chrome : it works! when i try on IE7 (the first time), it fails. If i reload the page (F5) and retry , it works! o_O

I FINALLY understand why that's happen. In my old website i used the jquery-1.3.2.min.js library. On this i use the jquery-1.4.2.js and in fact it doesnt work. So what's up? A bug in this new version?

cheers

EDIT

actual functions (with Bryan Waters suggestions):

// 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: './asynch/asynchf.php' + '?dummy=' + time.getTime(),
        data: 'mexid='+escape(mexid)+'&id=pmnew',
        success: function(msg) {
            alert(msg);
        }
    });
    return false;
}

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

Fiddler result : if i use http://localhost/website fiddler doesnt capture the stream. if i use http://ipv4.fiddler/website it capture the stream, but at the ajax request doesnt appair. if i refresh the page, yes it works. mah...i really don't know how resolve this problem...

Answer 1

I believe you have an error in your SQL code. Is userd supposed to be userid?

Gaby is absolutely right that your SQL code is wide open for injection. Please consider learning PDO, which will reduce the likelihood of SQL injection significantly, particularly when using placeholders. This way you will have query($sql) and execute($sql), rather than the code going directly into your DB.

Answer 2

As a matter of habit you should deal with your request variables early in your script, and sanitize them to death -- then assign the cleaned results to new variables and be strict in only using them throughout the rest of the script. As such you should have alarm bells ringing whenever you have a request variable in or near an sql query.

For example at the very least you should be stripping any html tags out of anything that will get printed back to the page.

That is in addition to escaping the quotes as part of the sql string when inserting into the database.

I'm all for coding things up quickly -- sure, neaten up your code later... but get security of request vars right before doing anything. You can't tack on security later.

Anyway sorry for harping on.... as for your actual problem, have you tried what Gaby suggested: change your html to:

<a class="lblueb" href="#" onclick="return pmNew('<?php echo $value; ?>')"><?php echo $value; ?></a>

And then update your JS function to:

function pmNew(mexid) {
    $.ajax({
        type: 'POST',
        cache: false,
        url: './asynch/asynchf.php',
        data: 'mexid=' + escape(mexid) + '&id=pmnew',
        success: function(msg) {
            $('#pmuser').html('<a class="bmenu" href="./index.php?status=usermain">PANEL (' + msg + ')</a>');
        }
    });
    return false;
}

Also, with IE -- check the obvious. Clear the browser cache/history

Answer 3

ok, I'm not exactly sure what the issue is here but I think you could probably fix this by simply letting jquery handle the click instead of the inline attribute on the tag.

first change your link like this to get rid of the inline event

<a class="lblueb" href="./asynch/asynchf.php?mexid=<?$value?>"><?=value?></a>

then in your javascript in the head of your page add a document.ready event function like this if you don't already have one:

$(function(){

});

then bind a click event to your link inside the ready function using the class and have it pull the mexid from the href attribute, then call your pmNew function like so:

$(".lblueb").click(function(e){

  e.preventDefault();

  //your query string will be in parts[1];
  parts = $(this).attr("href").split("?");
  //your mexid will be in mexid[1]
  mexid = $parts[1].split("="); 

  //call your function with mexid[1] as the parameter
  pmNew(mexid[1]);

});

Your final code should look like this:

<script type="text/javascript">

function pmNew(mexid) {
    $.ajax({
        type: "POST",
        url: "./asynch/asynchf.php",
        data: "mexid="+mexid+"&id=pmnew",
        success: function(msg){
            $("#pmuser").html('<a class="bmenu" href="./index.php?status=usermain">PANEL ('+msg+')</a>');
        }
    });
}

//document.ready function
$(function(){

  $(".lblueb").click(function(e){

    //prefent the default action from occuring   
    e.preventDefault();

    //your query string will be in parts[1];
    parts = $(this).attr("href").split("?");

    //your mexid will be in mexid[1]
    mexid = $parts[1].split("="); 

    //call your function with mexid[1] as the parameter
    pmNew(mexid[1]);

  });

});

</script>

Answer 4

I didn't understood the "fail", but here's another example..

function pmNew(mexid) {
    $.post("./asynch/asynchf.php", {mexid: mexid, id: "pmnew"},
        function(msg) {
            $("#pmuser").html('<a class="bmenu" href="./index.php?status=usermain">PANEL ('+msg+')</a>');
        }
    });
}

Answer 5

It appears that this issue is faced by several people. One of them had luck with clean installation of browser:

http://www.geekstogo.com/forum/topic/22695-errorpermission-denied-code0/

Answer 6

Check to make sure the content returned to the DOM is valid for the DOCTYPE specified.

I've had a similiar problem with Chrome, FF and Safari all working just fine, but finding the ajax result broken in IE. Check to make sure you don't have any extra divs or spans in the ajax result breaking your markup.

Answer 7

Best way to debug is to download Fiddler and see what the HTML traffic is going on and if the browser is even making the ajax request and what the result is 200 or 404 or whatever.

I've had problems with IE cacheing even on posts. And not even sending out the requests. I usually create a date object in javascript and add a dummy timestamp just to make the url unique so it won't be cached.