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.
Related
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.
My current setup looks like this(from here, mostly):
This is the result of my home view. What I intend on doing is keep those 2 sidebars in place and refresh only the content part.
My question: What is the obvious solution to this in django?
From what I read so far it seems to be using Ajax to see what exactly the user clicks on the sidebars and return only a part of the HTML which would be the div where all the content is. (or return a JSON and refresh that div depending on the JSON values?)
I need to avoid refreshing the entire page, it seems useless. I could forget about Ajax and just run on separate views but I would have to pass every time a context variable to populate the sidebars depending on the user and this seems to be an overkill.
Even more specific: On the push of a button on the navbar now that is a href- links to another page. In order to make it refresh only part of the page what should the button trigger? Should it trigger a jquery function or is there a better option?
If your concern is only about left sidebar calculations, then you can go with caching
Django allows to cache part of page - sidebar is ideal item for caching. If sidebar is different for users (I see at least playlists menu item), then it's also possible to implement fragment caching per user, check Vary on headers part of documentation.
Using ajax will complicate your development process - generate html/json encode/render it on user side, etc, etc. And now almost no one uses django in this way. If you want pure single page application, then I suggest you to take a look at some javascript framework like Angular, Vue or React + Django API backend.
I want to maintain the Scroll Position between two pages. I have a Page A which has many reports, when user clicks a report, user will be redirected to Page B where the report will be opened to make the changes. After submitting changes, user will be redirected to Page A. Here the problem is, showing the top of the page but I want to show the page at the previous position.
I have tried using this.MaintainScrollPositionOnPostBack = true; but this is working only on the same page but not between the different pages.
I really need to fix this, please give me your thoughts...
The simplest thing to do is probably give every link/report on page A an anchor.
So, for each report you would hide an id attribute somewhere - say the title, so it would be something like <h3 id="report42">Report 42</h3>. Then when you go back from page B, instead of going to www.example.com/pageA.html, you go to www.example.com/pageA.html#report42. This will open the page with the scrollbar at wherever the report42 id is found.
A brief description of what I do:
- create 2 new test banners
- add a Banner Rotator to a cms page, either using the Insert Widget button or via a XML update in the Design tab, selecting the 2 test banners and rotating them as series, random or shuffle
- view the elected page in the browser, refresh
Only the first banner will be displayed.
If FPC is off instead, the banners will rotate as expected.
Is it a bug, or what am I doing wrong ?
The way full page cache works is that it utilizes placeholders for various data that is NOT supposed to be cached with the full page. Examples would include the mini cart, recently viewed products, etc. These separate items are cached and updated separately usually using a cache key that is made of a descriptive name plus the user's session ID.
This file: /app/code/core/Enterprise/PageCache/etc/cache.xml shows the placeholders.
A good example for what you need to do is here: /app/code/core/Enterprise/PageCache/Model/Container/Viewedproducts.php
I am familiar with several approaches to making the back button work in AJAX applications in various situations, but I have not found a solution that will work gracefully in my specific scenario.
The pages I am working with are the search interface for a site. You enter terms in a normal search box, click "go and wind up at a search results page. On the search results page there are a ton of UI controls for filtering/sorting the search results to find what you are looking for. Some of the operations triggered by these controls may take a (relatively) long time to complete (e.g. several seconds).
This latency is fine in case where the user is initially filtering/sorting their results... there's a nice AJAX spinner and so on... however when the user clicks on a search result and then clicks on the BACK button, I would like the page to instantly be restored to the state it was in when they clicked through.
I can restore the states using IFRAMEs/fragment identifiers as a dictionary of page history, but what ends up happening is that when the user first hits the back button the initial page is loaded, then it (re) makes the AJAX query to get the page state back, which triggers the AJAX spinner and another wait of possible several seconds.
Is there any approach that does not require this kind of two-stage load of the page when the user returns to the page via the BACK button?
Edited to add: I am partial to jquery but I'd be happy with solutions that depend on other libraries/toolkits or that are standalone/raw javascript.
Edited to add: I should've added that I'm trying to avoid cookies/sessions because this prevents people having multiple brower windows/tabs open and manipulating different sets of search results at the same time.
Edit: Matt, can you elaborate on your proposed solution (triggering a page change event via fragment identifer)? I see how this would help with BACK button clicks across the same page but not coming BACK to the search results page after clicking on a specific result.
Just use a cookie.
Have you investigated the YUI Browser History Manager?
Try to use localStorage object. Here is crossbrower libs jStorage and WEBSHIMS json-storage
Would it help to trigger a page change event using the "Add some info to the # at the end of the URL approach".
That way, clicking the back button shouldn't actually change the page, and you should be able to restore state without the first page load.
Use something persistent that is tied to the user's profile.
Cookies and sessions are good ideas, but you can also keep those stuff in the database. That gives you an added advantage of being able to save the user's filtering preferences accross different browsing session.(if, for exampple, he was looking for something in the office and then decided to continue searching when he is back at home).
It all depends on the complexity of the filters and weather or not it is something you think that the user will want to use accross diffrent browsing sessions..
Edited to add: I should've added that
I'm trying to avoid cookies/sessions
because this prevents people having
multiple brower windows/tabs open and
manipulating different sets of search
results at the same time.
You can create a random token and assign it to the fragment identifier.
on first page load create a token if no fragment identifier is set
before navigating out, store all the temporary ajax data in a cookie with that token as index.
when hitting back, if you have a fragment identifier set, load the data from the corresponding token in the cookie.
you can even add a "time" field to expire tokens, etc...
sample cookie (JSON):
{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}