javascript works on localhost but fails on hosting server

Question

When i click on add-to-basket button i see an error which appears in my browser console saying :

Here is my basket.js file :

$(document).ready(function() {
    
    
    initBinds();
    

    function initBinds() {
        if ($('.remove_basket').length > 0) {
            $('.remove_basket').bind('click', removeFromBasket);
        }
        if ($('.update_basket').length > 0) {
            $('.update_basket').bind('click', updateBasket);
        }
        if ($('.fld_qty').length > 0) {
            $('.fld_qty').bind('keypress', function(e) {
                var code = e.keyCode ? e.keyCode : e.which;
                if (code == 13) {
                    updateBasket();
                }
            });
        }
    }

    
    function removeFromBasket() {
        var item = $(this).attr('rel');
        $.ajax({
            type: 'POST',
            url: '/home/u919084925/public_html/mod/basket_remove.php',
            dataType: 'html',
            data: ({ id: item }),
            success: function() {
                refreshBigBasket();
                refreshSmallBasket();
            },
            error: function() {
                alert('An error has occurred');
            }
        });
    }
    
    function refreshSmallBasket() {
    
        $.ajax({
            url: '/home/u919084925/public_html/mod/basket_small_refresh.php',
            dataType: 'json',
            success: function(data) {
                $.each(data, function(k, v) {
                    $("#basket_left ." + k + " span").text(v);
                });
            },
            error: function(data) {
                alert("An error has occurred");
            }
        });
    
    }

    function refreshBigBasket() {
        $.ajax({
            url: '/home/u919084925/public_html/mod/basket_view.php',
            dataType: 'html',
            success: function(data) {
                $('#big_basket').html(data);
                initBinds();
            },
            error: function(data) {
                alert('An error has occurred');
            }
        }); 
    }
    

    if ($(".add_to_basket").length > 0) {
        $(".add_to_basket").click(function() {
            
            var trigger = $(this);
            var param = trigger.attr("rel");
            var item = param.split("_");
            
            $.ajax({
                type: 'POST',
                url: '/home/u919084925/public_html/mod/basket.php',
                dataType: 'json',
                data: ({ id : item[0], job : item[1] }),
                success: function(data) {
                    var new_id = item[0] + '_' + data.job;
                    if (data.job != item[1]) {
                        if (data.job == 0) {
                            trigger.attr("rel", new_id);
                            trigger.text("Remove from basket");
                            trigger.addClass("red");
                        } else {
                            trigger.attr("rel", new_id);
                            trigger.text("Add to basket");
                            trigger.removeClass("red");
                        }
                        refreshSmallBasket();
                    }
                },
                error: function(data) {
                    alert("An error has occurred");
                }
            });
            return false;
            
        });
    }
    
    function updateBasket() {
        $('#frm_basket :input').each(function() {
            var sid = $(this).attr('id').split('-');
            var val = $(this).val();
            $.ajax({
                type: 'POST',
                url: '/home/u919084925/public_html/mod/basket_qty.php',
                data: ({ id: sid[1], qty: val }),
                success: function() {
                    refreshSmallBasket();
                    refreshBigBasket();
                },
                error: function() {
                    alert('An error has occurred');
                }
            });
        });
    }
    
    // proceed to paypal
    if ($('.paypal').length > 0) {
        $('.paypal').click(function() {
            
            var token = $(this).attr('id');
            var image = "<div style=\"text-align:center\">";
            image = image + "<img src=\"/images/loadinfo.net.gif\"";
            image = image + " alt=\"Proceeding to PayPal\" />";
            image = image + "<br />Please wait while we are redirecting you to PayPal...";
            image = image + "</div><div id=\"frm_pp\"></div>";
            
            $('#big_basket').fadeOut(200, function() {
                $(this).html(image).fadeIn(200, function() {
                    send2PP(token);
                });
            });
            
        });
    }
    
    function send2PP(token) {
        $.ajax({
            type: 'POST',
            url: '/mod/paypal.php',
            data: ({ token : token }),
            dataType: 'html',
            success: function(data) {
                $('#frm_pp').html(data);
                // submit form automatically
                $('#frm_paypal').submit();
            },
            error: function() {
                alert('An error has occurred');
            }       
        });
        
});

I tried to resolve it but couldn't find a proper solution. Help me with this, I cannot understand the cause of this error.

Can you please provide the error message in text or as an embedded image. It is most likely because your URL changes once its published/hosted elswhere so you would need to change the url: in your ajax call accordingly — Eitan K
– Eitan K, Commented Sep 12, 2016 at 19:54
Seriously, full path? Maybe you should set url: "/mod/basket.php"? — u_mulder
– u_mulder, Commented Sep 12, 2016 at 19:58
You redacted the URLs in the error message, so now it's impossible to tell what it doesn't like. — Barmar
– Barmar, Commented Sep 12, 2016 at 20:20
that url is wrong, unless you set your site's document root to be your server's root directory, which is an utterly ludicrous security problem. — Marc B
– Marc B, Commented Sep 12, 2016 at 20:34
@u_mulder i tried using relative path but my website is on server it doesn't work that way. — Chirag Shah
– Chirag Shah, Commented Sep 13, 2016 at 13:27

zakaria amine · Accepted Answer · 2016-09-12 19:59:08Z

1

This is mainly due to Rules of Origins (CORS), for some reason the javascript(browser) sees the request as not residing in the same server. And the reason for that, I believe, is because /home/u919084925/public_html/mod/basket.php is not seen as a valid url on the server, it should start with http://{hostname}/{path}.

answered Sep 12, 2016 at 19:59

zakaria amine

3,7322 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

If there's no http://hostname, it defaults to the server that the page came from.

Leonard Lepadatu · Accepted Answer · 2016-09-12 20:05:27Z

0

It looks like your ajax url is totally wrong and the browser interpret that is cross origin ajax request. Please simply check in browser's address bar if your ajax provided urls are valid.

answered Sep 12, 2016 at 20:05

Leonard Lepadatu

6468 silver badges15 bronze badges

Collectives™ on Stack Overflow

javascript works on localhost but fails on hosting server

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related