Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
mvc helpers for igloader, jquery doc ready not triggered
posted

.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>


Parents
  • 1740
    Offline posted

    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.

    Best regards
    Aleksandar Kamenov
    Associate Software Developer

Reply Children