TypeError: "$ is not a function" actionComplete - Dialog tmplate

[Dario]

Good day,

I was wandering what could be the issue with this error.

I created the project Asp.Net MVC 5 using Essentials studio (created one without also) but i am getting an error when i want to use template for modal dialog add/edit records.

I followed this example here:

https://ej2.syncfusion.com/aspnetmvc/Grid/DialogTemplateEdit#/material

It was a copy/paste so everything is as it is on the website only i get error when i click add button. I made console log to see how far it goes before error hits. Here is the code (added in bold):

 function actionComplete(args) {
        if (args.requestType === 'beginEdit' || args.requestType === 'add') {
            console.log(args.requestType);
            let spinner = ej.popups.createSpinner({ target: args.dialog.element });
            ej.popups.showSpinner(args.dialog.element);
            if (args.requestType === 'beginEdit') {
                var ajax = new ej.base.Ajax({
                    url: "@Url.Action("Editpartial", "DataGrid")", //render the partial view
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ value: args.rowData })
                });
                ajax.send().then(function (data) {
                    $("#dialogTemp").html(data); //Render the edit form with selected record
                    args.form.elements.namedItem('CustomerID').focus();
                    ej.popups.hideSpinner(args.dialog.element);
                }).catch(function (xhr) {
                    console.log(xhr);
                    ej.popups.hideSpinner(args.dialog.element);
                });
            }
            if (args.requestType === 'add') {
                console.log("start");
                var ajax = new ej.base.Ajax({
                    url: "@Url.Action("Addpartial", "DataGrid")", //render the partial view
                    type: "POST",
                    contentType: "application/json"
                });
                ajax.send().then(function (data) {
                    $("#dialogTemp").html(data); //Render the edit form with selected record
                }).catch(function (xhr) {
                    console.log(xhr);
                    ej.popups.hideSpinner(args.dialog.element);
                });
            }
        }
    }

on the screenshot you will see line number where error happens and it is this line -  $("#dialogTemp").html(data); and if i look with code inspector html of  #dialogTemp is empty.

View is returned without error (screenshot attached).

Maybe you can help?

Thanks.

Regards,

Dario

Attachment: syncfusion_error_b9cb24eb.rar

[Dario]

Thanks to the chat support i managed to resolve my problem.

Bare in mind, Syncfusion Essentials studio does not include jquery bundle in your layout file so you have to add it your self. Also, only jquery file i had at the time of writing this post was jquery-3.2.1.min.js and bundle generated with studio

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

does not include .min.js file.

So, create a bundle :

 bundles.Add(new ScriptBundle("~/bundles/jquery3").Include(
                        "~/Scripts/jquery-3.2.1.min.js"));

and render it in your layout file:

 @Scripts.Render("~/bundles/jquery3")

Maybe you are using different jquery version, but make sure to check your output in the inspector to confirm it is there.

Regards,

Dario

[Prasanna Kumar Viswanathan]

Hi Dario, 

 

We are happy to hear that your query has been resolved. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V