$.getJSON not working in jQuery 1.10.2?

[jimmykup]

Hi again,

I’m loading some JSON with jQuery on this page: http://iaviglobal.com/json-3.html

This first page uses jQuery 1.8.3 and it works just fine. All of the content on that page is pulled from a .json file on my server.

My WordPress site uses jQuery 1.10.2 and jQuery Migrate 1.2.1. My JSON call doesn’t work here!: http://iaviglobal.com/json-4.html

Can anyone explain to me what changed? Here is my JSON code.

if ($('#product-line-container').length > 0) { 
  $.getJSON('/json/products.json', function(data) {
  alert ("json loaded");
        var output="";
        for (var i in data.products) {
            output+="<div class='product-line-item wrapper'><div class='product-image'><img src='/img/" + data.products[i].fileName + ".png alt='' width='150' height='100'></div><div class='product-model'>" + data.products[i].modelNumber + "</div><div class='product-specs'><ul><li>" + data.products[i].brightness + " Lumens</li><li>" + data.products[i].resolution + " Resolution</li><li>" + data.products[i].contrast + " Contrast Ratio</li></ul></div><a class='get-a-quote trigger-quote-modal'>Get a Quote</a><a class='download-pdf' href='/download/" + data.products[i].fileName + ".pdf'>Download PDF</a></div>";
        }

        output+="";
        document.getElementById("product-line-container").innerHTML=output;
  });
}

[chrisburton]

I would assume something in 1.8.3 is deprecated in 1.10.2. Also, check your javascript errors in the console.

[jimmykup]

I figure the same thing, but it’s not getting me anywhere.

I created another clean page here: http://iavi.com/glored/json-5.html

This page is stripped down and only includes a script to notify me if jQuery was successfully loaded or not and then the JSON code verbatim from http://api.jquery.com/jquery.getjson/.

Still doesn’t work!

The only thing the console says “Uncaught TypeError: Cannot call method ‘getJSON’ of undefined”

[dyr]

The problem you’re experiencing is due to this line: jQuery.noConflict(); which WordPress appears to be injecting at the end of jquery.js.

EASY FIX: in your code change $.getJSON() to jQuery.getJSON()

To prove that works, load up that page and in the console type:

jQuery.getJSON

which will output the correct:

function (e,t,n){return x.get(e,t,n,"json")}

Either use the full jQuery object instead of $ as shown above or you can remap $ by using the following in your code:

// must be done after $.noconflict() has
// been called in order to use $ again
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
  // e.g. $.getJSON()
});
// outside of the closure, $ can be used by
// other scripts without conflicting with jQuery

And there you have it.

:)

[Author]

Posts