Ajax Call to Identical External Script Doesn't Fire

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.
Paul KonstanskiProject SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul KonstanskiProject SpecialistAuthor 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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul KonstanskiProject SpecialistAuthor Commented:
Should have looked at this right from the start.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.