502 Bad Gateway - jQuery / AJAX Form

Question

I'm using the Ajax Form (http://malsup.com/jquery/form/) to submit a form I've created.

Locally, this works perfectly... But when I put it on the server, it's throwing this error in the console...

Failed to load resource: the server responded with a status of 502 (Bad Gateway) https://website.co.uk/shop/tents-by-brand/easy-camp

If I press the button a second time, I get this error

POST https://website.co.uk/shop/tents-by-brand/easy-camp 502 (Bad Gateway) jquery.min.js:4 send f.extend.ajax $.fn.ajaxSubmit doAjaxSubmit f.event.dispatch h.handle.i

Is it possibly something to do with the SSL / HTTPS?

My code looks like this:

        function updateCart(data, statusText, xhr, $form) {
            if (data.success) {
                $("input[name=XID]").val(data.XID);
                $('.cart-total').html(data.cart_total);
                $("#notification-content").text('The item has been added to your basket');
                $("#notification-alt").delay(2000).fadeOut(
                    500,
                    function(){
                        $("#notification-content").text('Please wait... Adding item to basket.');
                    }

                );
            }
            return true; 
        }

    // Ajax Form Options

        var ajaxFormOptions = {
            success: updateCart,
            dataType: 'json'
        }

    // Form Actions

        $(".cart-submit-button").click(function(event){

            $("#notification-alt").fadeIn(500)

            var formId = $(this).parent('form').attr('id');
            var formIdHash = '#' + formId;

            $(formIdHash).ajaxForm(ajaxFormOptions);

            console.log('Clicked = ' + formId);

        });

Answer 1

I had the same issue. I ended up turning nginx off on my Plesk server to fix the issue.

To turn off nginx on a Plesk server:

Home > Tools Settings > Service Management > Stop Reverse Proxy (nginx)