TransWikia.com

JQuery Menu Editor is not Compatible with AngularJS 1.5

Stack Overflow Asked by Atique Ahmed on December 23, 2021

I am implementing Jquery Menu Editor with AngularJS version – 1.5

Jquery Link - https://www.jqueryscript.net/menu/Drag-Drop-Menu-Builder-For-Bootstrap.html
Jquery Demo - https://www.jqueryscript.net/demo/Drag-Drop-Menu-Builder-For-Bootstrap

When I am trying to add a new element from the edit Item from, it’s giving me below error.

Cannot read property 'reset' of undefined
    at resetForm (<anonymous>:1182:18)
    at MenuEditor.add (<anonymous>:1323:9)

Screenshot –
Jquery Menu Editor

Jquery version I am using –

jquery.min.js – 3.1.1

My Concern is why I am not able to reset form using Jquery with AngularJS 1.5 version.

Cannot read property 'reset' of undefined
    at resetForm (<anonymous>:1182:18)




 $scope.editor = new MenuEditor('myEditor', {listOptions: $scope.sortableListOptions, iconPicker: 
      $scope.iconPickerOptions});
    $scope.editor.setForm($('#frmEdit'));
    
    
    //Not able to add
    $('#btnAdd').click(function(){
            editor.add();
    });

Let me know if any solutions – Would be helpful. Also if you know any other plugin apart from this, can be compatible with AngularJS that also helps me a lot.

One Answer

You can't mixup jQuery with Angularjs. Angularjs is very powerfull you can build your own menu editor, here is a simple working demo

var MenuController = function($scope)
{
  $scope.navItem = [
    {
      name : "Home",
      link : '/',
    }
  ];
  
  $scope.consoleJson = function(){
    console.log($scope.navItem);
  }
  
  $scope.menuItem = {
    name : '',
    link : ''
  }
  
  $scope.addLink = function()
  {
    var item = Object.assign({},$scope.menuItem);
    $scope.navItem.push(item);
    $scope.menuItem =  {
    name : '',
    link : ''
  };
      
  }
  
}


const App =angular.module("menuEditor",[]);



App.controller("menuController", MenuController);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<div  ng-app="menuEditor" ng-controller="menuController">
  <div class="contaniner">
    <div class="row">
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <h1>List</h1>
            <div class="card" ng-repeat="item in navItem">
              <div class="card-body">
                <p>Name : {{item.name}}</p>
                <p> Link : {{item.link}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
             <h1>form</h1>
            <input type="text" ng-model="menuItem.name" placeholder="Name" class="form-control" />
            <br>
             <input type="text" ng-model="menuItem.link" placeholder="Link" class="form-control" />
            <br>
             <button class="btn btn-primary float-left" ng-click="consoleJson()">
             Menu Json
            </button>
            <button class="btn btn-primary float-right" ng-click="addLink()">
              Add Link
            </button>
          </div>
        </div>
      </div>
    </div>
    </div>
</div>

Answered by flames on December 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP