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!
Related
I have a case where I've created a table with entities.
Every first row is a clickable summary row and every other is a hidden information row which can be expanded with input fields and a submit button to allow the user to update the entity. The summary row has several columns.
The solution I have now for updating this, is a form in the information row, the inputs and a submit button.
Pug notations describing the scenario for one entity though there's gonna be many more in a real world scenario:
table
tr.summary
td.name
input(type="text",name="name", value="The name")
td.moreData
input(type="text",name="moreData", value="testing")
td.evenMore
tr.info
td(cospan=3)
form(action="api/update/")
input(type="text",name="customer")
button(type="submit") Send
My problem now is that I also want to include the inputs in the header row in my post data.
I also need to say that I've already intercepted the normal behavior for this submit, to allow JQuery to do a PUT request instead of the normal POST and also to keep the user on the same page.
My two solution alternatives are now the following:
In my javascript intercept code, programmatically include the inputs from the row before. This solution would require maybe 1-5 extra lines of code, but would break the semantic of my HTML because the form doesn't include all fields that are being sent.
Update the HTML in the summary row, to have only one row with a table inside containing the previous summary row and the information row. This solution would allow me to wrap the inner table with a form and there for keep the semantics. But it would look horrible..
Any suggestions on which solution would be the best, or if there are any other solutions possible to this?
I got a tip on another channel about an attribute that's new in HTML5. The attribute is on input element and is "form" which declare which form it belongs to. I tried it, and it seems to work perfectly so for. Hopefully I don't run into any problems with it later.
The solution doesn't work in any versions of IE, but since I'm using jQuery to do the posting and not using the native behavior, it should work in my scenario but may not work in others.
table
tr.summary
td.name
input(type="text",name="name", value="The name", form="entity_1934")
td.moreData
input(type="text",name="moreData", value="testing", form="entity_1934")
td.evenMore
tr.info
td(cospan=3)
form(action="api/update/", id="entity_1934)
input(type="text",name="customer")
button(type="submit") Send
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.
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.
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.
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.