Wednesday, 14 November 2007

SharePoint - dragging WebParts causes "object required" Javascript error

I have been working with SharePoint quite a bit over the past few months. At Netstore we are building an AA accessible website for our client using XHTML with a CSS based layout.

I recently came across a problem where I had a WebPartZone in a page, and when I tried to drag the webparts around I get the javascript error "Object Required". Fortunately, a bit of googling led me to this post - CSS causes JavaScript error while moving Web Parts in edit mode where I learned the issue is due to the zones being placed in elements with a CSS style of position:relative.

Unfortunately I had to fix the bug to pass UAT so I was left with two options - either change the CSS to remove the relative positioning or try to fix the JavaScript. Given that we were working with HTML/CSS delivered by an external design agency (which I didn't want to mess with) I decided to go with the latter.

The blog entry indicated that the problem lay in a Microsoft function called MSOLayout_GetRealOffset. This function is defined in <12>\TEMPLATE\LAYOUTS\1033\IE55UP.JS. I didn' t fancy changing this file as it would present a deployment nightmare, but fortunately with JavaScript, you can override a global function by just defining it later on in the HTML. Therefore I was able to redefine this function in my master page and fix the error. Here is the new version of the function:

        <script language="javascript" type="text/javascript">
            function MSOLayout_GetRealOffset(StartingObject, OffsetType, EndParent)
            {
                var realValue=0;
                if (!EndParent) EndParent=document.body;
                for (var currentObject=StartingObject; currentObject && currentObject !=EndParent && currentObject != document.body; currentObject=currentObject.offsetParent)
                {
                    var offset = eval('currentObject.offset'+OffsetType);
                    if (offset) realValue+=offset;
                }
                return realValue;
            }
        </script>

So if you ever experience the problem, copy and paste this function into your master page file, anywhere after the SPWebPartManager and it should stop.

24 comments:

Olivier said...

Thanks a lot. This has just helped me.

Tuan Nguyen said...

Hi Neil,

I get a little different error message when trying edit/close/delete a webpart, and using your script did not resolve the issue. Below is the error:

Line: 2135
Char: 4
Error: 'style.display' is null or not an object
Code: 0
URL:

Do you have any trick to solve this issue?

Thanks,
Tuan

Neil Mosafi said...

Hi Tuan

That isn't one I've seen... I can only suggest you trace the javascript through to the work out where it's happening.

I often use Firebug to trace JS errors, but unfortunately Sharepoint renders different javascript if you are using firefox, so that doesn't work. I could only suggest going into the 12 folder and tracing it through using alerts.

If you discover anything more, or can send me something easy to reproduce, I will look into it further.

Thanks,
Neil

Philip Allard said...

Tuan,

You might wanna take a look at http://www.codeprof.com/dev-archive/192/328-1202-1926402.shtm.

Neil Mosafi said...

Thanks Philip.. but not sure what that GUID problem has to do with the issue I was posting about?

Anonymous said...

You saved me many hours of work. Thank you

Anonymous said...

You might want to mention that it's important to place this code within the form on the page, otherwise it doesn't work.

Thanks a lot for this fix

Neil Mosafi said...

True, though I do say to place it after the SPWebPartManager, which is within the form.

Thanks for the feedback

test said...

I tried, using the above javascript in my page, for a moment it looked like the problem is gone, but after performing couple of drag & drop actions for the webparts i get following javascript error
Unspecified error
line 1617
char 2

Please see if anyone can help me out

Neil Mosafi said...

I'd love to help, unfortunately I am not working with Sharepoint at the moment so I can't test this any further. Can I suggest you attach Visual Studio Debugger to your iexplore process (make sure you enable script debugging first) and you should be able to get some more information about where this was happening?
Thanks
Neil

Anonymous said...

Hi,

I am new to this thing, however, my existing sharepoint site shows such problem.

I was really happy to find a solution provided by you.

It would be of great help if yo could guide me on how to locate my master page and how and where to place the script given by you.

Thanking you in anticipation
Raj

Anonymous said...

Legend!

Chandra Ojha said...

The best way to resolve this issue is to specify a
position:relative
tag for body element.

BarisArt said...

Great post, thanks! You helped me a lot. And thanks for the comment which mentioned to place it in the forms section. This made it working.

Anonymous said...

Saved my life!
Thanks!

Anonymous said...

You'r a lifesaver, thanks alot, works great!!

Anonymous said...

just found this post! Lifesaver!!!!!

Anonymous said...

awesome..thanks

Anonymous said...

awesome..thanks

Anonymous said...

Thx m8 - works beautifully for me.
I used to have 2 different designs, one for edit and one for viewing but this script fixes the bug perfectly

Anonymous said...

Thanks for this. I would really like to know what caused it as until recently it was working fine and I had made no CSS or master page changes which might have introduced the relative positioning you describe.

However, in the interests of project deadlines, analysis can wait - your solution works great!

Anonymous said...

Thanks a lot , saved a lot of time and it's worked like charm :)

Anonymous said...

Thank you! Thank YOU! THANK YOU!!!!!!!!

Anonymous said...

Thanks, still useful ;)