JSP Page taking too long to load - performance

I have a JSP Page (this is a tabbed view) with 2 text boxes, 2 dropdowns, checkbox & 4 list boxes.
One dropdown is populated by making connection to db and query through prepared statement.
The 4 listboxes & 2nd dropdown get populated through AJAX if the checkbox is checked. By default the checkbox is unchecked.
The problem here is, the JSP Page takes too long to load. It is approx 0.11 min to load the page.
Even before I check the checkbox and populate the list boxes and the 2nd dropdown, the page loads too slow.
Does being page in tab slow the performance?
Any idea why is this happening and what can I do to improve the page performance?

I found a workaroud for this issue. I am loading the page first and then making AJAX call to load just this dropdowndown control. In that way, user won't feel that the page is loading slowly. I know this is not a permanent solution.

Related

Page performance Issue

I have a web page with employee records. In that page, there is a pagination. Each page has 10 rows of data.
I am thinking to implement the pagination in either of two ways.
I am planning to make an ajax call for every 20 pages. So that
whenever i make an Ajax call i will get 200 rows of data in my page.
I will show or hide the data when i click on pagination. After 20th
page, again i will make one more Ajax call to get another 200 rows
of data and i will have that data in my page and again i will do
show/hide to show the page content and so on.
I will make an Ajax call on every page click to get 10 rows of data.
I am not sure which method to choose. If i implement the first method, it might impact page performance. If i choose second option, the number of AJAX calls will be more.
Pls suggest the best one among these two.
Another approach would be to silently pre-fetch the next/prev page. eg. if the user is on page 3, silently pre-fetch page 4 (and page 2), so that when the user clicks on 'next page' the information is most likely there already.
Some care in race conditions needs to be taken with this approach, so that if the user clicks on 'next page' before the results from pre-fetch is returned, you do not make yet another duplicate call, but just spin/wait for the pre-fetch.

Partial refresh of JSF page using ui:repeat and AJAX

I have a page say "Main Page" (Page 1) which looks like a Outlook calendar page having a large number of rows displayed using . Actually, the columns represent "Weeks" and the rows represent "Products". The functionality is that the user can choose a product week combination and create offers for the chosen week.Ideally, as we have a lot of rows (products), we should have ideally implemented pagination but we have not.
We use JSF2 (Mojarra faces that comes with JBoss EAP 6.0). Main Page uses a different bean and Details page uses a different bean and both are in session scope.
When the user creates an offer, instead of refreshing the entire page (i.e. Page1), we just refresh the impacted cells using AJAX. However, the On double clicking the slot(offer), we redirect to a different page (Page2) that displays offer details.
Page 1 - Main Page and Page 2 - Details page.
There are 2 cases from here :
Case 1: User goes from Main page to the details page, just views information on the details page and clicks the close button. In this case, it is enough for me to display Main Page as it was before I opened the details page. To achieve this, we used browser history.back(). However, we faced the below issues :
(a) history.back() works only in Firefox and does not work in Chrome/IE.
(b) Even if we do history.back(), the page loading is cleary visible and as our page is heavy, it takes a few seconds. I would like to avoid re-rendering of main page again (i.e. make it look like opening a popup from the main page and closing it)
Case 2: User goes from Main Page to Details page and makes certain updates which require us to reflect those updates in the main page.(For example: change color of the slot from red to green on the main page).
Currently, when Details page is closed, we call an API that provides us with refreshed data (so that we do not need to maintain the list of actions that the user had performed) and we reload the entire Main page (Page1). However, as the page takes a long time to load, we are asked to refresh only the affected slots/rows.
So, the problem here is that if we have to achieve the refresh of Main Page through AJAX, we need to maintain a list of activities that has been done on the details page and feed it through AJAX which appears to be a complicated activity. (We also want to avoid calling the API.)
Is there any workaround which helps us to refresh only the selected rows on the Main Page to minimise the page load time. Can ui:repeat be partially re-rendered ?
PLease advise.

How retain focus on the same field, where user was, after page refresh in MVC3

The question seems to be basic but I would ask.
Is there a standard way to retain focus on the same field (where user was, before refresh) after page refresh in MVC3.
for simplicity purpose, I will take a simple scenario. scenario is like
I have three controls on a page.
a textbox ---Name
a dropdown ---Country)
another dropdown---City (which loads cities from server based on the country selected in field 2 and this causes the page to refresh)
What I want,
the focus to be on Country field, after page refresh.
I hope, the question makes sense.
To achieve what you want, just use jQuery's .focus function (http://api.jquery.com/focus/).
You may want to consider loading your dropdown dynamically through jQuery or jQuery UI so that you don't get the page refresh.

moving data between two list boxes

I have two ListBox controls (or 2 html select controls with
runat=server) on a web page and some buttons to move data from one
listbox to another (using javascript). The problem is that when the
page gets on the server I can't get the items that I've moved from the
1st list to the second on the client, I always see the controls as
they were when the page was generated on the 1st request.
How I can see on the servers the items that I've put on the 2nd list?please provide the code in mvc3
It seems..everytime postback .. two select boxes are refresh. Please try to put
In Page Load event
If(!IsPostBack)
{
// populate data into select boxes here
}

get and display data in MVC 3 using Ajax

I have one view page in MVC named as ‘Index’. There are 3 main controls in that view page. For better understanding, take below example as reference.
1. One Dropdown ‘Customer’
2. One Dropdown ‘Project’ (that depends on ‘Customer’)
3. List of Task (that depends on ‘Project’).
Currently first user needs to select ‘Customer’. So based on customer ‘Project’ dropdown data will be fetched from post method of Index and bind that ‘Project’ dropdown. After selecting ‘Project’, List of task will be fetch from post method of Index and bind those tasks. So every time page is loaded again.I want to do it by Ajax form submit.
My problem – those 3 controls are in one view page so I want to return page view using Ajax without using Partial View. Is this possible? If yes then how? Or any other solution so that I am able to display data without reload whole page again.
If u can give me example of such scenario then it will be good.

Resources