Rewrite URL on location change - javascript

I'm looking for a way to rewrite URL of the location when the user want's to change page. So, let's say you have something like this:
<body>
<a href="http://example.com" />
</body>
Is there a way I can catch URL changing moment, and actually modify that URL before location is changed, for example I would like to change href into relative link like \http://example.com and redirect page actually there.

If you just want to trap the link and then modify it then yes, that's quite simple...
$("a").on("click", function(e) {
e.preventDefault(); // stops the link doing its default thing
window.location.href = "something/" + $(this).attr("href");
});
You obviously need to modify the line that changes the location, so that it modifies the href value however you need. I'd also recommend giving the links a class and selecting them with that, as the above code will affect every link on the page.
Finally, this will need to run after the DOM is loaded, so either wrap it in a document.ready handler of your choice, or put it in a script at the bottom of the body.

Demo
You can work from here. Also you will need urlrewrite in htaccess for this to work properly.
$(function () {
$('.buttonn').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s1") === -1 && window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s1=s1");
} else if (window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s1=s1");
} else {
window.location.href = window.location.href + seperator + "s1=s1";
}
});
});
$(function () {
$('.buttono').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s2") === -1 && window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s2=s2");
} else if (window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s2=s2");
} else {
window.location.href = window.location.href + seperator + "s2=s2";
}
});
});

Related

How to check if a specific link has been clicked(JS)

I'm making a chrome extension and what I want to happen is to alert the user if a specific link has been clicked on Facebook. And in my script every time I click a link it always alert accessing gma.
$(document).on("click", "a", function() {
//this == the link that was clicked
var href = $(this).attr("href");
if (window.location.protocol == 'https:'){
if(href == "gmanetwork"){
alert("Accessing Gma");
}}
else{
alert("false");
}
});
I would suggest something like this:
You change your html links to :
Your link
and your script:
$(document).on("click", "a", function() {
if($(this).attr("targetLink"){
alert("You are going to the following page: " + $(this).attr("targetLink"));
}
});
Code at Question assigns the value if (window.location.protocol = 'https:'){ "gmanetwork" to href using = operator at
if (href = "gmanetwork")
instead of checking the values for equality, use === operator
if (window.location.protocol === 'https:') {
if (href === "gmanetwork") {
alert("Accessing Gma");
}
}

Using Javascript, Prevent Scroll on Empty URL Hash Change

I want to detect hashchanges, and if the hash is empty, prevent it from scrolling to the top of the screen.
Here's what I have:
// Older version of jQuery, so can't use .on()
jQuery(window).bind("hashchange", function (e) {
if (window.location.hash == "") e.preventdefault();
else alert(window.location.hash);
});
Put that into your console, and you can see that it correctly detects hash changes and alerts if they are not just "#", but if you change it append "#" to your url, it still scrolls to the top.
How do I prevent the screen from going to the top of the page when you add an empty hash, "#", to your url?
$(function() {
$('a').click(function(e) {
var lnkHref = $(this).attr('href');
if (lnkHref.substr(lnkHref.length - 1) == '#')
{
e.preventDefault();
// optional if you want to redirect still
var trimmedUrl = lnkHref.substr(0, lnkHref.length - 1);
document.location.href = trimmedUrl;
}
});
})

JavaScript Issue on Table

I have a table of results from a database and then I have the following JavaScript that allows a user to click a table row, which will then take them to the correct record.
var pathName = window.location.pathname;
$('table tr').click(function(event) {
var modelId = $('section').attr('data-id');
var dataType = $(this).attr('data-type');
var id = $(this).attr('data-id');
if(pathName === '/accounts/' + modelId) {
if(dataType === 'contact') {
pathName = '/contacts';
} else if(dataType === 'note') {
pathName = '/notes';
} else if(dataType === 'opportunity') {
pathName = '/opportunities';
}
} else if(pathName === '/contacts/' + modelId) {
if(dataType === 'note') {
pathName = '/notes';
} else if(dataType === 'opportunity') {
pathName = '/opportunities';
}
} else if(pathName === '/events/' + modelId) {
pathName = '/delegates';
}
var showUrl = pathName + '/' + id;
if(id === undefined) {
event.preventDefault();
} else {
window.location = showUrl;
}
});
THat works great, except that in each table row, I have a form with a button to delete the record, which when clicked bring up a popup. Unfortunately, because now the table rows are clickable to take the user to the correct records, if they click the delete button it attempts to show the popup but then quickly redirects to the record show view.
I'm thinking this could possibly be fixed with CSS but I've tried position: relative; and z-indexing to no avail.
Can anyone point me in the right direction?
In the click event for the form button write this piece of code.
e.stopPropagation();
It will stop the event from bubbling to the parent.
Cancel the click event of the button in order to not propagate it to the table row.
You have to stop propagation on the click of the button:
element.click(function (e) { // 'element' would be your button/a/input
e.stopPropagation();
I've created a little fiddle to demonstrate how this works: http://jsfiddle.net/PVvfV/.

Jquery hashchange problems in firefox

I am having a problem with the hashchange event in Firefox. We are using the JQuery hashchange plugin provided by Ben Alman. The code is as follows.
$(window).hashchange(function (e) {
alert("Hello");
//we want to perform a post in here.
});
var temp = "#123";
if (temp !== "") {
if (window.location.hash == temp) {
$(window).hashchange();
}
else{
window.location.hash = temp;
}
}
else {
window.location.hash = "#Home/Home";
};
Now this works fine in IE9 and Chrome, however in Firefox, I see the alert, but as soon as I click OK, the page refreshes, displays the alert again, and continues infinitely. Is there some sort of weird behaviour that Firefox uses that I am unaware of? Or is there simply some other problem that is hidden deeper?
In some browsers window.location.hash includes the # and in some don't so its better if your ignore it while comparing the hash value in your code.
Try this.
$(window).hashchange(function (e) {
alert("Hello");
//we want to perform a post in here.
});
//Remove hash from here which will be compared with window.location.hash
var temp = "123";
if (temp !== "") {
//Replace # by empty nothing
if (window.location.hash.replace('#', '') == temp) {
$(window).hashchange();
}
else{
window.location.hash = '#' + temp;//Now add the hash here
}
}
else {
window.location.hash = "#Home/Home";
};
We located the problem as occuring in MicrosoftAjax.js and found the following solution:
Firefox 6 Infinite Page Refresh With Page With Hash Tags

If statement with url plus universal variable

I'm trying to transform a blog on blogger into a website. In order to have a static home page I am using the Javascript code below to see if the user is on the home page if they are then it will hide the post section and display a home page "gadget". Is anything supposed to match anything?
document.onload = hidepage();
function hidepage () {
if (window.location == "http://website.blogspot.com/" || window.location == "http://website.blogspot.com/?zx=" + ANYTHING) {
//Checks to see if user is on the home page
$(".hentry").hide(); //Hide posts
$(".hfeed").hide(); //Hide posts
}
else {
$("#HTML2").hide(); //hide gadget
}
$(".post-title").hide(); //Hide post titles
}
Based on what you're saying I think you want to change the if condition to:
if (window.location.href === "http://website.blogspot.com/" ||
window.location.href.indexOf("http://website.blogspot.com/?zx=") > -1)
You could also shorten this to:
if (window.location.href === "http://website.blogspot.com/" ||
window.location.href.indexOf("/?zx=") > -1)
Note that I've changed your == to === as the latter is a literal comparison.
Just use String.indexOf in the second half of the if expression.
var url = window.location.href;
if (url === "http://website.blogspot.com/" || url.indexOf("http://website.blogspot.com/?zx=") === 0) {
// do stuff
}

Categories