DotNetNuke, jquery.js and interface.js bugs and resolutions
I'm building a new DotNetNuke site that has all sorts of slick ajax-y stuff going on in the interface. I ran into some problems with prototype.js and scriptaculous early on so I opted to use jQuery.js and interface.js.
I develop primarily in Firefox 2.x and check code in IE after the fact.
I was making use of 2 interface objects: Slider and Resizable
Everything was looking great in both major browsers until I logged into IE and got an alert saying "Internet Explorer cannot open the Internet site http://localhost/dnn455/
Operation Aborted" - then the page went to a default IE error page.
bummer.
I was able to fix this by editing idrag.js (from the interface library) and changing the following 2 lines:
jQuery('body',document).append('');
jQuery('body', document).append(jQuery.iDrag.helper.get(0));
in both cases I changed jQuery('body', document) to jQuery('#wrapper') and this cleared the problem up right away. This is consistent with some posts I've seen around the web related to appending directly to the body in IE if certain conditions are true.
In my example, #wrapper is a the ID of a div immediately inside the body and everything goes inside it.
The second problem I ran into was with Resizable objects.
I was getting an error in IE when I assigned a handler: "Object does not support this property or method"
The quick fix was to change this line in iresizable.js in the interface library:
handle = jQuery(el.resizeOptions.handlers[i])
to
var handle = jQuery(el.resizeOptions.handlers[i])
I changed is later so I declare a variable outside the "for (i in el.resizeOptions.handlers) {" loop and reuse it within the loop.
In both cases the results were great and now I can use jquery.js and specific elements within interface.js. I am only using the specific libraries that I need rather than including all of interface.js.
Please comment if this is helpful.
DNN 4.05.05
jquery 1.1.2 (there are more current versions but i was having some trouble with interface compatibility)
interface 1.2
I develop primarily in Firefox 2.x and check code in IE after the fact.
I was making use of 2 interface objects: Slider and Resizable
Everything was looking great in both major browsers until I logged into IE and got an alert saying "Internet Explorer cannot open the Internet site http://localhost/dnn455/
Operation Aborted" - then the page went to a default IE error page.
bummer.
I was able to fix this by editing idrag.js (from the interface library) and changing the following 2 lines:
jQuery('body',document).append('');
jQuery('body', document).append(jQuery.iDrag.helper.get(0));
in both cases I changed jQuery('body', document) to jQuery('#wrapper') and this cleared the problem up right away. This is consistent with some posts I've seen around the web related to appending directly to the body in IE if certain conditions are true.
In my example, #wrapper is a the ID of a div immediately inside the body and everything goes inside it.
The second problem I ran into was with Resizable objects.
I was getting an error in IE when I assigned a handler: "Object does not support this property or method"
The quick fix was to change this line in iresizable.js in the interface library:
handle = jQuery(el.resizeOptions.handlers[i])
to
var handle = jQuery(el.resizeOptions.handlers[i])
I changed is later so I declare a variable outside the "for (i in el.resizeOptions.handlers) {" loop and reuse it within the loop.
In both cases the results were great and now I can use jquery.js and specific elements within interface.js. I am only using the specific libraries that I need rather than including all of interface.js.
Please comment if this is helpful.
DNN 4.05.05
jquery 1.1.2 (there are more current versions but i was having some trouble with interface compatibility)
interface 1.2
posted by John Daharsh at 10:04 AM
3 Comments:
... I am only using the specific libraries that I need rather than including all of interface.js.
John, I'd like to be able to do that for some effects I'm trying to load, but I can't figure out how. I'm fairly new to both JavaScript and jQuery. I can see Firebug complaining about various JavaScript problems when I'm missing a required file, but I can't figure out how to tell what file might correct the error. Any thoughts? Any help would be gratefully appreciated!
Howard
I got a solution. You have to use onload of body element. nothing else is trusted. see for more details
Shiplu, the jQuery "ready" methodology and other methods in other JS libraries exist in place of using the onload event for a number of reasons. One of the biggest is that if you are using an architecture such as ASP.NET or some other beefy architecture they may likely be utilizing the onload event for something else, or you may not have easy access to the body tags (if you are using certain CMS's), other reasons relate to the state of a page as we move into more ajax-enabled web applications.
The big idealogical reason to use something like "ready" is to remove the Javascript code from the HTML elements of your page. The old days of Javascript programming had "onclick" "onload" "onmouseover" etc all over the HTML. Any more, best practice is to as much as possible remove the javascript from the markup.
If all you want to do is get some simple behaviors on a basic HTML page where you write all the code, and maintaining some sort of state on the page doesn't matter, then go ahead and use onload. If you are trying to write better HTML, or you are building something using any decent architecture, OR are constrained by any limitations to using the onload event of the body tag, then you will be far better served by using something like "ready"
Post a Comment
<< Home