I am writing a web app using PHP, MySQL, jQuery, and some miscellaneous add-ons like jEditable and DataTables. On most pages, the user will submit a form which will query the DB and bring back records matching my query rules. This works for 95% of my users 95% of the time. It's the other 5%/%% I am trying to help.
I am excluding records that are no longer being processed (completed/cancelled/accepted/rejected/etc.), leaving only "live" records. However, sometimes the leadership team needs to see the records I exclude. I could write a whole other page or report for each case, but that seems a huge waste of time.
Is there a way to add a "show all records" checkbox or button to my page? When clicked, the button would get and display the rest of the data, so users don't have to refresh/go to another page/etc.
you should add a toggle switch - it could be just a check box, or you could use something fancy like this: http://simontabor.com/labs/toggles/
Bind an event to it that preforms a table.ajax.reload() in datatables to pull in the new records. Also, for the datatables ajax request, provide a callback that returns the toggled state of the toggle control as a post variable, then handle the filtering in your sql on the back end.
Note, this solution means you will have to configure datatables to source data via ajax, which, from what you described sounds like you should be doing anyway.
Related
Right now I'm building a team based project with Node.js/MySQL/React and have been stuck at a ToDo list part. I would like to know what is the recommended or fastest way how to save data or options to database automatically and without any submit button on each row.
Todo item
You could do a single POST when adding a new row, and whenever you change the options you could do a PUT request, but as a general design rule I'd advise against it : you want to be able to review all your changes before committing them to the database, plus this requires a lot more requests, hence more controllers rather than just having one.
Looking at your screenshot why don't you have a single submit button at the bottom of the 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 am trying to figure out how I can save selection state in a web app. To be more specific I am making some query interface that queries a mongo backend. The results are are rendered in a image gird type view with checkboxes on each image and a download button to download selected images. Now, I am anticipating dealing with a lot of results for a given search. To handle this I am going to use paging. I am wondering how I would even save the selection state as I am flipping through paged results. I am totally new so if anyone can so much as provide an answer with some supporting information I can look into; that would be great.
Use AJAX to fetch the results on the next pages and append it into a separate section in the page rather than navigating away from the first page. This way the selected results are maintained as they are. You may need to do some calculation around your pagination and some toggling logic to show/hide divs when the pagers are clicked.
Useful link you could use (maybe ignoring the PHP/MySQL parts): http://www.sitepoint.com/pagination-jquery-ajax-php/
I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.
I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.