Ajax Call to Identical External Script Doesn't Fire

Paul Konstanski
Paul Konstanski used Ask the Experts™
on
I have a script that works perfectly when I run it from my local machine.  But when I try to run it with a call to an external server it returns a failure. I know the script actually arrives at my remote machine because I see it's arrival in the logs, but it doesn't properly send back the success notification.

The application is a webpage that has a simple "contact us" link with two inbound fields - name and email.  The standard html page makes a call to a file called "contact_me.js" which contains this code:

$(function() {
    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
	    var rmturl = "././mail/contact_me.php";
	    // var rmturl = "https://myserver.com/contact_me.php";
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: rmturl,
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

Open in new window

On line 10/11  I define the source file as the variable "rmturl",  In both cases it is simply calling the "contact_me.php" file that simply has one line of code "return true" (I simplified for testing purposes).

When I run to the local file (././mail/contact_me.php), it get the success message to fire (line 37).
But when I run it to the remote server I get the message that says "Sorry, mail server isn't replying". (line 49)

What might be the reason for why this works off the local script but not the remote server? Is there some other parameter that needs to be added to signify this is remote? Or some other protocol?

Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Project Specialist
Commented:
I figured out what it is... it has to do with "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource"

So I added this to my .htaccess file for testing...

Header add Access-Control-Allow-Origin: *

And then eventually restricted it to my specific domain.
Paul KonstanskiProject Specialist

Author

Commented:
Should have looked at this right from the start.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial