json

xhrGet calling error instead of load on IE6 when no error occurs

I am converting some clunky old pages to use dojo 1.1, and ran into a snag when doing cross browser testing. Everything is fine in Firefox, but fails in IE 6. The basic approach here is to invoke a php file on the server in response to user click, and have it return a JSON structure based on what it finds in the database. That JSON structure is then used to build a table in a div by DOM manipulation. Looks good, runs fast – but not in IE.

The interesting problem in IE is that the error function is called instead of the load function. If I examine the HTTP response, it is 200 and the response string is “OK” – as you would expect if no error occurred. But how then did that function get invoked, if there was no error? Why not the proper load function? The JSON looks correct, and seems properly interpreted in Firefox.

Here’s what it looks like:

dojo.xhrGet({
url: 'searchResultsJSON.php?' + paramString,
handleAs: "json",
load: function(response, ioArgs) {
if ( response.matches.length == 0 )
alert("No matching records found.");
else {

// do a bunch of DOM manipulation here
}
}
return response;
},
error: function(response, ioArgs) {
alert('Error when retrieving search results from the server: ' + ioArgs.url);
}
});

The JSON stuff is just raw JSON.

{ “matches”: [array full of stuff ] }

Does IE require something else, like headers, perhaps? I’m at a bit of a loss here in how to make this work in other browsers, so I’d appreciate any guidance as to why this isn’t sufficiently portable.

Access json object in python programs

Hi All,
I am trying to create a javascript object like json in clientside and sending to mod_python. In the mod_python it is coming as util.StringField , How can i access this object.

Thanks,
CP

Dojo Example: xhrGet and xhrPost

Before I start covering more advanced topics, I'll focus the next few weeks on the basics of the Dojo Toolkit. As such, the first topic that needs to be discussed is the work-horse of any modern AJAX application: the asynchronous calls to a website. There are 2 functions of importance in Dojo: xhrGet and xhrPost. But enough talk, let me show the examples:

xhrGet

Description: The work-horse of the dojotoolkit, it allows you to send HTTP GET requests asynchronously.Use it anytime you need to grab information from the server asynchronously. The only exception is that you shouldn't use xhrGet for forms, use xhrPost!
Example: http://www.dojoforum.com/demo-0.9/xhr/xhrGet.html

<html>
<head>
        <title>Dojo xhrGet and xhrPost</title>
        <!-- Initialize Dojo -->
        <script src='/dojo-0.9/dojo/dojo.js' type='text/javascript'></script>
        <script type='text/javascript'>
        //<!--
        // Function that retrieves the remote HTML and puts it into
        // the <div>
with an id of 'html-content'.
        function getHtml () {
            dojo.xhrGet ({
                // Location of the HTML content we want to grab
                url: '/demo-0.9/xhr/content.html',
       
                // Called when the page loaded successfully
                load: function (data) {
                    dojo.byId('html-content').innerHTML = data;
                },
       
                // Called if there was an error (such as a 404 response)
                error: function (data) {
                    console.error('Error: ', data);
                }
            });
        }
       
        // Function that retrieves a JSON object and puts the information
        // into the <div> with an id of 'json-content'. Notice how we're defining
        // 'handleAs' to be of type 'json' now. That lets Dojo know that the data being
        // retrieved from the URL should be eval()-ed and converted to a javascript object.
        function getJson () {
            dojo.xhrGet ({
                url: '/demo-0.9/xhr/content.json',
                handleAs: 'json', // IMPORTANT: tells Dojo to automatically parse the HTTP response into a JSON object
                load: function (data) {
                     dojo.byId('json-content').innerHTML = data.content;
                },
                error: function (error) {
                    console.error('Error: ', error);
                }
            });
        }
        //-->
        </script>
</head>
<body>
        <div id='html-content'><a href='#' onClick='getHtml();'>Click me to get some HTML content</a></div>
        <div id='json-content'><a href='#' onClick='getJson();'>Click me to get some JSON content</a></div>
</body>
</html>


The above code should be self-explanatory for the most part, though I did slip in a small function call that might be unfamiliar to people that have never seen Dojo: dojo.byId(). There's not much magic in the function, it's simply a much shorter alias for document.getElementById().

xhrPost

Description: It submits a HTTP POST request asynchronously. Use xhrPost when you want to send form data to a website and the form doesn't contain any file-input fields. (use dojo.io.iframe.send() instead)
Example: http://www.dojoforum.com/demo-0.9/xhr/xhrPost.html

<html>
<head>
        <title>Dojo Example: xhrGet and xhrPost</title>
        <!-- Initialize Dojo -->
        <script src='/dojo-0.9/dojo/dojo.js' type='text/javascript'></script>
        <script type='text/javascript'>
        //<!--

        // The following function submits the data from the 'post-form' form
        // to a PHP script located at
        // 'http://www.dojoforum.com/demo-0.9/xhr/parse_form.php'
        // The PHP script simply outputs a string in the format of
        // 'Hello $name!', which is then put in the <div>
w/ the id
        // of 'response'.
        //
        // NOTE: As with xhrGet, you can also use handleAs to accept
        // JSON objects in your load() function.
        function submitForm() {
                dojo.xhrPost ({
                        // The page that parses the POST request
                        url: '/demo-0.9/xhr/parse_form.php',
               
                        // Name of the Form we want to submit
                        form: 'post-form',
               
                        // Loads this function if everything went ok
                        load: function (data) {
                                // Put the data into the appropriate <div>
                                dojo.byId('response').innerHTML = data;
                        },
                        // Call this function if an error happened
                        error: function (error) {
                                console.error ('Error: ', error);
                        }
            });
        }
        //-->
        </script>
</head>
<body>
        <div id='response'></div>
        <div>
                <form method='post' id='post-form'>
                        <input type='text' name='name' />
                        <a href='#' onClick='submitForm();'>Submit Form</a>
                </form>
        </div>
</body>
</html>

Most of the above code should look very familiar, as it's basically the same as xhrGet. In fact, xhrGet also supports the 'form' argument to its function call, but it's advised not to use it. If you want to see the source of the PHP file 'parse_form.php' then click here

I hope these brief examples have given you a glimpse into the most basic asynchronous XMLHttpRequest calls provided by the Dojo Toolkit. From here you should take a look at dojo.io.iframe.send(), dojox.io.xhrMultiPart() and for eye-candy dojox.widget.Loader.

Dojo 0.9 Tree, Json, DnD .. Sample Code too much to hope for ? :)

Hey everyone,

Okay, apparently, I am a complete moron, and I am 'okay' with that. I am a de-constructive learner, I learn by tearing things apart and re-building ;) I have got most of the other stuff working fine (validation text boxes, date selectors, etc) under dojo+django. However, the clincher is that the Tree code in 0.9 is .. strange. I grasp the concept of a data store but, when I point it to a JSON url, nothing happens. No node's displayed, updated, etc.

in my html body I have ;

<div dojoType="dojo.data.ItemFileReadStore" jsId="popStore" url="/data/tstjson/"></div>
<div dojoType="dijit.Tree" id="mytree" store="popStore" labelAttr="name"></div>

and I get the following back from the url /data/tstjson/

[{'id': "1", 'text': "Public", 'leaf': "false", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder","children":[{'id': "1", 'text': "fred hoskins", 'leaf': "true", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder"}]},{'id': "2", 'text': "Private", 'leaf': "false", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder","children":[{'id': "1", 'text': "fred hoskins", 'leaf': "true", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder"}]},{'id': "3", 'text': "Work", 'leaf': "false", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder","children":[{'id': "1", 'text': "fred hoskins", 'leaf': "true", 'qtip': "blah", 'qtipTitle': "foo", 'cls': "folder"}]}]

obviously, you get the idea. 3 categories (okay, with the same person, I know, but, you get the idea hopefully). I have tried with a different id in the children (eg; 11, 22, 33, etc) without any luck either. The dojo environment is all loaded up (I am using the other dojo stuff without trouble).

 

I also get the feeling reading around that I am not the only one who is having problems, so, does anyone have a -nice- -simple- example of programatically loading a tree using JSON ?

As I said, if I am missing something obvious, feel free to smack me upside the head.

Thanx,

Fraunhoffer

JSON encoding problem.

Hi, I'm making dojo tree widget. I'm getting first node by calling RPC action method call. This method returns one node and it has Russian title. This title renders normaly.

Others nodes are got by standard widget mechanism - calling RPCUrl. This URL points to the Action's method. I'm using JSONUtil to serialize the List of objects in this methos and return them to my Tree Widget. And every thing works fine, but titles of nodes now render as set of ?. So the name of any node a get is ????? instead of , normal russian title. How can I fix it?

Here is the code snipnet of my method code :

public void interact() throws Exception{

String data = httpServletRequest.getParameter("data"); // get data container

Map map = (HashMap) JSONUtil.deserialize(data.toString()); // deserialize it

map = (HashMap) map.get("node"); // get node object

Object obj = map.get("objectId"); // get node's ID

Integer id = Integer.valueOf(obj.toString());

String string = JSONUtil.serialize(getSubRegions(id)); // get the list of objects from DB and serialize them

httpServletResponse.setContentType("text/javascript"); //write to response

PrintWriter writer = httpServletResponse.getWriter();
writer.println(string);
writer.close();
System.out.println(httpServletRequest.getQueryString());

}

And my tree is :

- NormalyTitleInRussian

|
+ ????? ??? ???

|
+ ?? ??????

Syndicate content

Back to top