HTML/jQuery change only part of the URL on refresh - javascript

I have a button in jQuery that redirects the page like this...
$('#changeLang').click(function() {
document.location.href='/' + $('#languages').val();
})
which works fine, but it redirects to the /foo when someone clicks it, if someone is on a deeper URL...
/foo/bar/foobar
I want it to only change the 'foo' part, so that on a click it will do this...
/$('#languages').val()/bar/foobar

You could use window.location.pathname and it will give you everything after the domain, split it into an array, change what you need to and glue it back together with a join.
$('#changeLang').click(function() {
var url = window.location.pathname.split('/');
url[1] = $('#languages').val();
document.location.href = url.join('/');
});
https://jsbin.com/huqijezoxu/edit?html,js,output

Related

window.location.href.replace does not replace the content of the url

I would like to redirect my current page to a page with similar URL except for one parameter.
Here is what I have tried
window.location = window.location.href.replace("trip-start="+/^\d{4}\-\d{2}\-\d{2}$/g, "trip-start="+this.value);
and also:
window.location.search = window.location.search.replace("trip-start="+/^\d{4}\-\d{2}\-\d{2}$/g, "trip-start="+this.value);
Unfortunately, the page is "redirected" (i.e refreshed) but the url stays exactly the same.
Am I missing something ?
Thanks you
[EDIT]
I investigated a bit, and actually the problem amount to this
let text = window.location.href;
let result = text.replace("trip-start="+/^\d{4}\-\d{2}\-\d{2}$/g, "trip-start=2000-00-00");
alert(result);
the "result" is supposed to be the URL with the parameter "trip-start" set to 2000-00-00, but again, nothing changes.
Please use history API
history.replace(newUrl)

How do i make document.location.href behave like a simple link?

I have a select item with bunch of cities on my website. When the visitor selects some city this happens:
$("#city-selector").change(function() {
var url = $(this).val(); // get selected value
if (url) { // require a URL
document.location.href = url; // redirect
}
});
Each option inside the select has a value parameter that contains subdomain url in it.
The problem is document.location.href doesn't behave like a simple link. It clears visitor id and it looks like the visitor doesn't have a referer and came to the new subdomain out of nowhere. Is there a problem with functions I use or should I dig into crossdomain sessions/cookies? How do I make it behave properly?
Use window.location.href. This is similar when clicking a link
window.location.href = url;

Change current URL then load

I want jquery to find and change the current URL you are visiting and load the new one. Lets say jquery is supposed to change the current "index.html" to "indexalt.html" on click and then load it. My idea is to use document.URL to get the current URL then slice off ".html" at the end and add for example "alt.html" to string. I'm very new to jquery and don't get it to work. There will be a lot of mistakes within my script probably:
$("#contact").on('click', function() {
var url=document.URL(str.slice(-7));
.load("url +"alt.html"");
I would really appreciate if anyone can tell me how to do it and how to write it down correctly in a whole. Thanks!
location.href returns the URL of the page. So, you can do this instead.
$("#contact").on("click", function() {
// Slicing 5 characters from the URL.
const url = location.href.slice(0, -5)
// Simply load the URL
location.href = url + "alt.html"
})

Changing pages with a single link but keeping the hash part

there is 2 pages, 1 is ENG.html another 1 is GER.html., and there is some tabs in those 2 pages, their link is: eng.html#work eng.html#about eng.html#home
when click on change language link i need to stay on #work or #home wherever i was, how to do it? please don't post php, html and javascript and others are acceptable, and i don't want to create 2 separate (ENG, GER) folder, any suggestions?
Try this:
// set the url we're going to
var url = "GER.html", // for example
// get the hashtag text
hash = window.location.hash,
// make the new url
loc = url + hash;
// finally, go there
window.location.href = loc;

How can I modify this javascript to ignore any data within a query string?

Essentially, I have this website, the content of which changes depending on what the user inputs into the query string.
When the user enters mysite.com/?1 it loads content for 1 and /?2 for 2
My problem is that I have a Facebook like button within my page, and to make it work I have written this js code:
<script type="text/javascript">
var sUrl = window.location;
document.getElementById('fbcom').setAttribute('href', sUrl);
</script>
this gets the url and allows the user to like different content from what is technically one file.
My problem is that when a user likes for example /?1 on facebook, if someone where to click this link on their newsfeed and decide that they like it too, technically they will be liking the page /?1-with all the additional facebook code on the end of the url, so heading back to /?1 the like has not registered.
How can I modify the above code to ignore any facebook rubbish on the end of the url when they are directed from facebook?
Important: the ID /?1 can be anything from a 1 digit to a 4 digit number e.g /?1234
My current JS ability is very poor. Thanks
You can combine the properties of location you actually want to keep -- which seems to be protocol, host, and pathname:
var sLoc = window.location;
var sUrl = sLoc.protocol + '//' + sLoc.host + sLoc.pathname;
You can also just use the pathname as relative-from-root:
var sUrl = window.location.pathname;
you can do that with regex:
var sUrl = window.location.toString().replace(/^(.*?)(\?.*)?$/, '$1');

Categories