I have yet to come across a good tutorial that explains how to load records from a database and spit them out using jQuery Ajax and also display pagination navigation.
Example Page
Apple
Banana
Pear
Grapes
(Pagination Nav)
[First Page] [Prev Page] [5] [6] [7] [Next Page] [Last Page]
In my head I think it works like this.
User loads home page. Home page by
default spits out records with at
the first offset and with a
specified results per page (e.g.
LIMIT 0,10)
Serverside script queries count of
records, extrapolates number of
pages to navigate by using results
per page.
Serverside script echoes a
navigation panel based on current
page.
jQuery listens for click events on
navigation panel, uses get to fetch
the content and sets html of content
container.
I also want the URL of the site to change in case anyone refreshes the page (to obviously display the desired result).
How can this be done?
You might want to try dataTables, a jQuery plugin that covers exactly what your talking about look for server-side procesing
Related
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 have had 2 different display from a website that is shaped like a tab menu. For the first tab menu, data displayed does not require pagination, however for the second tab menu, data displayed requires pagination because the amount of data a lot.
How to display both of the data if the first tab menu did not need the presence of pagination and the second tab menu need pagination ??
Give me any suggestions step to resolve this.....
Either build pagination the normal way (with page refreshes, see the links in the comments to your question) and save a parameter to know that you're busy in the 2nd tab, or use ajax to load the paginated data in the 2nd tab. This requires you to build an api like functionality to obtain this paginated data as json and build the page with javascript. From the api you would call a method on your model that uses LIMIT and OFFSET to get the right data section.
We have a website product that allows users to search rental inventory, view results and then click through to a details page.
On the results page, we also allow users the option to refine their search via bedrooms, bathrooms, price, etc. When the form changes, we do not reload the page, we use Ajax to run a new search query and load the new results into the container.
For example, when the user first did a search, they got back 100 properties. Then they refine their search for 3 bed, 5 bathrooms, view = oceanfront and they get back 10 properties. Once the user finds a property they like, they typically click through to the details page. But, let's say they change their mind and click the browser 'back button'.
When that happens, all of our search params that were loaded via Ajax are now gone and our property count is back to 100 instead of 10.
So what I have realized is any data loaded via Ajax is not being cached in the browser so the original search is loaded not the refined search.
After doing some research, I think using history.pushState() and history.popstate() might be the solution but I'm having trouble wrapping my head around how to implement it for our problem.
Is there a better solution? If not, will history.pushState() work?
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.
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