How can I use the JSFiddle echo feature with JQuery?

Question

I have read the jsFiddle user's guide for their JSON echo feature but with no luck of producing a working jsFiddle to echo a JSON message using JQuery.

How can I create a jsFiddle to echo the JSON from their guide:

data: {
    json: JSON.encode({
        text: 'some text',
        array: [1, 2, 'three'],
        object: {
            par1: 'another text',
            par2: [3, 2, 'one'],
            par3: {}
        }
    }),
    delay: 3
}

The one example provided is in Mootools which I've never used. So a simple translation from the mootools example into JQuery would be sufficient.

Thanks but I've read that. My question is based on that in fact. Their only example is in Mootools. I'm hoping someone can provide a simple sample using jquery#ajax — kasdega, Aug 25 '11 at 18:52
@BoltClock why would you close this? its a valid question with a valid answer. JSFiddle is used all the time on this site to explain or show answers and the don't have a solid example of how to use their tool with a fake JSON message. Baz1nga provided a perfectly fine answer to the question. — kasdega, Dec 19 '11 at 23:34
The answers turned out to be useful, but the question really did/does need improvement and signs of effort. Perhaps if you asked: "How do I port this Mootools code {show code} to use jsFiddle's echo feature, in jQuery?" I've tried this {show code}, etc. — Brock Adams, Dec 20 '11 at 00:14
This question was closed because it is not a good fit for the SO community. It asks for *examples* which means there is no "right" answer. Per the FAQ, you should not ask questions where `every answer is equally valid: “What’s your favorite ______?”` - If you can rephrase it to be more suitable for the community, then do so, and flag the question for moderator attention and they will determine whether or not to reopen it. — animuson, Dec 20 '11 at 02:22
@animuson I'll add something to this but your argument is terribly full of holes. Practically every question on SO is a question where there are multiple correct answers and the "correct" answer boils down to someone's personal preference. Case in point: http://stackoverflow.com/questions/923486/what-are-the-best-google-tech-talks or http://stackoverflow.com/questions/383402/is-javascript-s-new-keyword-considered-harmful — kasdega, Dec 20 '11 at 05:03
I reopened it now that you've edited it to be a real, specific question. Those two questions you link to are really, really old questions, the former of which wouldn't have been welcome here had it been asked today due to changes in site policies, and has subsequently been closed. — BoltClock, Dec 20 '11 at 08:07

score 24 · Accepted Answer · edited Jun 28 '13 at 17:29

24

var data = {
        json: $.toJSON({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: 3
}


$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:function(response)
    {
       console.log(response);
    }
});

Live Demo

Note I have added na additonal resource.. jquery-json

Demo with FireBug Console on View (no need to pull up developer console to see return)

edited Jun 28 '13 at 17:29

SpYk3HH

22,272
11
70
81

answered Aug 25 '11 at 19:45

Baz1nga

15,485
3
35
61

Thank you very much this helps tremendously – kasdega Aug 25 '11 at 20:32
This breaks if NoScript is installed, because of the way jsFiddle includes ad-hoc libraries like your jquery-json. – Brock Adams Dec 20 '11 at 00:05
@Brock Adams: I'm considering putting jsFiddle in my NoScript whitelist and forgetting about it... – BoltClock Dec 20 '11 at 08:09
@BoltClock: I did that long ago, doesn't help. There's a posted bug somewhere about it -- I don't have the link handy. – Brock Adams Dec 20 '11 at 08:44
http://stackoverflow.com/questions/7759619/getting-this-error-tojson-is-not-a-function – Merlyn Morgan-Graham Jan 06 '13 at 22:19
Can somebody tell me how to show the firebug console in the view? – RWC Oct 10 '14 at 11:27

score 13 · Answer 2 · edited Nov 27 '14 at 05:20

13

You can also use JSON.stringify

$.ajax({
  url:"/echo/json/",
  data:{
    json: JSON.stringify({
        text: 'some text',
        array: [1, 2, 'three'],
        object: {
            par1: 'another text',
            par2: [3, 2, 'one'],
            par3: {}
        }
      }),
    delay: 3
  },
  type:"POST",
  success:function(response) {
    console.log(response);
  }
});

edited Nov 27 '14 at 05:20

ivan.sim

8,972
8
47
63

answered Aug 28 '12 at 10:05

timfjord

1,759
19
20

4

+1; By "also" you mean "must"? http://stackoverflow.com/questions/7759619/getting-this-error-tojson-is-not-a-function – Merlyn Morgan-Graham Jan 06 '13 at 22:19
2

Theoretically you can prepare your own stringify function, so maybe better use 'also' – timfjord Jan 28 '13 at 14:44

score 6 · Answer 3 · edited Oct 21 '13 at 13:10

6

Something like this:

$.get('/echo/jsonp/', { foo : 'bar', biz : 'buzz' })
    .success(function(data){ console.log (data) })

JS Fiddle example.

Basically, point the url portion of your $.ajax function at /echo/jsonp/ and you should be set. JSFiddle's docs say that /echo/json/ works, too, but it looks like that particular URL is down at the moment; using the JSONP service without specifying a callback works just fine, though.

edited Oct 21 '13 at 13:10

TRiG

10,148
7
57
107

answered Aug 25 '11 at 18:28

ajm

19,795
3
32
37

Ya I'm trying to use the /echo/json and it just doesn't seem to return any data for me. Your JSONP example works though. – kasdega Aug 25 '11 at 18:52
Yeah, it looks like their JSON service is down. – ajm Aug 25 '11 at 18:55
1

do you have an example using $.ajax() for what it should look like when their service is up? Or can you change your example from a .get? – kasdega Aug 25 '11 at 19:01

How can I use the JSFiddle echo feature with JQuery?

3 Answers3

Linked