SharePoint: Custom Ribbon + IE = Error in cui.debug.js (Invalid argument.)

Question

I am having really hard time debugging this one. I have a standard WebPart in SharePoint 2010 with custom Ribbon on it. Everything works great in FireFox, Safari and Chrome. But when it comes to IE, I get the following error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.3; .NET4.0C; .NET4.0E) Timestamp: Thu, 23 Jun 2011 05:29:39 UTC

Message: Invalid argument. Line: 11611 Char: 17 Code: 0 URI: http://example.com/_layouts/cui.debug.js?rev=seEKIhJXfBClfYcr46fd3w%3D%3D

I am attaching the code snippets I feel that might be helpful to you.

Definition for Contextual Tab:

<ContextualGroup Id="Ribbon.MyWPContextualTabGroup"
                 Color="Blue"
                 Title="{title}"
                 Command="MyWPContextualTab.EnableContextualGroup"
                 Sequence="502"
                 ContextualGroupId="MyWPContextualTabGroup">
  <Tab Id="Ribbon.MyWPTab"
       Title="My Work"
       Description="My Work tab description"
       Command="MyWPContextualTab.EnableMyWPTab"
       Sequence="501">
    <Scaling Id="Ribbon.MyWPTab.Scaling">
      <MaxSize Id="Ribbon.MyWPTab.MaxSizeNew"
               GroupId="Ribbon.MyWPTab.MyWPGroupNew"
               Size="MyWPLayout" />
      <MaxSize Id="Ribbon.MyWPTab.MaxSizeManage"
               GroupId="Ribbon.MyWPTab.MyWPGroupManage"
               Size="MyWPLayout" />
      <MaxSize Id="Ribbon.MyWPTab.MaxSizeViews"
               GroupId="Ribbon.MyWPTab.MyWPGroupViews"
               Size="MyWPLayout" />
      <MaxSize Id="Ribbon.MyWPTab.MaxSizeShareTrack"
               GroupId="Ribbon.MyWPTab.MyWPGroupShareTrack"
               Size="MyWPLayout" />
      <MaxSize Id="Ribbon.MyWPTab.MaxSizeWorkflows"
               GroupId="Ribbon.MyWPTab.MyWPGroupWorkflows"
               Size="MyWPLayout" />
      <Scale Id="Ribbon.MyWPTab.Scaling.MyWPTabScalingNew"
             GroupId="Ribbon.MyWPTab.MyWPGroupNew"
             Size="MyWPLayout" />
      <Scale Id="Ribbon.MyWPTab.Scaling.MyWPTabScalingManage"
             GroupId="Ribbon.MyWPTab.MyWPGroupManage"
             Size="MyWPLayout" />
      <Scale Id="Ribbon.MyWPTab.Scaling.MyWPTabScalingViews"
             GroupId="Ribbon.MyWPTab.MyWPGroupViews"
             Size="MyWPLayout" />
      <Scale Id="Ribbon.MyWPTab.Scaling.MyWPTabScalingShareTrack"
             GroupId="Ribbon.MyWPTab.MyWPGroupShareTrack"
             Size="MyWPLayout" />
      <Scale Id="Ribbon.MyWPTab.Scaling.MyWPTabScalingWorkflows"
             GroupId="Ribbon.MyWPTab.MyWPGroupWorkflows"
             Size="MyWPLayout" />
    </Scaling>
    <Groups Id="Ribbon.MyWPTab.Groups">
      <Group Id="Ribbon.MyWPTab.MyWPGroupNew"
             Description="New group description"
             Title="New"
             Command="MyWPContextualTab.EnableMyWPGroupNew"
             Sequence="52"
             Template="Ribbon.Templates.MyWPTemplate">
        <Controls Id="Ribbon.MyWP.New.Controls">
          <Button Id="Ribbon.MyWP.New.NewItem"
                  Command="MyWP.Cmd.NewItem"
                  Description="Add a new item"
                  LabelText="New Item"
                  TemplateAlias="ONERW"
                  Image32by32="_layouts/images/MyWP/ribbon/newitem-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/newitem-16.png" />
        </Controls>
      </Group>
      <Group Id="Ribbon.MyWPTab.MyWPGroupManage"
             Description="Manage group description"
             Title="Manage"
             Command="MyWPContextualTab.EnableMyWPGroupManage"
             Sequence="53"
             Template="Ribbon.Templates.MyWPTemplate">
        <Controls Id="Ribbon.MyWP.Manage.Controls">
          <Button Id="Ribbon.MyWP.Manage.ViewItem"
                  Command="MyWP.Cmd.ViewItem"
                  Description="View this item"
                  LabelText="View Item"
                  TemplateAlias="ONERW"
                  Sequence="5"
                  Image32by32="_layouts/images/MyWP/ribbon/viewitem-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/viewitem-16.png" />
          <Button Id="Ribbon.MyWP.Manage.EditItem"
                  Command="MyWP.Cmd.EditItem"
                  Description="Edit this item"
                  LabelText="Edit Item"
                  TemplateAlias="ONERW"
                  Sequence="10"
                  Image32by32="_layouts/images/MyWP/ribbon/edititem-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/edititem-16.png" />
          <Button Id="Ribbon.MyWP.Manage.VersionHistory"
                  Command="MyWP.Cmd.VersionHistory"
                  Description="Version History"
                  LabelText="Version History"
                  TemplateAlias="THRRW"
                  Sequence="15"
                  Image32by32="_layouts/images/MyWP/ribbon/versionhistory-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/versionhistory-16.png" />
          <Button Id="Ribbon.MyWP.Manage.ItemPermissions"
                  Command="MyWP.Cmd.ItemPermissions"
                  Description="Item Permissions"
                  LabelText="Item Permissions"
                  TemplateAlias="THRRW"
                  Sequence="20"
                  Image32by32="_layouts/images/MyWP/ribbon/itempermissions-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/itempermissions-16.png" />
          <Button Id="Ribbon.MyWP.Manage.DeleteItem"
                  Command="MyWP.Cmd.DeleteItem"
                  Description="Delete Item"
                  LabelText="Delete Item"
                  TemplateAlias="THRRW"
                  Sequence="25"
                  Image32by32="_layouts/images/MyWP/ribbon/deleteitem-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/deleteitem-16.png" />
          <Button Id="Ribbon.MyWP.Manage.Comments"
                  Command="MyWP.Cmd.Comments"
                  Description="Comments"
                  LabelText="Comments"
                  TemplateAlias="ONERW"
                  Sequence="30"
                  Image32by32="_layouts/images/MyWP/ribbon/comments-32.ico"
                  Image16by16="_layouts/images/MyWP/ribbon/comments-16.png" />
        </Controls>
      </Group>
      <Group Id="Ribbon.MyWPTab.MyWPGroupViews"
             Description="Views group description"
             Title="Views"
             Command="MyWPContextualTab.EnableMyWPGroupViews"
             Sequence="54"
             Template="Ribbon.Templates.MyWPTemplate">
        <Controls Id="Ribbon.MyWP.Views.Controls">
          <Button Id="Ribbon.MyWP.Views.SaveView"
                  Command="MyWP.Cmd.SaveView"
                  Description="Save View"
                  LabelText="Save View"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/saveview-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/saveview-16.png" />
          <Button Id="Ribbon.MyWP.Views.RenameView"
                  Command="MyWP.Cmd.RenameView"
                  Description="Rename View"
                  LabelText="Rename View"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/renameview-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/renameview-16.png" />
          <Button Id="Ribbon.MyWP.Views.DeleteView"
                  Command="MyWP.Cmd.DeleteView"
                  Description="Delete View"
                  LabelText="Delete View"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/deleteview-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/deleteview-16.png" />
          <Label Id="Ribbon.MyWP.Views.CurrentViewLabel"
                 LabelText="Current View:"
                 ForId="Ribbon.MyWP.Views.CurrentViewDropDown"
                 TemplateAlias="THRRW" />
          <DropDown Id="Ribbon.MyWP.Views.CurrentViewDropDown"
                    Command="MyWP.Cmd.CurrentViewDropDown"
                    PopulateDynamically="true"
                    PopulateQueryCommand="MyWP.Cmd.CurrentViewDropDown.Populate"
                    TemplateAlias="THRRW" />
          <Button Id="Ribbon.MyWP.Views.SelectColoumns"
                  Command="MyWP.Cmd.SelectColoumns"
                  Description="Select Coloumns"
                  LabelText="Select Coloumns"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/selectcoloumns-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/selectcoloumns-16.png" />
          <Button Id="Ribbon.MyWP.Views.ShowHideFilters"
                  Command="MyWP.Cmd.ShowHideFilters"
                  Description="Show/Hide Filters"
                  LabelText="Show/Hide Filters"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/showhidefilters-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/showhidefilters-16.png" />
          <Button Id="Ribbon.MyWP.Views.ViewCompletedItems"
                  Command="MyWP.Cmd.ViewCompletedItems"
                  Description="View Completed Items"
                  LabelText="View Completed Items"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/viewcompleteditems-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/viewcompleteditems-16.png" />
          <Button Id="Ribbon.MyWP.Views.ClearCompletedItems"
                  Command="MyWP.Cmd.ClearCompletedItems"
                  Description="Clear Completed Items"
                  LabelText="Clear Completed Items"
                  TemplateAlias="THRRW"
                  Image32by32="_layouts/images/MyWP/ribbon/clearcompleteditems-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/clearcompleteditems-16.png" />
        </Controls>
      </Group>
      <Group Id="Ribbon.MyWPTab.MyWPGroupShareTrack"
             Description="Group description"
             Title="Share &amp; Track"
             Command="MyWPContextualTab.EnableMyWPGroupShareTrack"
             Sequence="55"
             Template="Ribbon.Templates.MyWPTemplate">
        <Controls Id="Ribbon.MyWP.ShareTrack.Controls">
          <Button Id="Ribbon.MyWP.ShareTrack.AlertMe"
                  Command="MyWP.Cmd.AlertMe"
                  Description="Alert Me"
                  LabelText="Alert Me"
                  TemplateAlias="ONERW"
                  Image32by32="_layouts/images/MyWP/ribbon/alertme-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/alertme-16.png" />
        </Controls>
      </Group>
      <Group Id="Ribbon.MyWPTab.MyWPGroupWorkflows"
             Description="Group description"
             Title="Workflows"
             Command="MyWPContextualTab.EnableMyWPGroupWorkflows"
             Sequence="56"
             Template="Ribbon.Templates.MyWPTemplate">
        <Controls Id="Ribbon.MyWP.Workflows.Controls">
          <Button Id="Ribbon.MyWP.Workflows.Workflows"
                  Command="MyWP.Cmd.Workflows"
                  Description="Workflows"
                  LabelText="Workflows"
                  TemplateAlias="ONERW"
                  Image32by32="_layouts/images/MyWP/ribbon/workflows-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/workflows-16.png" />
          <Button Id="Ribbon.MyWP.Workflows.ApproveReject"
                  Command="MyWP.Cmd.ApproveReject"
                  Description="Approve Reject"
                  LabelText="Approve Reject"
                  TemplateAlias="ONERW"
                  Image32by32="_layouts/images/MyWP/ribbon/approvereject-32.png"
                  Image16by16="_layouts/images/MyWP/ribbon/approvereject-16.png" />
        </Controls>
      </Group>
    </Groups>
  </Tab>
</ContextualGroup>

Definition for Contextual Tab:

<GroupTemplate Id="Ribbon.Templates.MyWPTemplate">
  <Layout Title="MyWPLayout"
          LayoutTitle="MyWPLayout">
    <OverflowSection Type="OneRow"
                     DisplayMode="Large"
                     TemplateAlias="ONERW" />
    <OverflowSection Type="ThreeRow"
                     DisplayMode="Medium"
                     TemplateAlias="THRRW" />
  </Layout>
</GroupTemplate>

MyWPContextualTabWebComponent.js:

Type.registerNamespace('ContextualTabWebPart');

var _webPartPageComponentId;

ContextualTabWebPart.CustomPageComponent = function ContextualTabWebPart_CustomPageComponent(webPartPcId, gridId)
{
    this._webPartPageComponentId = webPartPcId;
    this.$gridId = gridId;

    ContextualTabWebPart.CustomPageComponent.initializeBase(this);
}

ContextualTabWebPart.CustomPageComponent.prototype = {

    $gridId: null,

    init: function ContextualTabWebPart_CustomPageComponent$init() { },

    getFocusedCommands: function ContextualTabWebPart_CustomPageComponent$getFocusedCommands()
    {
        return [
        'MyWPContextualTab.EnableMyWPTab',
        'MyWPContextualTab.EnableMyWPGroupNew',
        'MyWP.Cmd.NewItem',
        'MyWPContextualTab.EnableMyWPGroupManage',
        'MyWP.Cmd.ViewItem',
        'MyWP.Cmd.EditItem',
        'MyWP.Cmd.VersionHistory',
        'MyWP.Cmd.ItemPermissions',
        'MyWP.Cmd.DeleteItem',
        'MyWP.Cmd.Comments',
        'MyWPContextualTab.EnableMyWPGroupViews',
        'MyWP.Cmd.SaveView',
        'MyWP.Cmd.RenameView',
        'MyWP.Cmd.DeleteView',
        'MyWP.Cmd.CurrentViewDropDown',
        'MyWP.Cmd.CurrentViewDropDown.Populate',
        'MyWP.Cmd.SelectColoumns',
        'MyWP.Cmd.ShowHideFilters',
        'MyWP.Cmd.ViewCompletedItems',
        'MyWP.Cmd.ClearCompletedItems',
        'MyWPContextualTab.EnableMyWPGroupShareTrack',
        'MyWP.Cmd.AlertMe',
        'MyWPContextualTab.EnableMyWPGroupWorkflows',
        'MyWP.Cmd.Workflows',
        'MyWP.Cmd.ApproveReject'];
    },

    getGlobalCommands: function ContextualTabWebPart_CustomPageComponent$getGlobalCommands()
    {
        return [];
    },

    isFocusable: function ContextualTabWebPart_CustomPageComponent$isFocusable()
    {
        return true;
    },

    canHandleCommand: function ContextualTabWebPart_CustomPageComponent$canHandleCommand(commandId)
    {
        //Contextual Tab commands

        var commands = [
        'MyWPContextualTab.EnableMyWPTab',
        'MyWPContextualTab.EnableMyWPGroupNew',
        'MyWP.Cmd.NewItem',
        'MyWPContextualTab.EnableMyWPGroupManage',
        'MyWP.Cmd.ViewItem',
        'MyWP.Cmd.EditItem',
        'MyWP.Cmd.VersionHistory',
        'MyWP.Cmd.ItemPermissions',
        'MyWP.Cmd.DeleteItem',
        'MyWP.Cmd.Comments',
        'MyWPContextualTab.EnableMyWPGroupViews',
        'MyWP.Cmd.SaveView',
        'MyWP.Cmd.RenameView',
        'MyWP.Cmd.DeleteView',
        'MyWP.Cmd.CurrentViewDropDown',
        'MyWP.Cmd.CurrentViewDropDown.Populate',
        'MyWP.Cmd.SelectColoumns',
        'MyWP.Cmd.ShowHideFilters',
        'MyWP.Cmd.ViewCompletedItems',
        'MyWP.Cmd.ClearCompletedItems',
        'MyWPContextualTab.EnableMyWPGroupShareTrack',
        'MyWP.Cmd.AlertMe',
        'MyWPContextualTab.EnableMyWPGroupWorkflows',
        'MyWP.Cmd.Workflows',
        'MyWP.Cmd.ApproveReject'];

        for (var i = 0; i < commands.length; i++)
        {
            if (commandId === commands[i]) return true;
        }
    },

    handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence)
    {
        if (commandId === 'MyWP.Cmd.NewItem') doActionOnItem(this.$gridId, 'new');

        if (commandId === 'MyWP.Cmd.ViewItem') doActionOnItem(this.$gridId, 'view');

        if (commandId === 'MyWP.Cmd.EditItem') doActionOnItem(this.$gridId, 'edit');

        if (commandId === 'MyWP.Cmd.VersionHistory') doActionOnItem(this.$gridId, 'version');

        if (commandId === 'MyWP.Cmd.ItemPermissions') doActionOnItem(this.$gridId, 'perms');

        if (commandId === 'MyWP.Cmd.DeleteItem') doActionOnItem(this.$gridId, 'delete');

        if (commandId === 'MyWP.Cmd.Comments') doActionOnItem(this.$gridId, 'comments');

        if (commandId === 'MyWP.Cmd.AlertMe') doActionOnItem(this.$gridId, 'subscribe');

        if (commandId === 'MyWP.Cmd.Workflows') doActionOnItem(this.$gridId, 'workflows');

        if (commandId === 'MyWP.Cmd.ApproveReject') doActionOnItem(this.$gridId, 'approve');

        if (commandId === 'MyWP.Cmd.ClearCompletedItems') doActionOnItem(this.$gridId, 'clear-completed');
    },

    getId: function ContextualTabWebPart_CustomPageComponent$getId()
    {
        return this._webPartPageComponentId;
    }
}

ContextualTabWebPart.CustomPageComponent.registerClass('ContextualTabWebPart.CustomPageComponent', CUI.Page.PageComponent);
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("MyWPContextualTabPageComponent.js");

I've removed some images from this question on the imageshack.com domain, as they were no longer available. I am not sure if there is enough information in the question to keep it open? — halfer

Vaibhav Chopra Vaibhav Chopra · Accepted Answer · 2011-07-07T11:12:27

Whenever you are calling the js function, write this line:

SP.SOD.executeOrDelayUntilScriptLoaded([YOUR JS FUNCTION HERE], ""sp.ribbon.js"");

This will wait for the ribbon js to load and then execute your js function. See if this helps!

SharePoint: Custom Ribbon + IE = Error in cui.debug.js (Invalid argument.)

1 Answers