URL change without flicker - javascript

How can a page be reloaded with a new URL and the corresponding contents smoothly, so that the header does not flicker? For instance if on Twitter I click the menu items Home, Connect, Discover, the header stays displayed, no flicker. The only way I know this can be done is using Javascript, but Javascript cannot change URLs. What is the magic behind Twitter's website?

They are simply using ajax.
The header does not flicker because it does not change. The ajax call ask for data, and when it gets it, it inserts it into the body.
For the body,
You could use an effects function to fade in the new content if you do not want an abrupt change when it is ajaxed in.
If you want to load your static data in one upload, you can then flip through static content using the CSS display property.
You can see that the browser is not loading a new url because there is no indicator.
Also, you can see the ajax indicator for twitter is running.
To keep a history of your ajax calls use info. from this post:
For ajax - Hashes vs HTML 5 History API?
For Twitter:
They are using CSS to flip through the page as the ajax indicator and the load indicator do not light up after the initial ajax call.
You can verify that they are using history by doing window.history.back() in the console.
To change the URL dynamically see:
Change the URL in the browser without loading the new page using JavaScript

You could use history.pushState to manipulate the currient url. And reload the page with ajax functions.

Related

Get a URL that will load ajax content of a packed solution

I have a packaged web application with multiple ajax calls that will load html content in the middle of the website.
Is there a way to go directly to one of the ajax calls from the URL instead of manually clicking the buttons to reach the required content on the page immediately?
As a sample, i want to show the content of this page like i clicked the button without clicking it using JavaScript, jQuery, or manual click.
https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first

Prevent a page from fully loading in codeigniter

I have separate views for my navbar (I'm using materialize), home, etc.
This is what my navbar looks like
It has tabs. When I click a another tab, a method in my controller does this
$this->load->view('navbar');
$this->load->view('payables');
However, it reloads my whole navbar which prevents my jquery to fulfill it's duty to change the active tab, the page loads but the tab that is selected is still 'HOME'.
How can I prevent my navbar from reloading and load another page at the same time using $this->load->view(). I researched that there is something called ng-route and ng-view in Angular JS that will accomplish this. Is there a counterpart in codeigniter?
If you click in a tab and you "load a method", it means you're launching a whole HTTP request, and you will reload the full page.
To avoid that, you'll need to do it asynchronously. You'll need to create an AJAX request, to load only the part you want. In your view, you'll have to code the JS request that launches a call to the server to render only the part you want to show. When the server answers, your JS will have to allocate that into the page.

Load different pages while leaving certains divs behind

I want to know how some web pages move between different PHP pages without reloading the entire page. Here some divs stays the same. If I use AJAX i cannot share the link of the page, so I need to do this. Thank you.
You have to use AJAX in order to do that.
BUT if you want to be able to share the link or handle reload ou need to build a navigation system using # and some javascript around it.
There is a lot of example for doing that on the web.
https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=tutorial%20build%20ajax%20navigation
You could just load a new page and include the same divs of the page :
include 'div1.php';
You could use the other answers below and just use ajax but also build a url at the same time so you can navigate back to the same structure of the page.
clicking the link modifies the url, eg:
document.title = document.title + '?div1=true'
Modify the URL without reloading the page
and then just does an ajax call to load a new section. And on first page load, parse the url to check what divs to load.
you could use iframes:
<iframe src="/div1.php" id="div1"></iframe>
And clicking a link loads new stuff to a specific iframe.

How to 'un-cache' ajax-loaded html when user leaves page

Right now, when a user clicks on a link on my site, I use ajax to only replace the content in the main frame (the header and a sidebar need to keep state across pages, so I don't want to reload them). I use pushState and popState to alter the url bar.
I explicitly do not cache the ajax content and my site works fine--but it's a bit too slow-feeling, particularly on 'back' commands.
If I do cache the xhr html requests, then the site works well internally. However, if a user enters a new URL and leaves the site, if he/she hits the 'back' command, only the unstyled, header and side-bar-less main view content will be pulled from the cache and the site won't display properly.
Is there any way for me to have caching internally but flush the cache if the user leaves the page?
I think I understand your description now.
When I visit /page1.html on your site then the downloaded HTML has main content + header + sidebar.
When I click a link to visit /page2.html, AJAX loads the page and the downloaded HTML has main content ONLY.
So, at this point the cache contains a full /page1.html and a partial /page2.html
Now, when I leave your site and then return with the back-button, the browser grabs /page2.html from cache. But that is only a partial page, and your site "breaks".
Ideally you want the browser to grab partial content only when requested with XMLHttpRequest.
Also, it would be nice if both the partial and full pages could be cached.
pjax addresses this issue by appending a _pjax=true param to the URL query in the AJAX request. I think this should just work in most scenarios.
NOTE that you don't add this param to the URL that you pass to pushState().
An alternative to this would be to ALWAYS download the full page, and then extract the #main-view when using AJAX.
Of course, you could make this someone else's problem by switching to PJAX (you'll need to use the fragment option).
Another JS lib that handles pushState() for you is my HTMLDecor project. With HTMLDecor, your pages only contain main content + a <link> to another (presumably shared) HTML page that contains the header / footer / sidebar. HTMLDecor adds these to the page from within the browser. When the user clicks on a link to browse to another page, HTMLDecor uses AJAX and pushState - no configuration needed. Of course, if the browser doesn't support pushState then a normal link navigation occurs.

Render optionally needed content only when needed on dynamic JS page

I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.

Categories