How to use jquery to decode the return json object?

Question

Hi, I trid to use an upload plugin for jQuery. http://valums.com/ajax-upload/

When I set the returning respond type to json, firefox will popup a dialog asking how I like to handle the returning json object.

People have asked the same question at the upload script's author's page but no answer so far. Hopefully javascript guys here can figure out how we can handle this.

Thanks.

<script type= "text/javascript">
      /*<![CDATA[*/
        $(document).ready(function(){

            /* example 1 */
            var button = $('#button1'), interval;
            new AjaxUpload(button, {
                //action: 'upload-test.php', // I disabled uploads in this example for security reasons
                action: '/posts/upload_images/', 
                name: 'myfile',
                responseType: 'json',
                onSubmit : function(file, ext){
                    // change button text, when user selects file     
                    button.text('Uploading');

                    // If you want to allow uploading only 1 file at time,
                    // you can disable upload button
                    this.disable();

                    // Uploding -> Uploading. -> Uploading...
                    interval = window.setInterval(function(){
                        var text = button.text();
                        if (text.length < 13){
                            button.text(text + '.');        
                        } else {
                            button.text('Uploading');      
                        }
                    }, 200);
                },
                onComplete: function(file, response){
                    var json = response;
                    alert(json);
                    button.text('Upload');

                    window.clearInterval(interval);

                    // enable upload button
                    this.enable();

                    // add file to the list
//                    $('<li></li>').appendTo('#example1 .files').text(json.response_text);      
                    $('<li></li>').appendTo('#example1 .files').text(file);      
                }
            });
        });
    /*]]>*/
</script>

Answer 1

This jQuery plugin makes it simple to convert to and from JSON: http://code.google.com/p/jquery-json/

Also, you might be interested in this comment on the blog post you referenced:

Sorry to spam your blog post (which is great), but I thought I’d mention that I found the problem:

For whatever reason, the response always has <pre> tags around the entire response when the response is of type plain/text. That was causing the eval() call to fail. My current solution was just to strip those tags off before the eval() call and now everything works. Not a great solution but at least I can keep working for now.

Answer 2

This may be it, I don't know because I know nothing about that plugin, but you may need to take a look at the response type you are setting on the server-side of things; you should set the HTTP response to have a content/MIME type of something like "text/plain", "text/javascript" or "application/javascript" - see if that fixes your problem.