Develop Reference

Ajax - doesn't change URLs

I made the contents of the page change using Ajax, but the problem is the site url stays the same, therefore it doesn't load the page at all, just the text on it. So for example, I click on the Login link and the content changes, but the url stays on site/, not site/login. The actual login form does not load because it doesn't even call it, only loads basic text. How can I fix that ?
P.S. Using Zend for the website
Script:
$(document).ready(function() {
$('a').click(function() {
var toLoad = $(this).attr('href');
$('#content').load(toLoad);
return false;
});
});

Ajax does not reload the page or load another page so the url does not change when you make an ajax request.
If you want the url to change, for example so that your ajax-filled pages can be shared and bookmarked, you need to change the url manually.
You can use the html5 history API for that.
A simple example:
// we need the click event here
$('a').click(function(e) {
// cancel default click action using `e`
e.preventDefault();
var toLoad = $(this).attr('href');
$('#content').load(toLoad);
// check if the html5 history api is available in the browser first
if (window.history && window.history.pushState) {
// push the state to the url in the address bar
history.pushState({}, e.target.textContent, e.target.href);
}
});
Now the url in the address bar should change to the url of the link but the link is not really followed, instead the ajax request was made.
Note that you also need to make sure that all your urls load correctly. This is just a simple example and by the look of it your linked url would not load a complete page.
Check for example the documentation on mozilla.org for more information.

window.location not refreshing to the existing URL

I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.

Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.

It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';

You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";

How to change URL path when paging using ajax + jQuery

I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.
Example:
User on page example.com/feed - seeing content of page #1
User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
URL is still example.com/feed but the content is of example.com/feed?page=2
How can I set the URL to point to the new page without triggering a refresh (no redirect) ?
I am using Nodejs + express.

I understand you are aiming at a single page application.
While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.
The Sammy.js framework gives you a nice base to build upon, you can try it out.

You can use history pushstate but some browsers does not support.
history.pushState({id: 'SOME ID'}, '', 'myurl.html');
And don't forget about window.onpopstate, it pops if user clicks back button.

Redirect the user to an anchor point.
Page 2
And in your document.ready:
if (window.location.hash.length > 1){
var pageNumber = window.location.hash.substring(1);
loadPage(parseInt(pageNumber));
} else{
loadPage(0);
}

I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.
//Listener
$(window).on('hashchange', function() {
if(loaction.hash.length > 1) {
//The anchor has been changed.
loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
} else {
//Load standard page
...
}
});
Change the anchor to load new feed
Page 2
Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.

How can I get the destination url of a link on the web page in the Javascript onbeforeunload event?

Is it possible to capture what link on the web page the user clicked on?
Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.
This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.
They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.
I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.
I am using JQuery & Javascript.

Instead of having a completely different set of headers/footers you could replace all links in certain areas with links that open in a new window like so:
$('#header a, #footer a').each(function() {
$(this).attr('target', '_blank');
});

This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.
I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.
$('body a').click(function(e) {
//if link is reference to page element
if ($(this).attr('href').charAt(0)=="#") {
return;
}
//check if link is to same window
var pathname = window.location.pathname;
var pathname2 = $(this).attr('href');
pathname2 = pathname2.replace(/^.+\.\//, '');
if (pathname.indexOf(pathname2) >= 0) {
//link clicked is contained on same page
//prevent page from getting reloaded & losing data
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
//link clicked on is another page
if (hasMerchandise) { //var to indicate user has items on order form
//give user options: leave page, open link in other page, stay, etc.
// $('.popupForm-handleExitRequest').click(); //roll your own code
//prevent page from getting reloaded & losing data
//in case user wants to cancel page change or open link in another window
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
} else {
//load new page
$(this).removeAttr('target');
}
});

Detecting when inside an iframe and then hiding elements

I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.

This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!

The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}