0

I have a folder structure like this.

  • [ site ]
    • [ js ]
    • [ json ]
      • hints.json
    • page.html

Now when I launch my page.html I have a button that when I click is going to load my hints.json file. Here is my script for loading the json.

$(function(){

  var jsonURL = "json/hints.json";
  var butt = $('.button .hints li');
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(value){
        console.log(" title = ", value.intro[0].title);
    });



  }); 

});

Json file structure.

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

Can anyone tell me why this would not work.

Update: This is been tested locally not from a server.

Here is a jsfiddle example even though I'm trying to get it to work locally. http://jsfiddle.net/r3bPC/1/

Improve this question
10
  • Did you miss type that JSON or is that really what is getting sent to you? If so, it's wrong. Commented Aug 19, 2011 at 19:28
  • use Firefox + Firebug, open the NET tab and see your AJAX request. You will see the response or a 404 error. Commented Aug 19, 2011 at 19:30
  • Its what I typed. What is wrong with the json structure. Even if its wrong I guess first things first would that stop the load of it. I'm getting no errors. The load method doesn't get fired when I do a console log from it Commented Aug 19, 2011 at 19:31
  • Nothing under Firebug net tab as its been tested locally. Not from a server and not using ajax. Commented Aug 19, 2011 at 19:32
  • you said quest.json but actually you are loading hints.json ... just in case ... Commented Aug 19, 2011 at 19:38

2 Answers 2

Reset to default
3

Json file structure.

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": Title text for page active, "copy": "copy text"}
             ]
}

Dump into http://jsonlint.com/ ....

Parse error on line 14:
...           "title": Titletextforpageacti
-----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '['

Well there's your problem.

Part 2

Grab that JS:

$(function(){

  var jsonURL = "json/hints.json";
  butt.find('a').click(function(evt){

    $.getJSON(jsonURL, function(json){
        // $("#title").text(json.name);
        console.log(" title = ", json.intro[0].title);
    });

});

Run it through http://jshint.com/ ...

Errors:

Line 4 butt.find('a').click(function(evt){
'butt' is not defined.
Line 1$(function(){
Unmatched '{'.
Line 11});
Expected ')' and instead saw ''.
Line 11});
Missing semicolon.

Well there's your other problem.

ps, undefined butts scare me.

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

6 Comments

Thanks Incognito I fixed the json string. as for the butt being undefined. Its not its just not showing the butt variable. When I do a consoloe.log it shows the button event working. Its the $.getJSON thats not loading. I updated my code to show what butt is. var butt = $('.button a');
Also after I ran my code in jshint it passed correctly. So I know its the $.getJSON(jsonURL, function(json){ thats not getting executed for some reason.
Pay attention to what jshint is telling you. You haven't closed off something. Match up all your brackets. JS Hint tells you what it was.
Incognito I updated my click code so it passes the validation but again its the $.getJSON thats not getting executed.
Ok it worked not sure what that was because it validated correctly then I tested it and it didn't work. Then I tested it again with emptying my cache and it worked. Thanks to you all for your help.
|
0

complete tried and tested code, 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){    
$.ajax({
type:'GET',
url:'hints.json',
dataType:'json',
success:function(json){
alert(json.intro[0].title); //this alerts title text
},
error:function(){
alert("dssdsdd");
}
});


});

</script>

or

$.getJSON("hints.json", function(json){

        alert(json.intro[0].title);
    });

hints.json

{
    "intro": [
                {"title": "title text", "copy": "copy text1"}, 
                {"title": "title text", "copy": "copy text1"}
             ],
    "active":[
                {"title": "Title text for page active", "copy": "copy text"}
             ]
}

getJSON success callback

var jqxhr = $.getJSON("hints.json", function() {
  alert("success");
  alert(json.intro[0].title);
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
Improve this answer

4 Comments

Why would it not work using $.getJSON(). Why would I want to use a a $.ajax( ) call when I'm not calling ajax?
Ok thats great but its not working for me :) I'm sorry but my frustration level is kind of high right now at this code. So sorry if I seem short. So you even tried it like I have with a path like this: json/hints.json using a button click like I have setup in my jsfiddle example and my local example
try like butt.click(function(evt){...
3nigma can you use a success callback with $.getJSON

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.