jQuery Function (JSON data call) works on ASP page but not on identical HTM page

Question

I have a jQuery function that is displaying prices on a page that are being called from a JSON data sheet. I'm working on a Volusion site and their framework is in ASP. For cleaner URLs on the sites, you can set up 'SEO' URLs that display the pages as .htm URLs instead of .asp URLs. This code works great on the ASP page but for some reason doesn't function on .htm pages. I inspected the page and checked the console and didn't get any load errors in regards to this function. I'm wondering why it would work on the ASP page and not on the HTM page. Literally the only thing that changes when you do the SEO URLs is the URL itself.

Here is the function (note that the JSON sheet has two keys: item and price). What it does is it seeks out a span (or div) with the value of the 'item' key from the JSON sheet and writes out the value of the 'price' key using the jQuery html() function:

$(document).ready(function () {
    function ShowPrices() {
            $.getJSON("json_data.js", function (data) {
                $.each(data, function () {
                        $('[id*="' + this['item'] + '"]').html(' ' + this['price']);
                        $('[id*="' + this['item'] + '"]').val(this['price']);       
                });
            });  
    }
ShowPrices();
});

Thanks for your help!

Answer 1

I see your getJSON url is relative to the current document, not the site root.

My guess is that the SEO url has a different folder structure something like

ASP version http://sitedomain.com/aspfolderpath/page.aspx

SEO version http://sitedomain.com/some/other/path/page.htm

In which case your function would need to be:

$(document).ready(function () {
    function ShowPrices() {
            $.getJSON("/aspfolderpath/json_data.js", function (data) {
                $.each(data, function () {
                        $('[id*="' + this['item'] + '"]').html(' ' + this['price']);
                        $('[id*="' + this['item'] + '"]').val(this['price']);       
                });
            });  
    }
ShowPrices();
});