Is it possible to load the entire page using PJAX and change the browser's page url?
My purpose is to prepare first the response to make sure that it would be loaded without refreshing the page in a long time after clicking in the menu-page-link or execute a javascript function.
I tried using PJAX but the one that provides a response data for the selected element to load where the request has to display.
Like:
$('a').pjax("#container", { fragment: "#container" });
I want and I tried:
$('a').pjax({url:"new-page.html"});
But it didn't work.
I'll appreciate your help and suggestions. Thank you!
Yes it is very much possible using jquery PJAX plugin , you can keep the header footer static and change the body content using PJAX , and yes it will change the url too along with browser history stack i.e. almost making it like a normal navigation, except that page wouldn't be refreshed.
But the container needs to be same in both the urls. You can try :
$(document).pjax('a', '#pjax-container')
You can load page via ajax but you cannot change page url, when you change it, it will automatic redirect to that address. This prevent phishing page, fake url.... But why you need to load page via ajax then change the url, why don't just change the url?
Related
I have a web app built using Jquery Mobile. The problem is that from the menu when i click on a link through the menu the css and the jquery doesn't load properly. This happens only when the pages as grabbed through ajax request.
When the ajax request is disabled or page is refreshed the layout gets back to normal
Please check the below link
http://www.vidznet.com/ng1/test/chart.html
From the menu when you click on the profile link you will see the layout is completely messed up. Once refreshed it comes back to normal.
Can someone tell me what might be causing it? I want to make it work without disabling the ajax request to grab the pages.
Any help will be appreciated.
You have a typeo in your link tag in chart.html.
You spelled vendor as endor
The problem was with Jquery UI. Looks like they are not compatible.. Once i removed the Jquery UI It worked
I am trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.
A client needs the url to stay the same on a wordpress website.
So after trying several solutions I think the best way will be through AJAX with the .load method.
So down the side of a page there are navigation items controlled by the WordPress engine taking you through to another page.
Is it possible to intercept the outgoing link and load it into a div on the page without having to modify the anchor tags?
This plugin should do what you are looking for:
http://wordpress.org/plugins/ajaxify-wordpress-site/
http://www.swook.net/p/jquery-ajaxify-plugin.html
I am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
I have loaded a page into div using jQuery. But when i refresh the webpage will go to initial stage?
How can i load the same page after refresh?
let the inital stage is
$("div").load("a.htm")
after clicking on a button it will load
$("div").load("b.htm")
now the division contains b.htm and after refreshing it is loading a.htm
I need to avoid this
if the div contains b.htm
after refreshing it should load the b.htm
how can i achive this????
Everytime you load a page into a div, you should alter the URL in the location bar to something like: http://example.com/#b.html. This will not navigate away from the current page, but when they reload (or open the saved bookmark), you can check the URL and use the part after # to indentify the page.
One possible way to achieve this is to use cookies. Once you load b.htm with AJAX set a client cookie and when you refresh the page check for the presence of this cookie and load the appropriate page.
You'll need to keep a note of which page is currently loaded, store it somewhere (local browser storage, or perhaps server-side), and on reloading your page checking against it and re-loading the div's content.