Javascript Question - javascript

I have a table with rows in the original state (A). When a postback occurs, I reorder these rows in the DOM (based on a business rule) using a JS function. It works fine except that the User experience is degraded when the rows are reordered.
The sequence is as follows:
1. Display the rows in state A
2. Run a JS function that reorders the rows
3. Display the rows in state B
I dont want the user to see the state A.
I am thinking in the lines of setting the div to invisible and after the JS function runs, reset it back to visible. But this doesn't seem to work.
Any workarounds?

Why not generate the entire table on the client. You could have the server return JSON and then create the table with the document.createElement (or whatever your framework uses) in the order you want it to be.

Related

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.

Inserting HTML into an AngularJS ng-repeat table

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.

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.

How do I get the state of a checkbox in a MDL table?

I generate the table from user inputted data, the user can change the data after the page has loaded and I have to adjust the checkboxes accordingly (regenerating the code)
I'm trying to:
Call a JS function when a checkbox is ticked
Be able to get states of every one checkbox individually (list of all checkboxes and their values also applicable)
Set the values of every individual checkbox
I didn't see a way to do it, because in the source code, there are no checkboxes - only the table setting. Thus, I'm unable to set every individual checkbox its ID.
I wonder, is it possible to: get the code that is generated when the browser loads my page and the code the JS generates and serve it to straight from the server generated, but with individual IDs for every checkbox? In this case, how would I get the state of a checkbox?
If anything is unclear, feel free to ask for details.
Thanks in advance.
Do not use the mdl-data-table--selectable class. Instead, refer to https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes . It's already compatible with the actual MDL version, but in version 2 there will be ripples for these buttons...
(I myself finally solved the problem by avoiding tables and cooking a list class and using list for my information.)
A row is cheked when it has the class is-selected:
<tr class="is-selected">
</tr>
You can get and set the check state in Javascript by toggling this class.

Categories

Resources