replace current url without reloading the page - javascript

I want to take the current URL from browser and replace the last number param by other number, my example URL:
app#!folder/1/document?p=1
the param to replace - ?p=1 into ?p=3
the param number is generated dynamically so I have to take the param from URL
I want to execute this JavaScript as String,
thanks a lot for any help

I reslove the problem(VAADIN FRAMEWROK) without using javascript
String url = Page.getCurrent().getUriFragment().toString();
url = url.replaceAll("\\?p=([0-9])?", "?p=1");
Page.getCurrent().setUriFragment(url, true);

Unless I'm missing something, just use String#replace() like so
url = url.replace("?p=1", "?p=3");

Note that a modification to the current URL will reload the page unless it happens in the hash part (after the # character), which is obviously what you're trying to do.
The current URL can be modified in javascript via the location.href variable:
location.href = location.href.replace("p=1", "p=3");

Related

Ok, I got my query string now how to remove it without page refreshing

I got my query string in document. ready but then I want to remove it and save value in a global variable without refreshing the page, but it just never happens..
var globalVar = null;
$(document).ready(function () {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
results == null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
if (results != null)
globalVar = results[1];
window.location.search = '';
});
This code keeps reloading page forever
Edit
Here is what is happening,
User gets email to a link, to select right row in table on the site, we are using querystring as using hash doesn't work (TMG server removes it), so once user gets on the site, we don't need query string anymore as we are using hash (because hash don't refresh page on change.)
Edit 2
Why don't want to keep query string and hash ?
because I can update hash without refresh whereas updating querystring refreshes the page :(, so i don't want it to be like
www.example.com/sites/fruitstore?fruitid=123#fruitid=432
You need to use the history api instead of just setting the location to something new.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
pushstate or replaceState will allow you to change the url displayed in the browser without a page refresh.
This script could also help you out: https://github.com/browserstate/history.js/
I think your "reloading" problem comes from this line:
window.location.search = ''
This SO answer will give you the good method to handle browser URL history:
you'll need the history API of modern browsers, to concrete, pushState will do it.
reference
and you'll probably want to use a library, as f.e. history.js, as handling different browsers can be very tricky...
Use the history API for this:
window.history.replaceState({}, document.title,
window.location.href.split('?')[0]);
replaceState replaces the current history entry with the given values. The first parameter is a data parameter, which is not used in this example. The second parameter is the window title. The final parameter is the new URL. The split takes everything before the beginning of the query parameters. If you need things that follow a #, then you'll have to use a more complicated URL re-building function.
replaceState does not add a new entry to history, which keeps you from filling the history with useless values.
See this answer for more information.
window.location.search = '';
This code keeps reloading page forever
Yeah, obviously. Instead, use
if (location.search != '')
location.search = '';
once user gets on the site, we don't need query string anymore as we are using hash (because hash don't refresh page on change.)
You also might want to try the history API, so that you always have a copy-and-pastable querystring URL in the location bar.

Getting full URL with jQuery including parameters after question mark?

I am trying to use jQuery to get the current full URL of a page. The URL of a page looks like this:
http://myurl.com/ebook?page=43
If I use window.location.pathname it only returns everything before the ? so I would just get
http://myurl.com/ebook
How can I get the entire URL?
You have:
window.location.href
and also:
document.URL
If you want to return the whole URL, you need to use window.location.href.
Using window.location.pathname only returns the path portion of the URL which excludes the query parameters and fragment (i.e., starting at the / following the host but only up to a ? or #).
Example:
> window.location.pathname
"/ebook"
> window.location.href
"http://example.com/ebook?page=43"
Also, see the documentation for window.location for more available properties.

Redirect URL paths included with Javascript

I have seen several questions about redirecting to a page via javascript, and that's great, but all of them just redirect to a base url. I want to include a variable path. So say for instance I have http://www.glas.com/my/url/path I want to use window.location.replace() to replace the glas part only, and change it to glass. I'm a beginner at JavaScript so any help would be much appreciated.
This is what I have tried so far:
var path = ''; // this is where I'm stuck
window.location.replace("http://www.glass.com/" + path);
Where the path variable would parse the current URL for anything after the /. I have tried looking at JavaScript's match and regexp, but it all seems very confusing.
Try
window.location = window.location.href.replace('glas', 'glass');
You would do something like:
window.location.href = window.location.href.replace('glas','glass');

Parse URL value and remove anything after the last '/'

My website URL is (example) http://mypage.com/en/?site=main. Then comes JavaScript code that, together with PHP, parses the data.
After that, I need some code that will change the URL inside the adress bar to http://mypage.com/en/, that is, removes the stuff after the last / (slash).
If possible, it is should be jQuery/JavaScript code.
I found something that will work.
You have to use a method called replaceState().
Mozilla developer reference
var str = window.location.href;
window.history.replaceState({}, '', str.substr(0,str.lastIndexOf("/"))+"/");
Use split() function in javascript.
Example :
var url = "http://mypage.com/en/?site=main";
alert(url.split('?')[0]);

jquery/javascript - parsing url to see if you're on a certain page

So say you have some navigation, and you don't/can't use server side code to choose which link is "current". How can you use the first part of the url (as in after the first slash but before any next slash) i.e. (example.com/dashboard/view/16) would return dashboard. Of course there's not always a second slash, it could be (example.com/dashboard). Also before a hash mark i.e. (example.com/dashboard#users) would return dashboard.
Is the best choice to just use location.href and try to write some functions to parse it? Or is there something already made/simpler?
You should be able to do something like this:
var page = window.location.pathname.split('/')[1];
alert(page);​
Could the pathname property of the location be of interest?
From w3schools
hash Returns the anchor portion of a URL
host Returns the hostname and port of a URL
hostname Returns the hostname of a URL
href Returns the entire URL
pathname Returns the path name of a URL
port Returns the port number the server uses for a URL
protocol Returns the protocol of a URL
search Returns the query portion of a URL
It's easy enough to parse it yourself.
window.location.pathname.slice(1).split('/')[0]
is what you are looking for.
$("a[pathname="+location.pathname+"]")
That jQuery collection will contain all of the links that link to the current page. You could narrow it down to certain elements with a more specific selector and then apply a style to it.
For example:
$("#navigation a[pathname="+location.pathname+"]").css('color', 'red');

Categories

Resources