.NET 4.6, MVC 5
$(document).ready is not fired on any page using a view that is returned from a controller using @Html.ActionRender I know that some Infragistics component is the culprit, and I expect it to be the igLoader, but not quite sure.
I don't see any errors regarding jquery missing, or resources not found. window.on('load') does get triggered, issues started happening right after I tried to render the subview
There are no issues whatsoever when I run my subview. The weird reason is that sometimes it works, sometimes it doesn't. It depends on the ammount of data that needs to be rendered (depends on data in database, dependent on model and entityname parameters)
As you can see in the code below I have already added alrts as well to be sure that doc.ready is not called. The alerts inside the script tags work, but not the ones when I test for document.ready
As stated by the documentation the igLoader has to be included on each page, even partial views when using the mvc helper, which I do
MainController Action
public ActionResult Index(string modelName, string entityName, string view, string cs)ityName){ //generation of grid features is the same for each grid //columns depends on which modelName and entityName + datatype, dynamic database dependent on client //returns view with a model which has a property *.GridModel which is the generated gridmodel to be used in the view })
Stripped down Main View with issues
@using Infragistics.Web.Mvc @model Factstone.Web.Models.Views.MemberVm @{ ViewBag.Title = $"{Model.EntityName}"; Layout = "~/Views/Shared/_Infragistics.cshtml"; const string gridId = "grdMember"; const string frmMemberId = "frmMember"; const string btnMemberAddId = "btnMemberAdd"; const string btnMemberSaveId = "btnMemberSave"; const string btnMemberCancelId = "btnMemberCancel"; Model.GridModel.ID = gridId; } @section header { @Styles.Render("~/css/members") @Styles.Render("~/css/changesets") } <h1>Entity: @Model.EntityName</h1> @if (Model.ShowDescription) { <p>@Model.EntityDescription</p> } <!-- Issue with autodetectlocal set to true. Waiting for customer support. See: http://es.infragistics.com/community/forums/p/107751/507667.aspx#507667 --> @{ Html.Infragistics().Loader().ScriptPath(Url.Content(Model.ScriptDir)).CssPath(Url.Content(Model.CssDir)).Theme(Model.Theme).Locale(Model.Locale).Render(); if (Model.ShowChangeSet) { Html.RenderAction("ChangeSetCombo", "ChangeSet", new {modelName = Model.ModelName, enityName = Model.EntityName, changeSetName = Model.ChangeSetName}); } } <a id="@btnMemberAddId" title="Expand the add form">Add member</a> <div id="gridDiv" class="customTable"> @(Html.Infragistics().Grid(Model.GridModel)) </div> @using (Html.BeginForm("Index", "Member", new { modelName = Model.ModelName, entityName = Model.EntityName, viewName = Model.DetailVm.ViewNoXmlFile ? null : Model.DetailVm.ViewName }, FormMethod.Post, new { @class = "form-horizontal", role = "form", id = frmMemberId, name=frmMemberId })) { @Html.HttpMethodOverride(HttpVerbs.Put) Html.RenderPartial("~\\Views\\Member\\_detail_body_partial.cshtml", Model.DetailVm); <div class="col-xs-12 form-group buttons"> <input id="@btnMemberSaveId" type="button" value="Save" class="btn btn-default col-xs-12 col-xs-offset-1 col-md-3 col-md-offset-2" /> <input id="@btnMemberCancelId" type="button" value="Cancel" class="btn btn-default col-xs-12 col-xs-offset-1 col-md-3 col-md-offset-2" /> </div> } @section scripts { @Scripts.Render("~/js/jqueryval") @Scripts.Render("~/js/changeset/combo") @Scripts.Render("~/js/member/index") <script type="text/javascript"> alert("js script triggered"); $(document).ready(function() { alert("ready triggered"); var gridId = "#@gridId"; var igGrid = $(gridId); var btnTrigger = $("#@btnMemberAddId"); var btnMemberSave = $("#@btnMemberSaveId"); var btnMemberCancel = $("#@btnMemberCancelId"); var modelName = '@Model.ModelName'; var entityName = '@Model.EntityName'; var requiresApproval = @Json.Encode(Model.RequiresApproval); igGrid.on("iggridselectionrowselectionchanged", function(evt, ui) { memberRowClicked(evt, ui, gridId, modelName, entityName); }); btnTrigger.on("click", memberAddFormToggle); btnMemberSave.on('click', null, { modelName: modelName, entityName: entityName, requiresApproval: requiresApproval }, btnMemberSaveClicked); btnMemberCancel.on('click', btnMemberCancelClicked); memberAddFormToggle(); }); $(window).on("load", function () { alert("load triggered"); }); </script> }
Another View which uses the subview defined below, but which does work as intended
@using Infragistics.Web.Mvc; @model Factstone.Web.Models.Views.MemberDetailVm @{ ViewBag.Title = $"{Model.MemberName}"; Layout = "~/Views/Shared/_Infragistics.cshtml"; const string btnMemberSaveId = "btnMemberSave"; const string btnMemberCancelId = "btnMemberCancel"; const string btnMemberDeleteId = "btnMemberDelete"; const string frmMemberId = "frmMember"; } @section header { @Styles.Render("~/css/members") @Styles.Render("~/css/changesets") } <h1><span>@Model.EntityName</span></h1> <h1>@ViewBag.Title</h1> @if (Model.ShowDescription) { <p>@Model.EntityDescription</p> } @{ Html.Infragistics().Loader().ScriptPath(Url.Content(Model.ScriptDir)).CssPath(Url.Content(Model.CssDir)).Theme(Model.Theme).Locale(Model.Locale).Render(); if (Model.ShowChangeSet) { Html.RenderAction("ChangeSetCombo", "ChangeSet", new {modelName = Model.ModelName, enityName = Model.EntityName, changeSetName = Model.ChangeSetName}); } } @using (Html.BeginForm("EditPost", "Member", new { modelName = Model.ModelName, entityName = Model.EntityName, memberCode = Model.Code, viewName = Model.ViewNoXmlFile ? null : Model.ViewName }, FormMethod.Post, new { @class = "form-horizontal", role = "form", name= frmMemberId, id= frmMemberId })) { Html.RenderPartial("~\\Views\\Member\\_detail_body_partial.cshtml", Model); <div class="col-xs-12 form-group buttons"> <input id="@btnMemberSaveId" type="button" value="Save" class="btn btn-default col-xs-11 col-sm-3 col-xs-offset-1" /> <input id="@btnMemberCancelId" type="button" value="Cancel" class="btn btn-default col-xs-11 col-sm-3 col-xs-offset-1" /> <input id="@btnMemberDeleteId" type="button" value="Delete" class="btn btn-default col-xs-11 col-sm-3 col-xs-offset-1" /> </div> } @{ Html.RenderPartial("~\\Views\\Member\\_related_members_partial.cshtml", Model); } @section scripts { @Scripts.Render("~/js/jqueryval") @Scripts.Render("~/js/changeset/combo") @Scripts.Render("~/js/member/detail") <script type="text/javascript"> $(document).ready(function () { alert("ready triggered"); var btnMemberSave = $("#@btnMemberSaveId"); var btnMemberCancel = $("#@btnMemberCancelId"); var btnMemberDelete = $("#@btnMemberDeleteId"); var modelName = '@Model.ModelName'; var entityName = '@Model.EntityName'; var memberCode = '@Model.Code'; var requiresApproval = @Json.Encode(Model.RequiresApproval); btnMemberSave.on('click', null, { modelName: modelName, entityName: entityName, memberCode: memberCode, requiresApproval: requiresApproval }, btnMemberSaveClicked); btnMemberCancel.on('click', btnMemberCancelClicked); btnMemberDelete.on('click', null, { modelName: modelName, entityName: entityName, memberCode: memberCode, requiresApproval: requiresApproval }, btnMemberDeleteClicked); }); </script> }
SubController action
public ActionResult ChangeSetCombo(string modelName, string entityName, string changeSetName = null) { //gets and modifies some data //Returns a VM for the sub view, with the datasource for the igCombo included as a property vm.ChangeSet) }
SubView
@using Factstone.Web.Models.Views @using Infragistics.Web.Mvc; @model ChangeSetComboVm @{ const string cboChangeSetId = "cboChangeSet"; const string dlgChangeSetId = "dlgChangeSet"; const string frmChangeSetId = "frmChangeSet"; const string txtChangeSetNameId = "txtchangeSetName"; const string btnChangeSetAddId = "btnChangeSetAdd"; const string btnChangeSetDeleteId = "btnChangeSetDelete"; const string btnChangeSetSaveId = "btnChangeSetSave"; } <div class="col-xs-12"> @Html.Infragistics().Loader().ScriptPath(Url.Content(Model.ScriptDir)).CssPath(Url.Content(Model.CssDir)).Theme(Model.Theme).Locale(Model.Locale).Render() @(Html.Infragistics().Combo() .ID(cboChangeSetId) .Width("300px") .InputName(cboChangeSetId) .Mode(ComboMode.Editable) .PlaceHolder("select changeset ...") .ValueKey(Model.Key) .TextKey(Model.Name) .SelectedValues(new[] {Model.SelectedChangeSet?.Name}) .SelectItemBySpaceKey(true) .Virtualization(true) .AutoComplete(true) .VisibleItemsCount(5) .EnableClearButton(true) .MultiSelectionSettings(builder => builder.Enabled = false) .DataSource(Model.ChangeSets) .DataBind() .Render()) <button class="btn btn-link changeSetComboButtons" id="@btnChangeSetAddId" type="button" aria-label="Add" title="Add ChangeSet"> <span class="glyphicon glyphicon-plus-sign"></span> </button> <button class="btn btn-link changeSetComboButtons" id="@btnChangeSetDeleteId" type="button" aria-label="Delete" title="Delete ChangeSet"> <span aria-hidden="true" class="glyphicon glyphicon-trash"></span> </button> </div> <div id="@dlgChangeSetId" hidden> <form action="" method="post" id="@frmChangeSetId" name="@frmChangeSetId"> <label for="@txtChangeSetNameId">Enter the name for the new changeset:</label> @(Html.Infragistics().TextEditor().ID(txtChangeSetNameId).InputName(txtChangeSetNameId).Width("260px").Render()) <input id="@btnChangeSetSaveId" type="button" value="Create" class="btn btn-default col-md-offset-7 col-md-5" style="margin-top: 20px"/> </form> </div> @(Html.Infragistics() .Dialog() .Modal(true) .State(DialogState.Closed) .HeaderText("Create new changeset") .ContentID(dlgChangeSetId) .Draggable(true) .Resizable(false) .CloseOnEscape(true) .CloseAnimation("fadeOut") .OpenAnimation("fadeIn") .Width("300px") .Height("195px") .Render() ) <script type="text/javascript"> alert("js script triggered in cbo partial"); $(document).ready(function () { alert("ready triggered in cbo partial"); var cboCsCombo = $("#@cboChangeSetId"); var btnChangeSetDelete = $("#@btnChangeSetDeleteId"); var btnChangeSetAdd = $("#@btnChangeSetAddId"); var btnCsSave = $("#@btnChangeSetSaveId"); var frmCs = $("#@frmChangeSetId"); var modelName = '@Model.ModelName'; var entityName = '@Model.EntityName'; cboCsCombo.on("igcomboselectionchanged", function (evt, ui) { cboChangeSetIndexChanged(evt, ui); } ); btnChangeSetDelete.on('click', null, { modelName: modelName, entityName: entityName }, btnChangeSetDeleteClicked); btnChangeSetAdd.on('click', btnChangeSetAddClicked); btnCsSave.on('click', null, { modelName: modelName, entityName: entityName, form: frmCs }, btnChangeSetSaveClicked); frmCs.validate({ rules: { changeSetName: { required: true, nowhitespace: true } } }); btcnChangeSetDeleteSetInitalState(); }); </script>
scripts were already in the shared layout.
Issue was with the loader and action.render somehow. It is probably dependent on how long the action took to load, that is why it worked and didn't work dependent on the data in the same view.
I made two changes.
1) Replace the render.action with renderview and pass the model of the view along in the model of the main view.
2) I removed the mvc helper from every view, and set up the jquery loader in the header of the shared layout (I specified the resources myself)
Hello Xavier,
Yes this could be the reason, just try to include igLoader everywhere in your views.
You can try to refer into the Layout page the three combined files which are infragistics.core.js, infragistics.dv.js, infragistics.lob.js and see if the problem could persist again.
With big regret I want to let you know if the problem is not reproducible to me and you are unable to provide me the sample that reproduces the issue I'm not able to find the issue or problem that you have. I could only guessing.
Also the problem could be from your source not from the controls at all.
If you find a way to provide me somehow the issue, please do it.
Best regardsAleksandar KamenovAssociate Software Developer
It is not possible to reproduce this issue in a sample.I have created a new project, added these views in it, simplified our viewmodels, faked 2 services and some data. Everything works there as expected. The reason is probably because there is not enough data, or because everything is static now, instead of dynamic.
We don't know beforehand what data we get into our application, or how many components there will be added to the view. On a few pages with less data it seems to work, on pages with more data, it doesn't seem to work. The ammount of infragistics controls on the page is dependent on the amount of properties a dynamic object has. Some properties are objects (IE: product.color) For those properties we use a combo box and fill it in with all of the available colors.All of that works, and has been working for over a year now. We only started having issues after I added the shared layout for the changesets as posted above. The views we have posted above should have to do. I am pretty certain it has something to do with the igloader or the changeset view.Is it possible that we are having issues because a limitation of the igLoader mvc helper? The igLoader needs to be used on every page. Is it possible that is causing the issue?
Hello Steven,
It would be highly appreciate if you could send me an isolated working sample which reproducing the issue.
I'm looking forward for you reply.
Bump? Stuck on our project because of this.