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
Related
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
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.
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?
I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.
I am using an iframe to embed content from another site. The button in the iframe opens an overlay with a form. The problem is when the button is clicked, the overlay does not open fully. The problem is not from the overlay but from the iframe and parent.
The site i am testing on is at www.sycotickets.com/form.php. you can check it and click on the button at the bottom to see the problem. I also learnt javascript can be used to embed. Can anyone please pint me in the right direction on both issues?
There are 2 possible answers when using AJAX to load page content from a different server
1) Both servers are in a similar domain (s1.example.com, s2.example.com) in which case, you can set the domain to simply be example.com which allows full functionality withing AJAX calls.
2) Servers are on completely different domain - The server which provides the content (currently for the IFrame) must provide the data using the JSONP protocol (note the P!) this means the resulting data is loaded into a script tag which then executes. The data itself contains a JS function call eg:
{data: '<pre>Some Html</pre>'}
is actually returned as:
function SomeFuncNameSpecifiedInTheRequest({data: '<pre>Some Html</pre>'});
Instead of doing an AJAX call, you dynamically add a script tag to the page, something like:
<script type="text/javascript" src="http:/www.example.com/GetMyData.php?WrapperFunction=SomeFuncNameSpecifiedInTheRequest">
You then implement SomeFuncNameSpecifiedInTheRequest on your page and process the results when it's called. JQuery implements this functionality for you automatically (at least the client-side bit.)
See here for more information on JSONP and here for more information on setting the domain
Nothing you can do really. If it's loading from an external site browsers prevent you as a developer from accessing other sites and modifying them to try and prevent XSS attacks. You could try to fake it by moving the iframe where you want it dynamically and overlaying the black on click on your end... but that seems pretty kludgy...