Changes in Boostrap modal changes the different scope variable - javascript

I have an application wherein when i click on edit button it pops up a bootstrap modal where I can edit the data. But the problem is when i change any data in the bootstrap modal, the data in the list also gets changed. Strange thing here is both the scope variable for modal edit data and the scope varaible associated with the data in the page is different.
This issue can be visualized using the below URL:
http://angularjs.mostlikers.com/curd-operation/
Click on the Edit button and try to change the modal data, it also changes the data in the table which should not be the ideal case until submit is clicked.
Any help would be appreciated, since stuck for a long time.

You should clone the row object when sending it into modal, You can use lodash.js library for that like below
//When binding row to the modal's scope you should do this,
$scope.user = _.merge({},row)
Assuming that $scope is the modal's scope and row variable in the object for that row which is to be edited.

Related

ng-click not working on button click inside kendo grid header template

I have a grid which is rendered dynamically based on the table selected by the user. The grid has a last column which has a header template in which I have provided a button. On click of this button I want to call angularjs controller function which I did using ng-click=ctrl.addnewRow() .
Problem I am facing is that, when the grid is loaded for the table in the first Kendo TAB the "+"(add) button does not work. When I navigate to a different tab which is using the same grid and same template, the button click works as expected. I have been scratching my head to figure out what the problem is, but could not find the problem or solution. Here is a snapshot of the page. I have used highlighting for sensitive data.
See the "+" button, and the code below in the debug window. Thats not working for the first tab.
Let me know if anyone needs some more information.
EDIT
I have created a kendo UI Dojo where the add buttons do not work for both tables. I did not add any tabs based on my scenario, but this fiddle should help

Watch in directive triggering from outside scope

I'm creating a combobox directive to replace select boxes. Its working pretty well when I only have one select box on a page, but I'm having trouble once I have more than one on a page. Triggering anything that opens the dropdown of the combobox opens up ALL the comboboxes on the page. When I commented out the watch on the page, it starts working as expected. The problem is that I can't figure out why the watch would be triggering outside the scope. I thought that an isolate scope meant its local only to that directive?
The combobox code: http://pastebin.com/MWvXwUdf
Combobox template: http://pastebin.com/DQp0q1Dd
(I'll setup a jsfiddle or plnkr tonight)
How the combobox is called:
<combobox data="levels" value="cb_value" search="data.level" strict></combobox>
Where data is what gets populated in the dropdown, search is what goes in the search input, and value is what is the returned value.

Same modal for creating and updating records on Angular (angular + bootstrap)

I have a modal that creates objects on a simple CRUD.
I wanted to reuse the same modal to Edit/Update records since the form is the same.
I have a ng-repeat directive to lay out the different object on bootstrap panels.
The problem is that when I click edit, the form gains the scope of the current object to edit but when I exit the form and click Add New, the same modal pops up with the scope of the previous object.
If I try to $scope.object = '', the two way data binding kicks in and it updates my model and resets the object values.
How can I reset the scope without resetting the object I previously edited?
Thanks
Thank you, the answer was creating instances of the modal everytime I want to add or edit a request.

Durandal modal in modal issue

I'm trying to call custom modal inside modal and catch the retrieving data. So I'm receiving second modal's data inside first modal, but the first modal's buttons crash for parent viewmodel and does not send data, even can't click on buttons, no effect. In case if you don't open second modal, firsts buttons work correctly. I mean "save" and "cancel" buttons, what are default in Durandal modal.
Is this my code issue or it's impossible to do on that way in Durandal 2.0?
If it's possible in Durandal, I'll go to put some code here.

Adding a new row to a dynamic ASP.NET Table Control, at position x - Problems with Viewstate after postback

I am creating a dynamic table control with ASP.NET/C# and the table is being used to hold a form. I need to allow users to click on a button in a row and make a duplicate of that row right below the original. My page is also using AJAX and jQuery.
I have tried to use Table.Rows.AddAt(indexoforigrow+1, newrow) but I get an error that the index is out of the range of values. I figured maybe I wasn't getting the original row's index correctly so I just tossed in a 1 and still got the error.
I also noticed that when I press the button to execute the code, the table disappears. Any ideas on how to fix that?
I am thinking that if I am unable to get these issues fixed I will have to loop through the table and submit the data to a temp table, adding a new row where indicated. Then I would pull all of the data back out and display again.
EDIT
I moved on when I could not get this working and tried to setup my submit functions to loop through the data and submit it to a db and realized that I am experiencing the same issues when clicking the submit button as when I click the add row button. It appears that my issue is really with viewstates/postback.
I did some reading on this and from what I can tell the solution is to re-create the dynamic control on page load every time. But I am confused about how I can do this if I have no idea how many rows/cells I have and how is the information the user entered kept in the form? I have no way of saving the information to a DB or anything because as soon as submit is clicked it all disappears.
Have you considered using a different control? One of the grid controls might better serve your purpose.
I've handled situations (that sound) similar to what you're describing by using the footer of a GridView (among other ways). The big trick is to bind the display object (Table, GridView, etc.) to a list of objects. Then you manipulate the list of objects, rebinding the display object after the list has changed.
You will need to persist this list in some manner, or you could wind up with the list being reset to null. One way would be to save it as part of the session.
At any rate, the idea is to have a display object (GridView) bound to a list of objects. When the user clicks 'add', an item is added to the list. Save the list, then call the GridView.DataBind method.
You are on the right track with re-creating the dynamic table each time the page loads. I have dome similar things and my solution was to keep a client state in a hidden field on the page. Every time you add a row to the table on the client, increment a counter or adjust the state data in the hidden field. Then, on the server-when the page posts back, read from that hidden field to know how many rows were added on the client. You will have to use some kind of naming convention for the new rows you add(and the widgets in them) so you can re-create them on the server.
A simpler option may be to use an UpdatePanel. Rather than try to add the rows on the client, your "add row" button would cause a partial update. The server side code would add the new row to the table and the viewstate would be updated.
I ended getting my data guy to do a bit more processing on his end so that I could just bind a ListView to a sproc. Solved a few of my problems.
Thanks for the helpful comments.
Just returning to this almost a year later because I faced a similar issue in my current project. I was doing a few things wrong my first time around. First, I did indeed need to recreate the controls every load, but I also had to create them earlier in the page cycle. I was trying to create them during page load, which is after the viewstate is loaded.
The controls need to be recreated with the same ID before viewstate is loaded. I went with page init and it worked fine.

Categories