jQuery ajax call returns empty error on Mac Safari and Chrome browsers

Question

I have been searching for solutions and trying fixes for days now but with no change.

The boss man is on a Mac and I do not have one so I am having him try repeated fixes and relaying the output to me. So far no luck.

The current setup is thus, I have a form with username and password inputs which is submitted after it goes through validation. The validation is an ajax call which validates the username and password then submits the form.

Only on Mac Chrome and Safari (webkit) I get an error response from the ajax call which is blank.

I have stripped the php function that does the validation to simply echo "hello" so that I know it is not the php that is causing the problem.

So once the target element is clicked I grab the username and password values and send the ajax request. (which should hit my php file and just echo hello). However instead it returns and error with no message. What I mean by that is the xhr responseText and thrownError are all just blank/null.

so here is the code: (HTML)

<form id="signin_form" method="POST" action="index.php?cmd=Signin">
        <table id="welcomeSignin">
            <tr>
            <td>
                    <div class="welcome"><span class="signin-title-text f-xxlarge-or-link-goth">Welcome Back!</span></div>
                    <div id="error_msg"></div>
                    <table id="input_field_table">
                        <tr>
                                <td class="input-field-cell">
                                    <div class="singin-titles f-medium-gr-bold">Username</div>
                                </td>
                                <td class="input-field-cell">
                                    <div class="signin-inputs"><input class="signin styled" type="text" name="user_name"></div>
                                </td>
                        </tr>
                        <tr>
                            <td class="input-field-cell">
                                <div class="singin-titles f-medium-gr-bold">Password</div>
                            </td>
                            <td class="input-field-cell">
                                <div class="signin-inputs"><input class="signin styled" type="password" name="user_pass"></div>
                                <div class="forgot"><a href="" class="forgot-password f-small-or-link">Forgot your password?</a></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="hidden" name="post_type" value="signin">
                                <span id="create"><span class="f-medium">Don't have an account? <a href="" class="create"><span class="f-medium-or-link">click here</span></a></span></span> &nbsp;
                                <span class="active-login"><input type="checkbox" class="signin-radio" name="active_login"> <span class="f-medium"> Keep me signed in</span></span>
                                <div id="sign_in"><span class="signin-submit-button"><img src="../images/ready-create-icon.png"></span> <span class="signin-submit-text f-xxxlarge-gr-title-link">Sign In!</span></div>
                            </td>
                       </tr>
                    </table>
                </td>
            </tr>
    </table>

Nothing special there. Here is the jquery piece:

$('#sign_in').click(function(){
    var url = window.location.href;
    $('#error_msg').html('');
    var username = $('input[name="user_name"]').val();
    var password = $('input[name="user_pass"]').val();
    var err = '';
    $.ajax({
        url: ajaxUrl+'validate_signin',
        type: 'GET',
        cache: false,
        data: { username: encodeURIComponent(username), password: encodeURIComponent(password)},
        success: function(data, status, xhr){
            if(data !== 'OK'){
                err = data;
                $('#error_msg').html(err);
                return false;
            }else{
                $('#signin_form').submit();
                return false;
            }
        },
        error: function(xhr, ajaxOptions, thrownError){
            var tmp_err = "";
            tmp_err = ":: "+xhr.responseText+" :: "+xhr.responseXML+" :: ";
            alert(tmp_err);
            alert(xhr.responseText);
            alert(thrownError);
            window.location.href = url;
            }
        });
        return false;
});

the php file is just: echo "hello"; exit; just to avoid any errors for testing.

A few things here, I added the encodeURIComponent() because I did see a post describing a problem with special characters and white space.(didn't work) on success: I included the status and xhr vars just for debugging normally I just have data.

Now in error: this is what is coming up each time however all responses are blank, or undefined. I was hoping to get some kind of decent error but I get nothing. Now this is only on a Mac recently upgraded to Mountian Lion and only on Webkit (Chrome/Safari) browsers.

I tried doing just XMLHttpRequest without using jQuery and I get the same thing.

This works in IE, Firefox, Chrome and Safari on a PC, it also works in FireFox on his Mac.

Finally this was working for him previously, I believe before his upgrade.

Any help would be great. I am pulling my hair out, I am greener on jQuery than php so hopefully one of you can help me out.

Answer 1

This was a configuration issue. The problem occurred if the domain was entered without the leading www. on the domain name.

Adding header('Access-Control-Allow-Origin: *'); to the php file solves this. You can specify specific domains to allow or use *.