Summernote Issue on my Create or Edit MVC page #8246

joey.javier created 4 years ago

Hi,

Any clue why I'm getting this error on my MVC page? Object doesn't support property or method 'summernote'

Below are the portions of my chtml page and javascript codes:

cshtml page

@section Scripts
{
     <script src="~/view-resources/Areas/App/Views/TestView/CreateOrEdit.js"></script>
 }
 <div class="form-group">
     <div id="coverSheet">This is  the test content</div>
 </div>

Codes inside my CreateOrEdit.js

    // summernote initialize
    $('#coverSheet').summernote({
        height: 300
    });

Please note that my project is based on: ASP.NET Core MVC & JQuery - version 8.0.0.

Thanks Joey

3 Answer(s)

1

maliming created 4 years ago
Support Team

You need to include summernote.js in bundles.json file.

Such as view-resources/Areas/AppAreaName/Views/_Bundles/demo-ui-components.min.js

joey.javier created 4 years ago

Hi,

Thanks for your reply. I added the demo-ui-components (css & js) to my MVC page and it works but I have new issue saving the summernote field. it returns a NULL value. Other fields are okay. Please see my save function on my CreateOrEdit.js below:

cshtml:

@section Styles
{
    <link rel="stylesheet" abp-href="/view-resources/Areas/App/Views/_Bundles/demo-ui-components.css" />
}
@section Scripts
{
	<script abp-src="/view-resources/Areas/App/Views/_Bundles/demo-ui-components.js" ></script>
	<script src="~/view-resources/Areas/App/Views/Tests/CreateOrEdit.js"></script>
}

CreateOrEdit.js

    var _testsService = abp.services.app.tests;
    var _$testInformationForm = null;
    
    $('#coverSheet').summernote({
        height: 300
    });
    
    _$testInformationForm = $('form[name=TestInformationsForm]');
    
    function save() {
    
        if (!_$testInformationForm.valid()) {
            return;
        }

        var testFormData = _$testInformationForm.serializeFormToObject();

        var htmlContent = $("#coverSheet").summernote('code');
        testFormData.content = htmlContent;

        abp.ui.setBusy();
        _testsService.createOrEdit(
            testFormData
        ).done(function () {
            abp.notify.info(app.localize('SavedSuccessfully'));
            window.location.href = "/App/Tests";
        }).always(function () {
            abp.ui.clearBusy();
        });
    }
    
    $("#btnSave").click(save);

Again your help is much appreciated.

joey.javier created 4 years ago

Hi,

Disregard my previous issue about saving summernote field. I've fixed it.

Here is the correct codes:

       var htmlContent = $("#coverSheet").summernote('code');
        testFormData.coverSheet = htmlContent;  //coverSheet is my field name not "content"

Thanks, Joey

Have an answer to this question? Log in and write your answer.