With the caveat that I’m not an expert with Dojo/Dojox/Dijit, I’m currently switching a site off of Dojo onto jQuery. I’ve used jQuery on a few other sites, but typically just simple effects type stuff. This site has a lot of AJAX driven stuff going on: AJAX catalog navigation where we replace about 12 elements on the page with AJAX loads of other URLs serving back fragments, dynamic tabs which hide themselves if the AJAX source URL returns certain stuff instead of other stuff, etc… I’ve been writing lots of this JavaScript based on the Dojo framework, as that’s what was handed to me, so I’ve done a lot of on the job Dojo learning. I was able to get things to work, so that was good. However, now that we’re transitioning off of Dojo and onto jQuery, I’m amazed at how much easier the jQuery framework makes things. Aside from being smaller, simpler, and easier to understand (for me at least) I’m able to do the things I want to do, much more easily.
*note: some of the examples might be bad Dojo coding (some mine, some inherited) or might be due to me missing the “best” way to do something, however with both Dojo and jQuery I’m mostly using their documentation and/or Googling for how to do something, so any failings in the Dojo implementation are related to the quality and clarity of the documentation and available related pages.*
For instance, the Dojo code that was handed off to AJAX load a page into a div looks like this:
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
dojo.xhrGet( {
// The following URL must match that used to test the server.
url : url2,
handleAs : “text”,
timeout : 5000, // Time in milliseconds
// The LOAD function will be called on a successful response.
load : function(response, ioArgs) {
dojo.byId(“brandsDiv”).innerHTML = response;
return response;
},
// The ERROR function will be called in an error case.
error : function(response, ioArgs) {
console.error(“HTTP status code: “, ioArgs.xhr.status);
return response;
}
});
[/javascript]
That times 12 for the 12 divs we’re updating via AJAX. With jQuery I’m replacing that block with:
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
$(“#brandsDiv”).load(url2);
[/javascript]
Simpler, no?
Also, with Dijit tabs, there’s no easy way to hide a tab and resurrect it later. You have to save off the panel into a JavaScript variable, and reinstate it from that variable later. See how I handled hiding Dijit Tabs/ContentPanes in a TabContainer.
With jQuery Tabs I just use the built-in disable and enable methods along with one line of CSS to solve the same problem. Much easier.
I’m also loving the looks of the new jQuery Tools library from the FlowPlayer folks. Hopefully I’ll be using that library soon on a few projects.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
Leave a Reply