Develop Reference

Temporary page redirect for external links

I'm not sure what exactly to call this so I will try to explain it to the best of my abilities.
User> Connects to my website> Proceeds to look around clicking through the navigation menus ...etc. > Finds a link to an external website and clicks it.
I would like for their to be a small 5-10 second buffer on which he is temporarily redirected to something like mywebsite.com/goodbye.html
I'm not sure how to get my website to grab the url he clicked on and still redirect him to original link after the 5-10 second redirect buffer has ended. I also am not sure how to allow this to work on my entire site.
////////////////////////////////////////////////////////////////////////////////
All of these text based outgoing urls from mywebsite.com.
User clicks bob.com > 5 seconds redirect to mywebsite.com/goodbye.html > bob.com
User clicks david.com > 5 seconds redirect to mywebsite.com/goodbye.html > david.com
User clicks google.com > 5 seconds redirect to mywebsite.com/goodbye.html > google.com
User clicks stackoverflow.com > 5 seconds redirect to mywebsite.com/goodbye.html > stackoverflow.com

Your question is quite broad, but here is a very simple setup.
The script tries to capture the clicks on every 'a' element. It checks their href attribute. If that starts with http, the special behaviour kicks in, otherwise just performs the normal behaviour.
The special behaviour consists of showing some content and navigating away after 5 seconds.
The advantage of this structure is that it works quite transparently. If you don't have Javascript enabled (think web crawlers), the clicks will work as normal, without the extra content and the delay inbetween.
// Capture all link clicks.
$('a').on('click', function(event) {
// Get the element and its href attribute.
var $element = $(event.target);
var link = $element.attr('href');
if (link.substr(0, 4) == 'http') {
// If the link starts with http, assume external link.
// In that case, block normal behaviour, insert custom content and navigate after 5 seconds.
event.preventDefault();
$element.html("Leaving this website in 5...");
setTimeout(function() {
console.log("This is when the redirect would take place, if not in Staack Snippets");
document.location.href = link;
}, 5000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Go to internal link
<br><br>
Go to google
Now, the example is not complete. I just changed the text of the link, while in your situation, you may want to load some goodbye page using AJAX and show it in an overlay.
Also note that the example does not fully work as a stack snippet, because apparently it tries to load the new page (Google) trough Ajax, which fails. That aside, the code of the logic works fine.
Alternative
As an alternative, you could actually redirect to the goodbye page, and post the target url with it. After a couple of seconds that page can redirect to the target page. That redirection can simply be done by inserting a <meta refresh> tag into the goodbye page. That page has to be a dynamic page for that:
<meta http-equiv="refresh" content="5; url=http://google.com/">

Change all your external links to mywebsite.com/goodbye.html and add the the target page in the querystring. Something like this mywebsite.com/goodbye.html?redirect=david.com Then add the follwoing Javascript at your goodbye page
setTimeout(function(){
var redirectTo = getParameterByName('redirect')
window.location.href = redirectTo
//OR window.location.replace(redirectTo)
}, 5000);
// From https://stackoverflow.com/a/901144/3218330
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
getParameterByName() is from https://stackoverflow.com/a/901144/3218330

Href to Onclick redirect

I have research this topic through the community, although I cannot find an answer. I am using Bronto's direct add feature (attempting to use it), The documentation isn't that great.
In summary, the href link subscribes the user on the email list. The only problem is that this link opens a new page. When I want the user to stay on the same page. I though about doing a redirect, when clicking the link, though I am not sure if that would work.
I have tried this:
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = "href";
});
The goal is that I am trying to make it where the user clicks on the link, it subscribes them to the email list, but immediately redirects them back, without opening another window.

You're looking for AJAX. This allows you to make requests without actually navigating to a page. Since you're using jQuery
$("#emailSubscribe").click(function (e) {
e.preventDefault();
$.get("http://www.myurl.com", function (data) {
//All done!
});
});

You have 3 options:
Do an AJAX request to subscribe the user
$('#emailsubscribe').on('click', function () {
$.get('/email-subscribe/' + USER_ID, function () {
// redirect goes here
window.location = 'REDIRECT_URL';
});
});
Use an iframe and when the iframe has loaded close the iframe (ugly, hacky, not recommended)
Have the subscribe page redirect the user back. Aka do the common messages of "You have been subscribed. Redirecting back in 5seconds...". You would need to pass the redirect link to the subscribe page, aka
window.location = '/subscribe/USER_ID?redirect_to=/my-redirect-page'

You need to refer the var, instead of typing another string to redirect.
//Html
<a id="subscription" href="http://example.com">Subscribe</a>
// Jquery
$("#emailsubscribe").click(function(e){
e.preventDefault();//this will prevent the link trying to navigate to another page
//do the update
var href = "http://example.com";
//when update has finished, navigate to the other page
window.location = href; //<<<< change this.
});

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.

Remove URL Variable on after some time

I have a div identified as emailsuccess. A user fills out a contact form and submits it he is redirected to http://www.mysiteurl.com?email=success. I have a div that only will display when the URL contains email=success. (Basically it just displays a message "You're email has been sent".) I'd like to have the message display for about 5 seconds, then fade out and remove the email=success variable from the URL so if the user reloads the page or shares it with a friend, they won't be getting notifications that an email has been sent.
Maybe using the .delay() function I have set the integer to 5000 but I do not know how to have the content fade out and remove the variable from the URL.
Here's my code until now:
$(document).ready(function(){
var url = document.location.href;
if (url.indexOf('/Contact-us-a/7.htm?email=success') >= 0) {
$('#emailsuccess').show();
} else {
$('#emailsuccess').hide();
};
});

Unless you limit yourself to browsers that support the History API, you'll have to redirect the browser to a URL that doesn't contain that part of the URL (will cause page reload).
Symfony Framework for PHP solves this using flash variables in templates (has nothing to do with Flash) - variables that are available on the next request, but are deleted on the next. That way, you wouldn't have to pass that state via URL and a refresh of the same URL will not redisplay that message.