Create Button not working

Title:

Hello, I am using the Inline Editing for the Grid component of Asp Awesome. The inline editing is working great and the delete button/popup is also working great. 

I am having trouble with the Create button. When I click "Create" I get this error in Developer Console - "Cannot read property 'inlineCreate' of undefined at HTMLButtonElement.onClick". 

I believe I have everything correctly installed as the inline edit and delete works well. My View code is below:

    <head>
        <link href="~/css/awesomebtns.css" rel="stylesheet" />
    </head>
    
    @{
        var gridId = "ComponentMan";
        LabSys.NEWLabSys.LabSysEntities db = new LabSys.NEWLabSys.LabSysEntities();
    }
    
    <script>    
        var RequestList = @Html.Raw(DemoUtils.Encode(db.Requests.ToList().Select(o => new KeyContent(o.RequestNum, o.RequestNum))));
        var ComponentList = @Html.Raw(DemoUtils.Encode(db.Units.Where(x => x.Type == 1).ToList().Select(o => new KeyContent(o.Label, o.Label))));
    </script>
    
    
    <div class="bar">
        @*@Html.Awe().TextBox("txtSearchName").Placeholder("search...").CssClass("searchtxt")*@
        <button type="button" onclick="$('#@gridId').data('api').inlineCreate()" class="awe-btn mbtn">Create</button>
    </div>
    
    
    @Html.InitDeletePopupForGrid(gridId, "ComponentMan")
    
    
    @(Html.Awe().Grid(gridId)
               .Mod(o => o.PageInfo().InlineEdit(Url.Action("Create", "ComponentMan"), Url.Action("Edit", "ComponentMan")))
               .Parent("txtSearchName", "Name")
               .Url(Url.Action("GetItems", "ComponentMan"))
               .Attr("data-syncg", "dinner")
               .Columns(
                    new Column { Bind = "id", Hidden=true}
                        .Mod(o => o.InlineId()),
                    new Column { Bind = "Name" }
                        .Mod(o => o.Inline(Html.Awe().TextBox("Name"))),
                    new Column { Bind = "Order", Hidden = true }
                        .Mod(o => o.Inline(Html.Awe().TextBox("Order"))),
                    new Column { Bind = "RequestID", Hidden = true }
                        .Mod(o => o.Inline(Html.Awe().AjaxRadioList("RequestID").Combobox().DataFunc("utils.getItems(RequestList)"), "RequestID")),
                    new Column { Bind = "Build1Detail"}
                        .Mod(o => o.Inline(Html.Awe().AjaxRadioList("Build1Detail").Combobox().DataFunc("utils.getItems(ComponentList)"), "Build1Detail")),
                    new Column { Bind = "Build2Detail" }
                        .Mod(o => o.Inline(Html.Awe().AjaxRadioList("Build2Detail").Combobox().DataFunc("utils.getItems(ComponentList)"), "Build2Detail")),
                    new Column { Bind = "Build3Detail" }
                        .Mod(o => o.Inline(Html.Awe().AjaxRadioList("Build3Detail").Combobox().DataFunc("utils.getItems(ComponentList)"), "Build3Detail")),
                    new Column { Bind = "Build4Detail" }
                        .Mod(o => o.Inline(Html.Awe().AjaxRadioList("Build4Detail").Combobox().DataFunc("utils.getItems(ComponentList)"), "Build4Detail")),
                    new Column { ClientFormat = GridUtils.InlineEditFormat(), Width = 70 },
                    new Column { ClientFormat = Html.InlineDeleteFormatForGrid(gridId), Width = 80}))

eliawesome

asked at 09 Oct 2018

the code looks correct, try `$('#ComponentMan').data('api').inlineCreate()` in the console, see if it works you can also try `$('#ComponentMan').length` to check if the grid exists

at 09 Oct 2018 Omu
When I enter "$('#ComponentMan').data('api').inlineCreate()" into the console it does not work, I get the same error as above. But when I enter "$('#ComponentMan').length" into the console I get a value of "1" back. Any additional information on what could cause this? It seems that the grid is there but just inlineCreate is not working

at 09 Oct 2018 eliawesome
there could a problem with the way js is referenced, or maybe js files are loaded multiple times, or duplicate ids; you can try this: https://www.aspnetawesome.com/learn/mvc/CommonProblems#Isolate-the-problem

at 09 Oct 2018 Omu
I have researched extensively and cannot find anything wrong with my js files or my references. All the js files are referenced in order. The inline edit and delete work great. I have checked for duplicate id's, or multiples js references and found nothing. Is there anything else to try? If I type $('#ComponentMan').data('api') into the console it comes back as undefined. But the grid length comes back as defined.

at 12 Oct 2018 eliawesome
try to make a mini demo showing the error and upload it (as explained in the link above)

at 12 Oct 2018 Omu
I have made a project and the create works correctly. Yet in my regular application the Create button still does not work. I have checked everything, and extensively looked through the installation help. Edit inline, delete and grid operations work great. My javascript is referenced exactly like it is in the code sample. I have the libraries referenced and the helpers/utils in the namespace of my project. What can I do?

at 23 Oct 2018 eliawesome
try to isolate, remove/comment as much as possible in your page (view, layout.cshtml), until you get to the point that the create button works, after you can start adding back the rest step by step to identify what breaks it

at 23 Oct 2018 Omu
I fixed the issue. An old jQuery reference was interfering with the api. Pretty crazy, but it ended up being the problem. If anyone else has the issue where the api fails on Create, tell them to check the jquery version and reference. Thanks for the help

at 23 Oct 2018 eliawesome
my guess is you were referencing more than one version of jQuery

at 23 Oct 2018 Omu

Answers

please Sign In to leave an answer