1

I create one javascript file and call JSON from there. Before I use JSON, I use hardcode data and it works. But I try to load data using $JSON, somehow it does not work. Check the code below

$(function(){

  function drawStackBar(){
    console.log('@ draw ');

    $.getJSON("{!$Page.JSONFile}", {"core.apexpages.devmode.url" :'0'}, function(data) {
      var jsonData=data;
      console.log(' jsonData '+jsonData);
    });
  }

  drawStackBar();
});

It only print until '@ draw'. I already checked the JSON file manually, it contains the data. What did I do wrong? Last time I remember, I put the function in Visualforce and it worked. Is it different if we put the function in separate javascript and store it in Static Resource?

Thanks a lot.

4
  • Are you using this static resource in a VF?
    – Sam
    Aug 19, 2014 at 4:59
  • Yes...the console.log only print until console.log('@ draw ') and no error but it does not print console.log(' jsonData '+jsonData); I have no idea on how to debug this.
    – unidha
    Aug 19, 2014 at 5:02
  • I suspecting... maybe because it didnot recognize {!}, but is it possible to define {!} in separate java script.
    – unidha
    Aug 19, 2014 at 6:17
  • 1
    Can you append.fail(function(err){console.log('error : '+ err);}) method to the getJSON and check if there's any error..
    – Sam
    Aug 19, 2014 at 6:36

2 Answers 2

1

The first argument for getJSON needs to be a URL according to the docs here:

http://api.jquery.com/jquery.getjson/

You should wrap your page in a URLFOR like such:

$.getJSON({!URLFOR($Page.JSONFile)})

If your JSON doesn't ever change, you should consider using a static resource. I'm not sure if you can even actually use an apex page like you're describing since the request to that page may return things that aren't JSON.

0

Check with two things:-

  1. Validate that your page is loading jquery properly
  2. Set contenttype attribute of your page (having json data) with mime type for javascript ( contentType="application/javascript" )

Following works for me:-

Main page:-

<apex:page standardController="Contact" showHeader="false" sidebar="false">
    <apex:includeScript  value="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>

    <script>
        jQuery( document ).ready(function() {
            function drawStackBar(){
                console.log('@ draw ');
                jQuery.getJSON("{!$Page.JSONFile}", {"core.apexpages.devmode.url" :'0'},  function(data) {
                    var jsonData=data;
                    console.log(' jsonData '+jsonData);
                });
            }
            drawStackBar();
        });
    </script>
</apex:page>

JSON Page:-

<apex:page contentType="application/javascript">{
    "id": 1,
    "name": "A green door",
    "price": 12.50
}
</apex:page>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .