Grid.Mvc Ajax JQuery Uncaught TypeError

Question

I've got problems with the Grid.MVC Ajax. I found a project using it and i'm trying to adapt it to my project. The fact is a error appears when the grid is loaded

Uncaught TypeError: Cannot read property 'length' of undefined
at HTMLDivElement.<anonymous> (<anonymous>:1:382)
at Function.each (jquery-3.3.1.js:354)
at jQuery.fn.init.each (jquery-3.3.1.js:189)
at jQuery.fn.init.gridmvc (<anonymous>:1:95)
at HTMLAnchorElement.gridQuestionInit (<anonymous>:8:23)
at Object.success (jquery.unobtrusive-ajax.min.js:15)
at fire (jquery-3.3.1.js:3268)
at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398)
at done (jquery-3.3.1.js:9305)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)

Nothing happen when I want to use Paging or Filtering grid features. Sorting just refresh the page without the grid inside.

I searched a lot on Google and people said that the order and the place of scripts in the view is important and it can solve problem like this one.

So I checked all the script links, put them on the same page as the grid, change the order... But nothing change except the TypeError appears in the gridmvc.js sometimes.

This the View with the grid

@using GridMvc.Html
@using GridMvc.Sorting
@model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<Site_Emission_Generique.Models.question>


<p>
    @Ajax.ActionLink("Créer une nouvelle question", "CreerQuestion", null, new AjaxOptions
    {
        UpdateTargetId = "myModalBody",
        LoadingElementId = "divLoading",
        OnBegin = "onAjaxBegin",
        OnComplete = "onAjaxComplete"
    }, new { @class = "btn btn-primary", @data_toggle = "modal", data_target = "#myModal" })
</p>

@Html.Grid(Model).Named("ast").EmptyText("Aucune donées à afficher").Columns(columns =>
{

    columns.Add(c => c.NumeroQuestion).Titled("Numéro").RenderValueAs(c =>
Ajax.ActionLink(c.NumeroQuestion, "AfficherQuestion", new { id = c.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-edit", @data_toggle = "modal", data_target = "#myModal" })).Encoded(false).Sortable(true).Sanitized(false).Filterable(true);

    columns.Add(c => c.QuestionAnimateur).Titled("Question");
    columns.Add(c => c.theme.IntituleTheme).Titled("Thème");
    columns.Add(c => c.categorie.IntituleCategorie).Titled("Categorie");
    columns.Add(c => c.typequestion.IntituleTypeQuestion).Titled("Type");
    columns.Add(c => c.statusquestion.IntituleStatusQuestion).Titled("Statut");
    columns.Add(c => c.difficulte.IntituleCourtDifficulte).Titled("Difficulté");
    columns.Add().Titled("Media").RenderValueAs(c => { if (c.MediaImg != null || c.MediaSon != null || c.MediaVideo != null) return "oui"; return "non"; });
    columns.Add().Titled("Source").RenderValueAs(c => { if (c.Source1 != null || c.Source2 != null || c.Source3 != null) return "oui"; return "non"; });

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("M", "ModifierQuestion", new { id = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-edit", @data_toggle = "modal", data_target = "#myModal" }));

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("S", "SupprimerQuestion", new { id = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete",
}, new { @class = "glyphicon-remove", @data_toggle = "modal", data_target = "#myModal" }));

    columns.Add().Encoded(false).Sortable(false).Sanitized(false).Filterable(false).SetWidth(10).RenderValueAs(model =>
Ajax.ActionLink("P", "AfficherProposition", "Home", new { idQuestion = model.idQuestion }, new AjaxOptions
{
    UpdateTargetId = "myModalBody",
    LoadingElementId = "divLoading",
    OnBegin = "onAjaxBegin",
    OnComplete = "onAjaxComplete"
}, new { @class = "glyphicon-remove", @data_toggle = "modal", data_target = "#myModal" }));

}).WithPaging(10).Sortable(true).Filterable(true).WithMultipleFilters().SetLanguage("fr")


<script src="~/Scripts/URI.js"></script>
<script src="~/Scripts/gridmvc.min.js"></script>
<script src="~/Scripts/gridmvc-ext.js"></script>
<script src="~/Scripts/ladda-bootstrap/spin.min.js"></script>
<script src="~/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="~/Scripts/gridmvc.lang.fr.js"></script>

<script>

   function gridQuestionInit() {
        var gridName = 'ast';
        var pagingUrl = '@Url.Action("GridPager","Home")';

       $('.grid-mvc').gridmvc();
       pageGrids[gridName].ajaxify({
            getData: pagingUrl,
            getPagedData: pagingUrl
        });
    }
</script>

EDIT : The Jquery 3.3.1 link is in my layout.

The Controller

public ActionResult GetGrid()
{
    var items = db.question.Where(x => x.statusquestion.IntituleStatusQuestion != "Supprimée").OrderByDescending(x => x.idQuestion);
    var grid = gridMvcHelper.GetAjaxGrid<question>((IOrderedQueryable<question>)items);

    return PartialView(GRID_QUESTION_PATH, grid);
}

[HttpGet]
public ActionResult GridPager(int? page)
{
    var items = db.question.Where(x => x.statusquestion.IntituleStatusQuestion != "Supprimée").OrderByDescending(x => x.idQuestion);
    var grid = gridMvcHelper.GetAjaxGrid<question>((IOrderedQueryable<question>)items, page);
    object jsonData = gridMvcHelper.GetGridJsonData(grid, GRID_QUESTION_PATH, this);

    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

I'm stuck with this problem for more than a week. If you know how to solve it or any idea, please share it.

Thank you

Edit2 @War10ck an example of front end rendered JS by an Ajax.ActionLink

    <a class="glyphicon-edit" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/AfficherQuestion/28">ttttt</a>

   <a class="glyphicon-edit" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/ModifierQuestion/28">M</a>

    <a class="glyphicon-remove" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/SupprimerQuestion/28">S</a>

    <a class="glyphicon-remove" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-complete="onAjaxComplete" data-ajax-loading="#divLoading" data-ajax-mode="replace" data-ajax-update="#myModalBody" data-target="#myModal" data-toggle="modal" href="/Home/AfficherProposition?idQuestion=28">P</a>

Edit3

I tried to see if JQuery find the grid. So I put alert(JSON.stringify($('.grid-mvc'))); before $('.grid-mvc').gridmvc();

The result

    {"0":{},"1":{},"length":2,"prevObject":
{"0":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"context":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"length":1},"context":
{"location":
{"href":"http://localhost:50866/Home","ancestorOrigins":{},"origin":"http://localhost:50866","protocol":"http:","host":"localhost:50866","hostname":"localhost","port":"50866","pathname":"/Home","search":"","hash":""},"jQuery110201876682714105331":1},"selector":".grid-mvc"}

It seems that JQuery found the grid. If I try it after this line, nothing happens. So, I think the data problem must be .gridmvc()

Edit4

I solved the problem. In the parent page , which contains the grid, there was a div with the class "grid-mvc" before the grid itself. That's why the script doesn't work.

Now I have to fix a another error. The action GridPager is not found but I think it will be easier to solve.

Answer 1

Remove the grid-mvc from the below div class

  <div class=" hidden-xs grid-mvc">
        @{
            HtmlGrid<OnlineWeb.Models.usp_Proc_Result> mvcGrid = null;
            GridMvc.Pagination.GridPager pager = new GridMvc.Pagination.GridPager();
        }