Create and set up a dynamically added Xeditable form field

Question

Create and set up a dynamically added Xeditable form field

Is there a way to add a dynamic editable field within the thumbnail section of dropzone.js? I have discovered that Xeditable fields added dynamically need to be initialized. I am attempting to do this in Angular.

Check out the Fiddle here: http://jsfiddle.net/NfPcH/2008/

Here is the code snippet:

 $scope.addfield = function()
    {
    jQuery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateUser()">KKKKKKKKKK</a>');    
    };

When clicking on "Add Xeditable field", a new field is added, but it does not initialize properly.

javascript angularjs x-editable

Answer 1

Answer №1

It's best practice not to rely on jQuery when adding new xeditable elements. Utilize Angular's scope and digest mechanism instead. Start by creating an array as a model, iterate over it, and dynamically insert new editable-text directive elements in the DOM. Allow Angular to compile the new directives at the appropriate time.

Below are some code snippets to help you get started:

JS:

// Define your collection model.
$scope.items = [];

// [...]

var addNewItem = function() {
    $scope.items[$scope.items.length] = { name: 'name' + new Date().getTime(), label: 'New Label' };
}

// [...]

$scope.addfield = function() {
    //jQuery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateUser()">KKKKKKKKKK</a>'); => Avoid this approach!
    addNewItem();
};

HTML:

<div action="/file-upload" class="dropzone" id="my-awesome-dropzone">
    <a class="spacer" href="#" ng-repeat="item in items" ng-bind="item.label + '-' + $index" editable-text="item.name" onbeforesave="updateUser()"></a>
</div>

Take a look at this functional fiddle.

Answer 2

It's best practice not to rely on jQuery when adding new xeditable elements. Utilize Angular's scope and digest mechanism instead. Start by creating an array as a model, iterate over it, and dynamically insert new editable-text directive elements in the DOM. Allow Angular to compile the new directives at the appropriate time.

Below are some code snippets to help you get started:

JS:

// Define your collection model.
$scope.items = [];

// [...]

var addNewItem = function() {
    $scope.items[$scope.items.length] = { name: 'name' + new Date().getTime(), label: 'New Label' };
}

// [...]

$scope.addfield = function() {
    //jQuery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateUser()">KKKKKKKKKK</a>'); => Avoid this approach!
    addNewItem();
};

HTML:

<div action="/file-upload" class="dropzone" id="my-awesome-dropzone">
    <a class="spacer" href="#" ng-repeat="item in items" ng-bind="item.label + '-' + $index" editable-text="item.name" onbeforesave="updateUser()"></a>
</div>

Take a look at this functional fiddle.

Create and set up a dynamically added Xeditable form field

Answer №1

Similar questions

Selenium is encountering a maximum call stack size error while attempting to access Highcharts

Tactile interactions on iPhone

The operator in Javascript that uses question marks for conditionals is known as the

Tips for utilizing the select feature within an ng-repeat loop while maintaining the selected value when fetching data from an API

The Firefox extension is experiencing an issue with loading moment.js before chart.js

Inquiries regarding node.js

What could be causing the data in getServerSideProps to be altered?

Initiate the countdown when the button is pushed

Effective Pagination in Rails 5: Retrieving Total Entries with will_paginate and Active Model Serializers

Troubleshooting: Issues with Angular form validation functionality

Interacting with a third-party application via OAuth using Node server to send REST requests

Library for HTML styling in JavaScript

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

Bootstrap - Input fields not following grid constraints

The Jquery click event is not triggering when clicked from a hyperlink reference

Instructions on calling a function with AngularJS ng-click in a template rendered by a Grails controller

Navigating through Routing Express and sending data to a template

Whenever the 'something' is passed in $state.go, it fails to function as intended

The submission form is being triggered immediately upon the page loading

What is the best way to loop through an object while keeping track of its value types