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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP