[Solved] "Microsoft JScript runtime error: Object expected" MVC error

[Jeff]

I'm getting the "Microsoft JScript runtime error: Object expected" error using Telerik for MVC. These are the lines causing the issue:

@Html.Telerik().ScriptRegistrar().OnDocumentReady(
@<text>
/* attach event handler to "check all" checkbox */
$('#checkAllMembers').click(function checkAll()
{
$("#ResultsGrid tbody input:checkbox").attr("checked", this.checked);
});
</text>)

The thing is, the checkAll function actually does work! I have the following line at the top of my view:

<link href="@Url.Content("~/Content/Site.css")" rel="Stylesheet" type="text/css" />
   <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.validate-vsdoc.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"  type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
      @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.sunset.css").Combined(true).Compress(true)))
   @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.examples.css").Add("telerik.common.css").Add("telerik.rtl.css").Combined(true).Compress(true)))

I have the following line at the bottom of my SiteLayout.cshtml:

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))

Even tried it with:

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.min.js").Combined(true).Compress(true)))

Haven't been able to resolve this yet. Thanks in advance!.

[Atanas Korchev]

Hi Jeff,

 This is a very generic JavaScript error and we are not sure what may cause it in your case. From first glance the I see only one problem - jQuery is included twice - by you and by the ScriptRegistrar. You can try disabling the latter like this:

@(Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true)))

In case the problem persists please provide a runnable project which we can try locally.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Hello Atana, I'm not sure where in my code you saw the JQuery(false) line. I only have it listed in my entire procect once (in Telerik.Web.Mvc.xml). Unless I'm missing it somewhere else?

[Atanas Korchev]

Hello Jeff,

 Your code does not contain that line. I asked you to try including it to see if it would make any difference. Right now you have two different versions of jQuery included in your page which can cause all kinds of problems. By setting jQuery(false) in your ScriptRegistrar you will prevent the second jQuery script.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Thanks for the reply. I added that and I then got 2 jquery errors.
I then backed out the change you suggested and went back to where I was. I broke out of the error at debug time and chaptured the entire "resolved" JQuery statement in case it may help:

jQuery(document).ready(

 

function(){

 

jQuery(

 

'#ResultsGrid').tGrid({columns:[{"attr":" style=\"text-align:center\"","title":null,"template":"\u003cinput type=\u0027checkbox\u0027 id=\u0027checkedMembers\u0027 name=\u0027checkedMembers\u0027 value=\u0027\u003c#= MemberKey #\u003e\u0027 /\u003e"},{"attr":" style=\"text-align:center\"","title":null,"template":"\u003ca href=\"/Home/HideRowPerm/\u003c#= MemberKey #\u003e\"\u003e\u003cimg src=\"/Content/themes/base/images/Hide.png\")\u003e\u003c/a\u003e"},{"attr":" style=\"text-align:center\"","title":null,"template":"\u003ca href=\"/Home/HideRowTemp/\u003c#= MemberKey #\u003e\"\u003e\u003cimg src=\"@Url.Content(\"~/Content/themes/base/images/HideTemp.png\") alt=\"Hide Temp\" style=\"border: none\")\u003e\u003c/a\u003e"},{"title":"Unique ID","member":"EmpID","type":"String"},{"title":"SWID","member":"MemberKey","type":"Number"},  ], pageSize:20, total:10, currentPage:1, pageSizesInDropDown:["5","10","20","50"], pageOnScroll:false, keyboardNavigation:false, ajax:{"selectUrl":"/Home/_Paging?useMock=False"}, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup"}, noRecordsTemplate:'No records to display.'});

 

/* attach event handler to "check all" checkbox */

$(

 

'#checkAllMembers').click(function checkAll()

 

{

$(

 

"#ResultsGrid tbody input:checkbox").attr("checked", this.checked);

 

});

});

Here's the Grid this function is referring to:

   @{ Html.Telerik().Grid(Model).Name("ResultsGrid").Columns(columns =>

                                                                               {

 columns.Template(

 @<text>

<input name="checkedMembers" id="checkedMembers" type="checkbox"                                                                                                   value="@item.MemberKey" title="checkedMembers"                                                                                                  />

     </text>)

.HeaderTemplate(

 @<text>

 <input type="checkbox" title="check all records" id="checkAllMembers" />

  </text>

  )

 .ClientTemplate("<input type='checkbox' id='checkedMembers' name='checkedMembers' value='<#= MemberKey #>' />")

 .Width(50)

 .HeaderHtmlAttributes(new {style = "text-align:center"})

   .HtmlAttributes(new {style = "text-align:center"});

  columns.Template(

   @<text> <a href="@Url.Action("HideRowPerm", "Home", new {id = item.MemberKey, useMock = false.ToString()})" onclick="javascript:return ConfirmHiding();" >

    <img src="@Url.Content("~/Content/themes/base/images/hide.png")" alt="Hide Perm" style="border: none;" /></a>

    </text>)

   .HeaderTemplate(

  @<text>

  Hide Row <br />Perm

  </text>

 )

 .ClientTemplate(@"<a href=""/Home/HideRowPerm/<#= MemberKey #>""><img src=""/Content/themes/base/images/Hide.png"")></a>")

 .Width(15)

 .HeaderHtmlAttributes(new { style = "text-align:center" })

   .HtmlAttributes(new { style = "text-align:center" }); 

 columns.Template(

    @<text> <a href="@Url.Action("HideRowTemp", "Home", new { id = item.MemberKey, useMock = false.ToString() })" onclick="javascript:return TempHiding();" >

      <img src="@Url.Content("~/Content/themes/base/images/HideTemp.png")" alt="Hide Temp" style="border: none;" /></a>

   </text>)

  .HeaderTemplate(

 @<text>

    Hide Row <br />Temp

  </text>

        )

    .ClientTemplate(@"<a href=""/Home/HideRowTemp/<#= MemberKey #>""><img src=""@Url.Content(""~/Content/themes/base/images/HideTemp.png"") alt=""Hide Temp"" border: none"")></a>")

 .Width(15)

 .HeaderHtmlAttributes(new { style = "text-align:center" })

.HtmlAttributes(new { style = "text-align:center" }); 

  columns.Bound(o => o.EmpID).Width(10).Title("Unique ID");

 columns.Bound(o => o.MemberKey).Title("SWID");        })

 .DataBinding(dataBinding => dataBinding.Ajax().Select("_Paging", "Home", new { useMock = false.ToString() }))

 .Pageable(paging => paging.PageSize(20)

  .Style(GridPagerStyles.NextPreviousAndNumeric)

  .Position(GridPagerPosition.Bottom)).Render();

 }

 

 

[Jeff]

Well, I got it working. There MUST be a better way. Here's what I did:
1) removed the "@Html.Telerik().ScriptRegistrar" line from the bottom of my SiteLayout.cshtml file.
2) Modifified the ScriptRegistrar command in my view from:

@Html.Telerik().ScriptRegistrar().OnDocumentReady(

To:

@Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.min.js").Combined(true).Compress(true)).OnDocumentReady(

So, in essence I will have to add the ScriptRegistrar to all views that need it.

[Atanas Korchev]

Hi Jeff,

 I think I know what the problem is. You are having two ScriptRegistrars which output themselves. Try making the one using OnDocumentReady like this:

@ {
     Html.Telerik().ScriptRegistrar().OnDocumentReady();
}

This will only register the document ready statement without actually rendering another script registrar.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Thanks for the reply. Did you mean for the OnDocumentReady statement to be empty? If so I get the error:
CS1501: No overload for method 'OnDocumentReady' takes 0 arguments

[Jeff]

Well, in trying to use your modification, I had put back the lin the bottom of my SiteLayout.cshtml file:

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(

 

true).Compress(true)))

And left my code in the bottom of my "View" file:

 

@Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add(

 

"telerik.common.min.js").Combined(true).Compress(true)).OnDocumentReady(

 

@<text>

/* attach event handler to "check all" checkbox */

$('#checkAllMembers').click(function checkAll()

{

$("#ResultsGrid tbody input:checkbox").attr("checked", this.checked);

});

</text>)

Error seems to be gone! The main change I had made was adding the rest of my "View" ScriptRegistrar as:
().DefaultGroup(group => group.Add("telerik.common.min.js").Combined(true).Compress(true)).

Before the DocumentReady portion.

If I just use the following in my "View" I get the Jscript Error:

@Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text>...

So, in short, for me it seems as though the line that allows all to work is:
@Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.min.js").Combined(true).Compress(true)).OnDocumentReady(@<text>...

Strange?

[Atanas Korchev]

Hello Jeff,

 Indeed the OnDocumentReady method requires at least one argument. You need the following statement:

@{

Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text>..</text>);

}

This is different from @(Html.ScriptResgitrar())  as it does not make the script registrar to render.

In short the ScriptRegistrar in the master page (layout) should be output with @() and registering view specific OnDocumentReady calls should be made using @{ }. Please note that you should end the statement with ";" if you are using the @{ } syntax.

Regards,
Atanas Korchev
the Telerik team

[Jeff]

Thank you Atanas! That did it. I had that originally (following a demo on your site) but must have changed it while debugging. The checkall box does in fact work without the JS Error. Thanks again!