Incorporating a modal popup to modify a row within a grid view has been my recent task. Leveraging the row.getProperty() function, I successfully extracted the row values within the modal. However, an inconvenience emerged when attempting to edit a value within the modal interface—the change is reflected in the background view immediately, prior to clicking on the update button.
If you wish to delay the application of changes immediately, it is recommended to duplicate your model and make modifications to the duplicated version. After the user clicks the update button, the values from the duplicated model can then be transferred to the original model.
function Controller($scope) {
$scope.dataCopy = {};
$scope.update = function(user) {
// Example using 1 argument
$scope.dataCopy = angular.copy(user);
};
$scope.reset = function() {
// Example using 2 arguments
angular.copy($scope.dataCopy, $scope.user);
};
$scope.reset();
}
For further information, refer to https://docs.angularjs.org/api/ng/function/angular.copy.
It appears that you may be utilizing the same object reference for both your modal view and static background view.
To resolve this issue, consider duplicating your object within your modal:
Within your Modal, utilize $scope.copy = angular.copy(obj); to link a duplicate of your object to the scope.
Following submission, use angular.extend(obj, copy); to reassign the properties back to the original object.
[UPDATE]
An alternative approach using angular.copy to transfer the copy back to the initial obj would also function effectively and is preferred over extend:
$scope.obj = angular.copy(copy, obj);
Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...
My highchart consists of a simple column. When I click on any bar in the chart, it gets selected. However, I also want the 1st bar to be selected by default. var chart = $('#container').highcharts(); Upon page load, I have obtained this object. ...
Currently, I am focusing on a specific aspect of a suite of services designed to work in conjunction with an app/platform. The particular area that requires assistance is related to a vanilla express server used to provide our client app (a react app). We ...
My understanding of REST API and Javascript is limited, but I now find myself needing to interact with a third-party company's REST API for email reporting purposes. The data can be accessed through a GET method using a URL with a specific TOKEN: {pl ...
I am working on a project where I need to display all the activities of one user to another user on a web page. Essentially, the second user should be able to see everything that the first user is doing on their page. While I know it can be done using AJA ...
let chart = am4core.create("chartdiv", am4charts.XYChart); chart.background.image = am4core.image("/static/img/bar-chart.png") I'm attempting to apply a background image to my chart in Amchart, but unfortunately it's not di ...
Returning to an older project, I realized that nothing was loading. When I checked the console log, this is what I found: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". In my ...
Within sequelize, my setup includes boards and users with a many-to-many association structured like this: User.hasMany(Board, {through: BoardUsers}); Board.hasMany(User, {through:BoardUsers}); I'm trying to figure out if there's a way to use a ...
Stored in my MongoDB is the following JSON data: [ { "orderItems": [ "606808d2d7351b0c52d38634", "606808d2d7351b0c52d38635" ], "status": "Pending", ...
Hey, I'm new to web development and I'm currently working on creating a web app for iPhone. Everything is going smoothly except for one issue - my dropdown menu works perfectly on desktop Chrome, but on the iPhone's Safari browser, I can&ap ...
I successfully integrated the datepicker, but I prefer for the calendar to display below the date input field rather than above it. HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=" ...
Currently, I am working with d3.js and d3-geo to create a map of the USA. My goal is to display the names of some states inside the state boundaries itself, while others should have their names positioned outside the map with lines pointing to the correspo ...
I recently acquired a JavaScript and jQuery calendar from CodeCanyon, which can be found here. I am now faced with the task of integrating this calendar into my workplace website. The current calendar on our ASPX-based site is limited to read-only functio ...
Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...
In search of an elegant solution, the title speaks for itself - I am on a mission to create a practice food order App (consider me a novice in this field). This App boasts a Cart feature where users can add items for ordering. The nav-bar conveniently disp ...
[]Hello! I am currently working on fetching data from an API and using the map function to display the retrieved data. My goal is to extract more details about a specific piece of data by taking its ID and passing it to another page. The issue arises in my ...
Recently, I've been exploring jQuery Javascript Templates and trying to follow a tutorial that involves fetching tweets from Twitter. The tutorial can be found here: . After carefully implementing the code as instructed, you can view my progress on t ...
My web application features an editable ng-grid that has greatly simplified my work, but I have encountered a minor issue. I need a way to detect when a user makes changes to the grid without having to compare each field before and after. Currently, I am ...
I came across an example on W3schools that I'm trying to replicate: http://www.w3schools.com/xml/tryit.asp?filename=tryxml_app_first However, the example only displays one CD. My goal is to showcase all the data (in this case CDs) in the XML file. H ...
Whenever the session expires, I make a call to the server using window.location.reload(true). After clicking the button, the server is contacted to retrieve details. However, in Internet Explorer 11, the URL does not change in the browser and the same page ...