Inserting HTML into an AngularJS ng-repeat table - javascript

I'm attempting to insert a form as a new row underneath a row generated by ng-repeat. I can successfully add a row to the data model using .splice() but I'm not able to render the HTML when it is inserted. I have researched methods to accomplish this and the ones that are mentioned the most frequently involve the $watch and $compile functions. The issue is that I do not have an original tag to insert into as this is a brand new row in the table.
Idea behind this:
I have a table of data with many rows. The table represents data on "actions" that are for employees to accomplish. We are creating a web app that allows them to view their own actions and update them in the web page rather than updating a spreadsheet.
I was originally inserting a row dynamically with jQuery but as we are aware - it breaks the DOM. I'm trying to take the angular approach as this is an angular app, but I'm struggling with how to accomplish this.
The row that is inserted is a form for all the fields chosen and some extra ones not shown in the "view". Ideally, this would expand a row downwards when they click a button at the end of the row containing the action they are trying to edit. When they are done they can click a save button which removes/collapses the row and saves the changes to the model. This change is then sent back to the API to write the changes back to the database.
View of the Table:
Table view
View of the Form:
Form
Basically, I'd like to dynamically insert the form between rows shown in the table. I have to avoid jQuery and use AngularJS if possible.
Anyone have a neat trick to accomplish this?
Code (had to remove some stuff for privacy):
Pastebin: jf1mv9WG
Cheers,
Tux889

If I understand your question (and assuming you are using angular 1x), maybe you can use ng-repeat-start and ng-repeat-end to render two rows for every item; and in the second row put the form inside a td[colspan=n] (where n is the number of columns in your table). And make the two rows mutually exclusive, for example the first row can have ng-if="!item.showForm" and the second row can have ng-if="item.showForm".
Take a look a this example that I prepared: https://jsfiddle.net/miguelerm/9pus3zoc/

You can try to use ngBindHtml directive.
You can bind html to your table.

Related

Dynamically Add Rows to an HTML Table with HTML Helper Dropdowns in C# MVC

I've hit a forkn in the road on a page I'm developing and am looking for some guidance. I have a model list that I need to build an html table from on a page. Each row contains data from the model list along with two #html.dropdownlist selection inputs. The caveat is users need the ability to press a button and add a row to the table with blank inputs for the cells except for two cells that need to have the #html.dropdownlists in them.
I've attempted to utilize JS to act as DOM manipulation for this but my solutions there cause the HTML Helpers not to work. I've read that this is due to the client-side(JS) vs server-side(MVC Controller) natures not functioning together.
I guess my question is, what would be the best way to accomplish the adding of rows to the table and including operational versions of the #html.dropdownlists?

Dynamic Jquery management of multiple table rows

Good Evening to all,
I'm currently developing an app that fetch data from a DB via AJAX calling a .php file.
I've got a table with 4 columns, the first 2 columns contain a < select >, the third an input and the last a button.
The first row is static: i've got a php query that loads the information of the 1st,2nd and 3rd column with default values.
When the user choose change the value of the 1st select a trigger launch a Jquery function that drop-down update the content of the 2nd and 3rd column.
In the same way if the user change the value of only the 2nd column, only the 3rd column value will be drop-down updated.
If the user make changes only with the 1st row, the code has no problem, but if the user press the button and via an .append() the code add another row, with the same scripts as the 1st one, obliviusly the new row selects won't work.
Trying to fix this I created a php for that copies the Jquery change functions using the iterator as identifier for both functions and the rows of the table.
Using the code inspector of chrome I don't find any errors, but only the 1st row jquery select will work, that is strange considerated that the 1st row function is generated by the same php cicle that is used for the others.
The hair are falling of my head because of this problem, hope you can understand and help me.
Thank in advance
Events and handlers added to existing elements won't work on clones of those elements added later dynamically. Simply said, your functions to do stuff on drop-down etc on existing rows are limited to those only, and won't apply to any newly generated rows.
For a general solution, consider writing all the event handlers separately, and invoke those again when you add new rows on button click.
Hope this made sense!

DataTables + ServerSide: Child Rows destroyed

I am using the DataTables jQuery plugin with server side pagination to create a table with child rows where the user can change the data, the problem I have is when I move to another page without saving changes in the modified forms; the DataTables removes the rows and its child rows from the DOM, so I am not able to get later the updated rows to save the changes, also if I move back to the first page where the user modified the data, the child rows are re-created (as part of the createdRow event where I am creating the child rows) so the changes entered by the user are lost.
Is there any way to deal with this problem?
I don't have enough experience in working with DataTable, but I guess this plugin has something like "data is loaded" event. Before the page is reloaded, you can save your draft data in separate array/object (like draftData) and after data is loaded, you can merge information before page rendering.
I ended up creating my own logic since this is an expected behavior of the DataTables plugin.
When using server side with DataTables, the plugin doesn't have a way to identify or "remember" what rows are being modified, what rows are selected, etc. Because of each pagination request rebuild the table and re-create the rows.
I found somewhere that a valid approach was using a global variable to store all the changes (selected rows, updated data, etc) I am also using the createdRow event to restore the changes made by the user after creating each row.

How do I display database rows on multiple pages with Ajax?

I have a database with a table having a big number of rows. I am fetching the data in this table and displaying it in an HTML table on a web page.
My requirement is to display 20 records initially and then when the user clicks a button labelled Next, I show the next 20 records and so on...
So I have initially fetched first 20 rows from the table in my PHP (server-side), and then assigned a JS function to the onclick attribute of the button labelled Next. Inside this JS function, I use an AJAX call which brings me the next 20 rows. Then within this JS function, I replace the HTML rows with these new rows.
I need something like this:
The question is that are there any plugins available which can implement that functionality for me? If a plugin is available, implementing it manually wouldn't make sense because being a rookie, I can't develop it better than the developers of that plugin.
Yes
This is called pagination - a quick search for "ajax pagination mysql php" or similar brings up a wide range of options. I can't recommend any particular one as your question is too broad; I can only reasonably go as far as a definition.
Internally they use the MySQL LIMIT keyword which may help give further things to search for or experiment with depending on your actual use case.

Jquery datatable row selection

I am using the jquery data table. I need to select the rows using the ordinary click, ctrl+A and shift key selection. sample is given below, using javascript and store the rows id in any variable. how we do that? if the samples are code please suggestion here
This is a sample
Same need that javascript , datatable
Let me give you a higher level logic
Create datatable with checkboxes. Make sure you generate id's for those checkboxes and corresponding rows.
On check box click, you can find the id of the row easily. Keep saving them in an array as you keep clicking.
If you want to select all at once, give a specific id for select all checkbox and on click of that checkbox, loop through your data table and grab all the rows and put them in an array.
Once you have the logic for onClick, you can easily add javascript keyboard events.
I apologize for not putting some code together, it's lot of code to write but simple enough.

Categories

Resources