This is a migrated thread and some comments may be shown as answers.

[Solved] jquery.validate.min.js error in IE8/9 with GRID

5 Answers 148 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Jeff asked on 25 Jul 2011, 09:33 AM

We have the latest Q2 release and are getting a validation problem in IE8/9 when using an AJAX bound grid. If we run it in FireFox it swallows the error.

Whenever we have a grid on a page and other controls that have validation whenever we on-blur from a validated control we receive the following error

Microsodt JScript runtime error:'c.validator.methods[...]'is null or not an object

This is in the jquery.validate.min.js under the Telerik 2011.2.712 directory which in itself is weird as we have told telerik to use our validate file in the layout file?

Here is the code that we are using:

<tr>

<td>@Html.LabelFor(x => x.RiskDescription, null, null, null)</td>

<td>@Html.EditorFor(x => x.RiskDescription)</td>

</tr>

<tr>

<td>@Html.LabelFor(x => x.RiskOccupationSelectedId, null, null, null)</td>

<td

>@Html.DropDownListFor(x => x.RiskOccupationSelectedId, new SelectList(Model.OccupationTypes, "Value", "Text"), "-- Select --")</

td>

</tr>

</table>

@(Html.Telerik().Grid<GoodsInTransitSpecifiedVehicleViewModel>()

.Name("specifiedVehiclesGrid")

.ClientEvents(events => events.OnEdit("onEdit"))

.Editable(editing => editing.Mode(GridEditMode.PopUp))

.Sortable()

.Filterable()

.DataKeys(keys => keys.Add(r => r.SpecifiedVehicleID))

.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Add New Specified Vehicle to risk" }))

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("GetSpecifiedVehicles", "GoodsInTransitRisk", new { specifiedVehiclesRiskId = Model.RiskID })

.Update("UpdateSpecifiedVehicles", "GoodsInTransitRisk", new { specifiedVehiclesRiskId = Model.RiskID })

.Insert("InsertSpecifiedVehicles", "GoodsInTransitRisk", new { specifiedVehiclesRiskId = Model.RiskID })

.Delete("DeleteSpecifiedVehicles", "GoodsInTransitRisk", new { specifiedVehiclesRiskId = Model.RiskID }))

.Columns(columns =>

{

columns.Bound(r => r.SpecifiedVehicleID).Hidden().ReadOnly();

columns.Command(commands =>

{

commands.Edit().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Edit Vehicle" });

commands.Delete().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Delete Vehicle" });

}).Title("Commands").Width(110);

columns.Bound(r => r.Registration).Width(100);

columns.Bound(r => r.SumInsuredPerVehicle).Width(100)

.Aggregate(aggregates => aggregates.Sum())

.ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0}', Sum) : 0 #>");

columns.Bound(r => r.Premium).Width(100).Format("{0:0.0000}");

columns.Bound(r => r.Excess).Width(100).Format("{0:0.0000}");

columns.Bound(r => r.IncreasedXsDiscount).Width(100).Format("{0:0.0000}");

columns.Bound(r => r.UseDiscount);

columns.Bound(r => r.TechnicalPrice).Format("{0:0.00}").Width(100)

.Aggregate(aggregates => aggregates.Sum())

.ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0.00}', Sum) : 0 #>");

})

)

Any help would be greatly appreciated as if we cannot fix this or find a resolution we will have to move to DevExpress

Thanks

Jeff...........

5 Answers, 1 is accepted

answered on 29 Jul 2011, 10:26 AM

This is now a very serious issue for us. I have included our _Layout.cshtml here as well as the view and the partial views.
We get the 'c.validator.methods[...]' is null or not an object error when a users selects the dropdownlist on the CreateEditPartial.cshtml view and then clicks off the list (i.e. doesnt click in the dropdownlist). This only happens if the grid is editable. Any pointers would be ver much appreciated.

_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.13.custom.css")" rel="Stylesheet" type="text/css" />

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.vista.css")

.Add("screen.css"))

)

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.13.custom.min.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/EditorHookup.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/RangeDateValidator.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/Amlin.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<!--@(Html.Telerik().ScriptRegistrar().jQuery(false))

@(Html.Telerik().ScriptRegistrar().jQueryValidation(false))-->

</head>

<body>

@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false))

@if (IsSectionDefined("header"))

{

@RenderSection("header", false)

}

<div style="height: 100%;">

@RenderBody()

</div>

</body>

</html>

Edit.cshtml

@model GRID.ViewModels.FrozenFoodSectionViewModel

@{

ViewBag.Title = "Edit";

}

@Html.HiddenFor(model => model.FrozenFoodsSectionID)

@Html.HiddenFor(model => model.PolicyZoneID)

@{Html.RenderPartial("PolicyHeader");}

<div class="frame details">

<h2>

Edit Frozen Foods Section</h2>

@{Html.Telerik().TabStrip()

.Name("FrozenFoodsTabStrip")

.ClientEvents(events => events.OnSelect("onTabSelect"))

.Effects(fx => fx.Expand()

.Opacity()

.OpenDuration(150)

.CloseDuration(150))

.Items(tabstrip =>

{

tabstrip.Add()

.Text("Section")

.Content(Html.Partial("CreateEditPartial").ToHtmlString());

tabstrip.Add()

.Text("Risks")

.Content(Html.Partial("RiskIndex").ToHtmlString());

})

.SelectedIndex(0)

.Render();

}

<script type="text/javascript">

$("#saveButton").button({ icons: { primary: "ui-icon-check"} });

$(".cancelLink").button({ icons: { primary: "ui-icon-close"} });

$("#risksLink").button({ icons: { primary: "ui-icon-zoomin"} });

$(".editLink").button({ icons: { primary: "ui-icon-zoomin"} });

$(".deleteLink").button({ icons: { primary: "ui-icon-close"} });

$(".addRisk").button({ icons: { primary: "ui-icon-plus"} });

</script>

</div>

CreateEditPartial.cshtml

@model GRID.ViewModels.FrozenFoodSectionViewModel

@using (Html.BeginForm())

{

<div style="width: 90em; float: none">

@Html.HiddenFor(model => model.FrozenFoodsSectionID)

<div>

@Html.ValidationSummary()

</div>

<fieldset class="editor-label">

<div style="width: 50em; float: left">

<table>

<tr>

<td>

@Html.LabelFor(model => model.SectionName, null, null, null)

</td>

<td>

@Html.TextBoxFor(model => model.SectionName)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.LloydsRiskCode, null, null, null)

</td>

<td>

@Html.DropDownListFor(model => model.LloydsRiskCode, new SelectList(Model.LloydsRiskCodes, "Value", "Text"), "-- Select --", new { style = Request.Browser.Id.ToString().StartsWith("ie") ? "width:383px; border:1px solid blue;" : "width:200px; border:1px solid blue;" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.TotalSumInsured, null, null, null)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.TotalSumInsured)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.Excess, null, null, null)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.Excess)

</td>

</tr>

</table>

</div>

<div style="width: 37em; float: right">

<table>

<tr>

<td>

@Html.CheckBoxFor(model => model.ManuallyRated)

@Html.LabelFor(model => model.ManuallyRated)

</td>

</tr>

<tr>

<td>

@Html.CheckBoxFor(model => model.PremiumOverride)

@Html.LabelFor(model => model.PremiumOverride)

</td>

</tr>

</table>

</div>

<div style="width: 90em; float: left">

<table id="discounts_TotalsTable">

<tr>

<th>

Discount/Load

</th>

<th>

Rate %

</th>

<th>

Value

</th>

<th>

Price

</th>

<th>

Calculated

<br />

Premium

</th>

<th>

<button id="RateButton">

Rate</button>

</th>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.IncreasedExcess, null, null, null)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.IncreasedExcess)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.IncreasedExcessValue)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.IncreasedExcessPrice)

</td>

</tr>

<tr>

<td>@Html.LabelFor(model => model.SectionDiscountRate, null, null, null)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.SectionDiscountRate)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.SectionDiscountCalcValue)

</td>

<td>

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.SectionDiscountCalcPrice)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.SectionDiscountValue)

</td>

<td>

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.SectionDiscountValue)

</td>

<td>

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.SectionDiscountValueCalcPrice)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.BrokerCommission, null, null, null)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.BrokerCommission)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.BrokerCommissionCalcValue)

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.TotalTechnicalPrice)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.TotalTechnicalPrice)

</td>

<td>

@Html.LabelFor(model => model.TaxTypeID)

</td>

<td>

@Html.DropDownListFor(model => model.TaxTypeID, new SelectList(Model.TaxTypes, "Value", "Text"), "-- Select --", new { style = "width:110px; border:1px solid blue" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.Gross)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.Gross)

</td>

<td>

@Html.LabelFor(model => model.TaxValue)

</td>

<td class="enabledNumeric">

@Html.EditorFor(model => model.TaxValue)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.Net)

</td>

<td class="disabledNumeric">

@Html.EditorFor(model => model.Net)

</td>

<td>

Min. Premium:

</td>

<td>

xxx

</td>

</tr>

</table>

</div>

</fieldset>

<div style="width: 90em; float: none">

<button id="saveButton" name="submitButton" value="save" type="submit">

Save</button>

@Html.ActionLink("Back", "Edit", "PolicyZone", new { policyZoneID = Model.PolicyZoneID, policyID = Model.PolicyID, policyVersion = Model.PolicyVersion }, new { @class = "cancelLink" })

</div>

<script src="@Url.Content("~/Scripts/Section.js")" type="text/javascript"></script>

<script type="text/javascript">

$("#RateButton").button({ icons: { primary: "ui-icon-gear"} });

$(function () {

// Enable and Disable rate Button according to premium override field.

$("#PremiumOverride").click(function () {

if ($("#PremiumOverride").is(":checked")) {

$("#RateButton").attr("disabled", "disabled");

}

else {

$("#RateButton").removeAttr("disabled");

}

});

// Ajax Call off to ratabase service to get rating for the section

$("#RateButton").click(function (event) {

alert("Rating 1..2..3..");

event.preventDefault();

});

function onTabSelect(e) {

var item = $(e.item);

if (item.find('> .t-link').text() == 'Section') {

partialUpdateFromRiskTab();

}

function partialUpdateFromRiskTab() {

var polID = $("#PolicyZoneID").attr("value");

var secID = $("#FrozenFoodsSectionID").attr("value");

var jSonData = '{ "policyZoneID" : "' + polID + '", "sectionID" : "' + secID + '"}';

$.ajax({

url: '/FrozenFoodsSection/SectionReload',

type: 'POST',

data: jSonData,

dataType: 'json',

contentType: 'application/json; charset=utf-8',

success: function (data) {

$("#TotalSumInsured").val(data.TotalSumInsured);

$("#TotalTechnicalPrice").val(data.TotalTechnicalPrice.toFixed(2));

$("#IncreasedExcessValue").val(data.IncreasedExcessValue.toFixed(2));

$("#IncreasedExcessPrice").val(data.IncreasedExcessPrice.toFixed(2));

$("#SectionDiscountCalcValue").val(data.SectionDiscountCalcValue.toFixed(2));

$("#SectionDiscountCalcPrice").val(data.SectionDiscountCalcPrice.toFixed(2));

$("#SectionDiscountValueCalcPrice").val(data.SectionDiscountValueCalcPrice.toFixed(2));

$("#BrokerCommissionCalcValue").val(data.BrokerCommissionCalcValue.toFixed(2));

$("#Net").val(data.Net.toFixed(2));

},

error: function (data) {

//alert(data);

}

});

}

$(function () {

$('#IncreasedExcess').blur(function () {

partialUpdateFromEdit();

})

});

$(function () {

$('#SectionDiscountRate').blur(function () {

partialUpdateFromEdit();

})

});

$(function () {

$('#SectionDiscountValue').blur(function () {

partialUpdateFromEdit();

})

});

$(function () {

$('#BrokerCommission').blur(function () {

partialUpdateFromEdit();

})

});

function partialUpdateFromEdit() {

var polID = $("#PolicyZoneID").attr("value");

var secID = $("#FrozenFoodsSectionID").attr("value");

var increasedExcess = $("#IncreasedExcess").attr("value");

var sectionDiscountRate = $("#SectionDiscountRate").attr("value");

var sectionDiscountValue = $("#SectionDiscountValue").attr("value");

var brokerCommission = $("#BrokerCommission").attr("value");

var net = $("#Net").attr("value");

var jSonData = '{ "policyZoneID" : " ' + polID +

'", "sectionID" : "' + secID +

'", "increasedExcess": "' + increasedExcess +

'", "sectionDiscountRate": "' + sectionDiscountRate +

'", "sectionDiscountValue": "' + sectionDiscountValue +

'", "brokerCommission": "' + brokerCommission + '"}';

$.ajax({

url: '/FrozenFoodsSection/SectionRatesReload',

type: 'POST',

data: jSonData,

dataType: 'json',

contentType: 'application/json; charset=utf-8',

success: function (data) {

$("#TotalSumInsured").val(data.TotalSumInsured);

$("#TotalTechnicalPrice").val(data.TotalTechnicalPrice.toFixed(2));

$("#IncreasedExcessValue").val(data.IncreasedExcessValue.toFixed(2));

$("#IncreasedExcessPrice").val(data.IncreasedExcessPrice.toFixed(2));

$("#SectionDiscountCalcValue").val(data.SectionDiscountCalcValue.toFixed(2));

$("#SectionDiscountCalcPrice").val(data.SectionDiscountCalcPrice.toFixed(2));

$("#SectionDiscountValueCalcPrice").val(data.SectionDiscountValueCalcPrice.toFixed(2));

$("#BrokerCommissionCalcValue").val(data.BrokerCommissionCalcValue.toFixed(2));

$("#Net").val(data.Net.toFixed(2));

},

error: function (data) {

alert(data);

}

});

}

</script>

}

RiskIndex.cshtml

@using Telerik.Web.Mvc.UI;
@model GRID.ViewModels.FrozenFoodSectionViewModel
@{
    ViewBag.Title = "Index";
}
<div>
    @Html.ValidationSummary()
</div>
@(Html.Telerik().Grid<GRID.ViewModels.FrozenFoodsRiskViewModel>()
     .Name("risksGrid")
     .ClientEvents(events => events.OnEdit("onEdit"))
     .Editable(editing => editing.Mode(GridEditMode.PopUp))
     .Sortable()
     .Filterable()
     .DataKeys(keys => keys.Add(r => r.RiskID))
     .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Add New Risk" }))
     .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_RisksIndex", "FrozenFoodsSection", new { policyZoneID = Model.PolicyZoneID, sectionID = Model.FrozenFoodsSectionID })
                .Update("_UpdateRisk", "FrozenFoodsSection", new { policyZoneID = Model.PolicyZoneID, sectionID = Model.FrozenFoodsSectionID })
                .Insert("_InsertRisk", "FrozenFoodsSection", new { policyZoneID = Model.PolicyZoneID, sectionID = Model.FrozenFoodsSectionID })
                .Delete("_DeleteRisk", "FrozenFoodsSection", new { policyZoneID = Model.PolicyZoneID, sectionID = Model.FrozenFoodsSectionID });
        })
     .Columns(columns =>
         {
             columns.Bound(r => r.RiskID).Hidden();
             columns.Command(commands =>
                 {
                     commands.Edit().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Edit Risk"});
                     commands.Delete().ButtonType(GridButtonType.Image).HtmlAttributes(new { @title = "Delete Risk" });
                 }).Title("Commands").Width(110);
             columns.Bound(r => r.SumInsured).Width(100)
                 .Aggregate(aggregates => aggregates.Sum())
                 .ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0}', Sum) : 0 #>");
             columns.Bound(r => r.Rate).Width(100).Format("{0:0.0000}");
             columns.Bound(r => r.Age).Width(50);
             columns.Bound(r => r.Description).Width(200);
             columns.Bound(r => r.InGuaranteePeriod).Width(100);
             columns.Bound(r => r.AgeDiscount).Width(100).Format("{0:0.0000}");
             columns.Bound(r => r.TechnicalPrice).Format("{0:0.00}").Width(100)
                 .Aggregate(aggregates => aggregates.Sum())
                 .ClientFooterTemplate("Total: <#= typeof Sum != 'undefined' ? $.telerik.formatString('{0:0.00}', Sum) : 0 #>");
         })
 )
 
<div style="width: 90em; float: none">
    @Html.ActionLink("Back", "Edit", "PolicyZone", new { policyZoneID = Model.PolicyZoneID, policyID = Model.PolicyID, policyVersion = Model.PolicyVersion }, new { @class = "cancelLink" })
</div>
 
<script type="text/javascript">
    function onEdit(e) {
        $(e.form).find("#RiskID").closest(".editor-field").prev().andSelf().hide();
        $(e.form).find("#TechnicalPrice").closest(".editor-field").prev().andSelf().hide();
    }
</script>

answered on 29 Jul 2011, 10:53 AM

Hello Lee,

It seems that your ScriptRegistrar is not at the end of your body. You can try moving the declaration after @RenderBody().

Other than there are no other problems in the provided code. If the problem persist please provide a sample project which we can run locally.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 29 Jul 2011, 11:11 AM

Thanks for the prompt reply Atanas, much appreciated. I have modified the layout file and I've also replicated in a much simpler view.