how can i refresh table content without refreshing all the page - java

i have a table and the content of it is all from data base ,which is a rows of student names and a columns of questions, and with this table an instructor can track the students progress of solving question on real time, so what i want is to update the only the table , without refreshing the whole page, which causes starting at the beginning of the page so it would distract the instructor,,
any suggestion

Use AJAX.
Check this out:
AJAX/PHP/MySQL
This edit is an answer to your latter comment--
To refresh your content every two seconds you would need to to request via ajax every two seconds. You could do so by calling your ajax function using setInterval() like so:
setInterval("ajaxFunction('someParams, 'someParams')", 2000);
But all this does is request from the server every two seconds, but refreshes whenever your sever responds, which by the way might take longer than exactly two seconds.

as suggested by #Babiker you can use ajax to refresh the content. But instead of updating the whole table, you can update only the cells required. in your case you can refresh the questions column.

Related

How to show progress of threads on the JSP page using Spring MVC?

I have a Spring MVC Webapplication, there is one form from which I am taking some input,based on those inputs, I am creating one unique id (by checking it in the database,logic in Java side not database for creating unique id). Everything is fine till now.
Now I want to give a bulk upload option through CSV file. I parsed whole data from csv file and I tried to insert data (8000 records) in the database using TaskExecutionService. But still this whole process is not much fast that I get a immediate response, so I want to show the progress of whole task on jsp page , so that It looks interactive and also on completion of all threads, I want to display a link to download csv file with all the unique ids.
I don't know how to update page as threads are running behind the scenes?
Any other approach for this process is also welcome, if compatible with spring MVC.
This can be done using ajax, where you can poll the progress percentage from your back end and use js/jquery or other plugins to show the progress.Any how you have to design the logic to get the percentage of work done by your threads.May be you can count the number of rows inserted and get a logic out of it to calculate the percentage of work done. so there should be a method which returns the % of work done and ajax calls to this method can help to display the progress.
refer jquery progress bar
Progressbar.js

JQuery datatable refreshing after Serverside processing

I have one table having number of columns in which some columns are dependent on the other.
How can I refresh the jQuery datatable after editing one column in the table so that values at other columns are also updated after server side processing.
I haven't tried this approach, but I've seen that everything in datatables is done through custom functions. For example, in the buttons section, you can add a custom button with
,{
"sExtends": "text",
"sButtonText": "Refressh Serverside",
"fnClick": function ( nButton, oConfig, oFlash ) {
MyRefreshFn();
}
}
where MyRefreshFn(); can be anything you want. You can define it outside the datatables declaration and use, for example, jQuery.ajax to detect when the server answers, then trigger a common Datatables method. In your case, you might want to trigger the whole row rendering queue, to make the changed value affect every other dependant cell.
You can do one thing, after getting response refresh page. If you are using some plugin find his documentation you will get method related to refresh.
OR send request to same page and display it. It gives you fresh result.
$.post("page_url",{parameter},function(data, textStatus,req){
$("div_id").html(req.responseText);
});

Pagination view in web pages

I have a query. I am using JSP with tomcat for web development. I have a set of values which have been retrieved from database as a list. Now, I want to show the values one by one on a page with a next button. How this can be done? Do we make multiple pages or dynamically refresh the page with new value on pressing next button? Could some one please guide me on this?
if I'm not wrong, JSP does not provide any build in pagination control. you can use pagination through javascript, or create you own control for pagination. here is a link which might will you in pagination with javascript.
Tell me one thing, you are going to pick the records from database. So this is all dynamic data. So approach 1 is a big NO NO.
You should be dynamically refreshing, the page with Next button pointing to the next record to display. But don't you think having a single record to display in a page, can make a UI experience bad.
UI should be simple yet cover most information, so rather go for the standard solution with list of records in a table like format with action link to view details for each record which will point me to the desired record detailed page. In actual this detailed page will just be one, but displaying dynamic data.
You can have a look at Datatable in JQuery for pagination ofcourse.

Dynamic pagination of rich:dataTable/rich:datascroller with large datasets

I currently have a Richfaces dataTable bound to a backing bean that contains all the data. This table is bound to a Richfaces data scroller.
Users can then enter scroll between the data.
There is also a text box that dynamically updates the data table results displayed to them, based on text they enter into it. It reRenders the dataTable and datascroller on the keyUp event.
The backing bean it’s bound to first pulls all the data from a number of database tables. This data is pulled when the user submits a normal post request to the server, and it’s the results of this request that are used for all subsequent Ajax related queries (Results saved as list of objects, no more database calls made).
I have a problem in that the dataset can be huge at times, 100,000s of records.
This causes the initial request to the server to take a very long time.
A possible solution I'm looking at is pulling back only a small amount of the data in one thread for the initial user port request. This data can then be displayed in the data table while the main thread works in the background pulling the bulk of data back.
Is this feasible? Would it be possible to update my datatable/datascoller as the main thread pulls back new data? Would it be difficult?
Database and query optimization has been looked at, so no more improvements of any significance can be made there.
Thanks in advance (I know this probably is not an easy question to answer)
Implement SerializableDataModel to hold your data for sorting and paginating.
Seems like you need exactly what Seam Application Framework's Query object is providing.
If you don't want to use Seam, you can either view the source, and copy how they are doing it and just steal the idea.
Basically what you need to do is fetch a given result set for each time the user press next, previous, first, last etc

Best Practice Updating DB Records

Say you retrieve 100 records, and display them on a page. The user only updates 2 of the records on the page. Now you want to update only the two records, and not the other 98.
Is it best to have one submit on the page, then somehow know which 2 are updated, then send only those two to the db for an update?
What does the "somehow" look like?
Or, would you have an update-submit button for each row, and have it only update the record its tied to?
Of course there are different ways you could do this. In general, you can save yourself some trouble and server-side processing by using Javascript to assemble your POST data for only the records that have changed. Two thoughts on how this might work:
1) Go the ajax route and do live-editing. So records are presented in a table and appear to be non-editable. When a user clicks a particular row, that row becomes editable by using Javascript to create the appropriate html form on the fly. Then have either a submit button or some other handler (say, moving focus to another table row) which will trigger the POST which updates the DB (asynchronously via your preferred ajax method). Happily the mainstream Javascript frameworks can help a lot in this area.
2) Checkboxes - whenever a row is edited, its checkbox becomes checked. When the submit button is clicked, use javascript to post the POST data by grabbing everything in row whose checkbox is checked. A user can un-check a box to cancel changes to that row before submitting.
Ajax it using jQuery or some other JavaScript library and put and update button on each row.
There are many answers to this question and to some extent they depend upon your development tools and the "feel" of the site.
If you were implementing Ajax calls to do the updates on a line by line basis then this would logically seem right to have a button per line and then update it with an Ajax call when a line was changed.
This is also just the scenario that disconnected data sets were designed to solve and ADO.net handles these very well.
So as ever, the answer is "It Depends!"
You can use JavaScript to mark each field as changed when a user changes an input field. Create a hidden fields that has the id of the row you are updating, and dirty flag. (like is_dirty_$id) In JavaScript, create an onChange handler that sets the hidden field as dirty. when any input is changed.
Alternatively, you can create hidden fields for each real field you display. the hidden field would contain the initial values. check each field on the server side to determine what has changed.
You probably want to store a last_modified date as a hidden field for each record. This way if another user updates the same record, you can display an error message saying "this record has been updated by another user" or similar.
One submit button. I could foresee case I might use more then one, but in the general case just one. (Note, this looks like a web page question to me, so I'm answering with that assumption.)
There are 3 ways that come to mind which you could handle the tracking changes:
JavaScript: Put a onChange() function on the controls that update a hidden field. If that hidden has a value, then update the associated record. Requires JS on the browser, and doesn't tell you which fields to update, just which records.
Lots of form fields: Put a hidden field out with each control and compare them all when they come back. This would be ugly, but it would allow you to know which fields to update (not just the record). It would also allow you to know if someone undid a change that started.
Sessions: You could place the original values in session variables, then do the comparison when the values come back. This would be a little more elegant then lots of hidden fields, and less open to people playing with the posted back data (since you should never trust anything that comes back, even in hidden fields). Requires cookies on the browser and sessions on the server technology.

Categories