how to listen for returned json object with jquery

Question

I have a page with a form that has a file upload input item targeted to a hidden iframe. When the form is posted to the iframe the server processes the file and returns a json object. I'm not sure how to use jquery, or plain old javascript for that matter, to listen for the returned object. I have some code set up for my iframe such as...

$("#upload_target").load(function () {
   //what to do here - how do I get the json object?
});

Does anyone know how to wire up jquery to listen for the json object that's sent back to the iframe? Thanks.

Have you looked into using ajaxComplete() or getJSON() instead? Either way you'll find a sample of load() at http://api.jquery.com/load/ detailing usage. (Sorry that I can't be of more help) — Mantar, Dec 13 '10 at 14:10

geoff swartz · Accepted Answer · 2010-12-13T15:28:37.327

5

I finally figured out how to do it....

$("#upload_target").load(function (data) {
    if (data != null){
        var obj = jQuery.parseJSON(data);
        //...work with obj here.
    }
});

Whether it's the right way or not, it works.

edit - actually I got a bit ahead of myself. here's the correct code....

$("#upload_target").load(function (){
        var retval = $(frames['upload_target'].document).text();
        if (retval != null)
        {
            try{
                var obj = jQuery.parseJSON(retval);
                //...work with obj here.
            }catch(err){}
        }
});

One thing I had to also change was making sure that my MVC controller action was setting the JSONResult.ContentType = "text/plain". Otherwise I was getting a save as download dialog.

edited Dec 13 '10 at 15:28

answered Dec 13 '10 at 15:12

geoff swartz

3,991
8
42
64

Thanks, I am just looking for the solution. – user200340 Sep 21 '11 at 09:31
You should mark this as the answer. Clearly nobody else who answered understood your question or why you needed to use an iframe. – Jereme Dec 06 '12 at 16:32

jwueller · Answer 2 · 2010-12-13T14:40:31.233

You should not use .load() for this kind of request. It inserts the response into the selected elements. That is certainly not what you want when talking about objects. Try $.getJSON() (or $.post() with json as dataType):

// $.getJSON uses HTTP GET
$.getJSON('http://example.com/ajax', function (data) {
   // data is an object
});

// the same with $.post for POST requests
$.post('http://example.com/ajax', function (data) {
   // data is an object
}, 'json');

Vincent Mimoun-Prat · Answer 3 · 2010-12-13T14:12:44.233

0

You should use load this way:

$("#upload_target").load(
   "http://example.com/myjson.php", 
   function(response, status, xhr) {

   });

But for Ajax and JSON you should use post, $.getJSON, or $.get, or $.post or $.ajax (those functions also take as a parameter a callback function with arguments containing the result).

edited Dec 13 '10 at 14:12

answered Dec 13 '10 at 14:05

Vincent Mimoun-Prat

26,900
13
74
118

I'm not clear on how to use the post then in this situation. I have a form which is targeting the hidden iframe and using a normal form post to upload the file. The server returns the json object which is sent to the iframe. How does $.getJSON or $.post work in a scenerio like this where the server is already returning the json? – geoff swartz Dec 13 '10 at 14:25
response will contain the JSON data. getJSON or post both use the same kind of callback as the load function. You have examples on the jQuery website and lots of tutorials too as Google says. – Vincent Mimoun-Prat Dec 13 '10 at 14:31
Okay I misunderstood the load function. I thought it was set up to listen for when the page loaded. Anyway, all of these methods are expecting a url to load the data from. That's not how my scenerio is working. I'm already sending the json object to the iframe from the server after the form is posted, so we're past the $.getjson or $.post steps. Is there no way to set up the iframe page to just listen for the json being returned without using one of these methods? If I use one of these then it's trying to call my server for the json response which isn't how this has to work. – geoff swartz Dec 13 '10 at 14:39
@geoff swartz: What do you mean by "returned"? Do you use an iFrame as AJAX-replacement? – jwueller Dec 13 '10 at 14:46
Okay, one more time. I have a page with a form that has a file input field. The form targets a hidden iframe to upload the file "ajax style" so the main page doesn't do a post back. The file is uploaded to the server and the server processes the file and sends back a json object. Because the target of the form post was the hidden iframe, it's the one that receives the json object. So, I need to set up something to make the iframe listen for the json object that the server returns. I'm not using any jquery methods to post my form because it's uploading a file through the hidden iframe. – geoff swartz Dec 13 '10 at 14:51
Right way to do it (full Ajax): http://www.google.com/search?q=jquery+upload+file – Vincent Mimoun-Prat Dec 13 '10 at 14:54
@geoff swartz: The problem is, that the browser will try to interpret that JSON as HTML. It is not ensured that you will get the desired result by parsing the result _after_ the browser has converted it to HTML. – jwueller Dec 13 '10 at 15:16

how to listen for returned json object with jquery

3 Answers3

Linked