Why isn't this Jquery Ajax working in Opera and Safari?

Question

This code works in FF, Chrome, IE6/8 but not in Safari and Opera. Any ideas why?

Here is the code:

var name = $('#esm').val();
        var email = $('#nam').val();
        var message = $('#med').val();
        var ad_id = $('#i_d').val();

    var data_string = 'esm='+ name + '&nam=' + email + '&med=' + message + '&i_d=' + ad_id;

            $.ajax({
                type:       "POST",
                url:        "/my_php_file.php",
                data:       data_string,
                success:    function(data) {
                    $('#tip_loader').hide();
               if(data==1){alert('success'); }
               else {alert('error'); }
                       }//end success function
        }) //end ajax call

I have located the error to exactly the "Ajax" call, because when I put an alertbox just before the $.ajax the alert shows up correctly. However, if I put the alertbox in the success function, nothing shows up, no alert.

This only happens in Opera and Safari...

EDIT:

FYI: I include this javascript file into a php file, and I also include the jquery.js file into the php file. So this is all in an external file.

EDIT:

/main.php /bin/jquery.js /bin/tip.js /bin/tip.php

I include the above js files into main.php, and the form action in main.php is set to /bin/tip.php

And the path to the ajax url is /bin/tip.php instead of my_php_file.php

Answer 1

In Opera, by default Allow File XMLHttpRequest is false. So you need to change the settings. Open Opera browser, type about:config. It will take you to the Preference screen. Go to User Prefs folder, you can see a settings Allow File XMLHttpRequest. Check that and then Save. It should work.

Answer 2

Opera has a debugging tool built in called Dragonfly. Go to the Tools menu -> Advanced ->Opera Dragonfly
If you don't have the File menu bar, click Menu -> Page -> Developer Tools -> Open Opera Dragonfly

Once you have it open (open it on the page that you're working on), click the Scripts tab (it'll probably ask you to refresh the page, do that) and drop down to your external js file. Once you've found your code, you can set a breakpoint on the $.ajax() line by clicking on the line number on the left side. Now, trigger your code and you'll see that it will break on that JavaScript line. You can then use the inspection tab (bottom, middle) to ensure that all of your variables are set correctly. You can also step through and debug the JavaScript.

The other thing you'll want to do is add an error function like so:

$.ajax({
    type: "POST",
    url: "/my_php_file.php",
    data: data_string,
    success: function(data) {
        $('#tip_loader').hide();
        if (data == 1) { alert('success'); }
        else { alert('error'); }
    }, //end success function
    error: function(xhr, textStatus, errorThrown) {
        alert(errorThrown);
    }
});  //end ajax call

See if that gives you any more information.

Also, check the error console as @Mufasa suggested. It can be found under the Error Console tab in Dragonfly.

Answer 3

There isn't really a way to tell. You didn't post the php file. Without knowing the output, we can't determine how the browser will respond.

Other tips though, #1 you are not using encodeURIComponent for any of the values being passed it. Its much more simple to get jQuery to do it for you,

instead of data: data_string, you should have

data: { esm: name, nam: email, med: message, "i_d": ad_id }

jQuery will create the query string for you and correctly.