Next view loads before old view clears - javascript

I've been having this strange problem from the beginning of the project until now. When clicking through pages, it seems as though the new (or 'next') page loads the view before the DOM is cleared. So it sometimes stacks elements from the next page under the old page, then after a slight delay the old page gets cleared.
For example, the first screenshot is the login page:
And the second screenshot is if you click to 'sign up'.
To clarify, this happens when loading pages too. For example I have links in a nav bar:
ONE
TWO
And clicking through those pages I see stacked dom elements. Is it cause of this "#" situation?

Related

Load previous pages on top of the page when "history.back" (click browser back button)

The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy loading over shop/category pages through AJAX. Also, once the next page is loaded, the application updates the browser's URL with the pushState() method.
Case study:
Imagine you visit example.com/shop, and you scroll down. When you reach the footer, the next page is lazy loaded through AJAX and the browser's URL updates to example.com/shop/page/2. Once on page number two, you click on a product (example.com/product/lorem-ipsum), read the details, and see the pictures. Then you decide to go back by clicking the browser's back button. In that scenario, now you are back to the page example.com/shop/page/2, but the problem is that page one does not load on top of page two, so only the products of page two are showing. Once on page number two, can I automatically load the previous page/pages above the current page?
Real example:
If you visit the Nike website, you will see what I would like to achieve on my website. Please, load multiple pages scrolling down. Once done, click on a product and go back by clicking the browser's back button. Once the page is loaded again, you will appear in the exact place where you were before visiting the detail page, and you will see how the previous pages have been loaded on top of the product that has the focus (just the one you clicked).
What I have tried:
I have searched over the internet, and I haven't found anything. Maybe I do not know what to search. I have read that the window popstate event is fired when you click the back/forward button. I have tried to use this event to run some tests, but I have failed. I'm lost :(
Can you help me, please? Thanks in advance.

How can I change the source of an iframe when the user clicks on the browser back button?

Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?

Jquery Mobile $(document).on('pagecontainershow') & $.mobile.changePage()

The issue I am having is when I am navigating between pages from the main menu page. If I navigate to 2-3 pages too quickly, the new page appears for about half a second before the page shifts back to the previous page then about half a second later it finally goes back to the page referenced in $.mobile.changePage(); For instance, from the menu page, click on the link to go to page 1, then really fast click on the button to go back to the menu page. After a few times of clicking quickly, page 1 will turn into the menu for half a second, turn back into page 1 for half a second then finally reload the menu page. I realize that in the real world most users won't navigate like this but I can't have a bug like this present as it can cause problems with loading form data. Would that be causing the issue?

Stay on Current page UNTIL the Next page has FULLY loaded

How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

jQuery works in old DOM after load

I have a page where I some jQuery code for. After it has finished it goes to the next page.
I use this to go to the next page:
$("body").load(//url,function(){
//do your work
});
The pages loads correctly into the old page. With chrome I can see the new DOM.
The function is exactly the same for both pages
$('button').each(function() {
//start working
}
Only at the second or even third page it keeps working in the old DOM.
The first and second page are almost exactly the samen just other data they both exists from tables.
As an example I have a table in every page with a random number of rows but I only need the rows where there is a button in, there are no other buttons on the page so I for each button.
When i execute the code everything on the first page goes like it should but at the second page it uses the data from the first page again, so not the new data I loaded.
If I take out the load and paste the code in console in chrome then there are no problems and everything works like it should. This is no problem if there are only 2 or three pages but if the page count gets bigger it will be a problem..

Categories