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.

  • Are you using this static resource in a VF? – Sam Aug 19 '14 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 '14 at 5:02
  • I suspecting... maybe because it didnot recognize {!}, but is it possible to define {!} in separate java script. – unidha Aug 19 '14 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 '14 at 6:36
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.

| improve this answer | |
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>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.