why pushState() does not work for clean URLs? - javascript

I have two kind of URL:
arguments URL like www.example.com/page.php?test=argument
parameters URL (clean URLs) like www.example.com/classname/methodname/arg1/arg2
Now I need to use of pushState(); for replacing a new URL. For arguments URL it works as well, But the problem is for parameters URL.
Here is my code:
var db = 'database';
var word = 'hello';
window.history.pushState("object", "title", "page.php?s="+db+"&q="+word);
output for arguments URL: (this is fine)
www.example.com/page.php?test=argument // Current URL
www.example.com/page.php?s=database&q=hello // New URL
output for parameters URL:
www.example.com/classname/methodname/arg1/arg2 //Current URL
www.example.com/classname/methodname/arg1/page.php?s=database&q=hello // New URL
While I want this: (for both arguments and parameters URL)
www.example.com/page.php?s=database&q=hello
How can I fix it for parameters URL ? In other word, Is it possible to I remove all parameters before pushing ? (removing current parameters before appending)

I assume that pushState is honoring the cwd (current working directory). try prepending a leading slash /, so:
window.history.pushState("object", "title", "/page.php?s="+db+"&q="+word);

Related

What is the proper URL syntax to define a location object and a URL parameter?

I've seen many examples of one or the other, but none with this specific set up. I have a location object currently in my URL that opens a form via jquery:
http://blah.com/contact.cfm?show_sales
$(document).ready(function(){
if (window.location.search == "?show_sales") {
$('#sales_form').show();
};
I would also like a parameter to be in the URL:
http://blah.com/contact.cfm?item=4445555
I've tried combinations of the two, but I don't know the proper syntax to include both. Everything I've tried won't activate the jquery.
So, what's the proper syntax for this URL?
http://blah.com/contact.cfm?show_sales&item=4445555
(this is an example of one that does not work)
The format of URL is right. You should make some changes in the code:
$(document).ready(function(){
if (window.location.search.indexOf("?show_sales")!=-1) {
$('#sales_form').show();
};
window.location.search will return show_sales&item=4445555
You can use split:
var url = "http://blah.com/contact.cfm?show_sales&item=4445555";
var query = url.split("?")[1];
var params = query.split("&");
console.log(params);
// params[0] = "show_sales"
// params[1] = "item=444555" and you can split again

How to Perform Javascript redirect url with by Preserving URL parameter

How to Perform Javascript redirect url with by Preserving URL parameter of orignal URL?
eg
original url: http://test.com?a=1&b=2
Redirect to: http://sample.com?a=1&b=2
The following will get the current URL querystring:
var query = window.location.search;
That can then be used in the redirect:
window.location.replace('sample.com' + query);
DOCS
Update
The .replace() method will remove the current URL from the browser history. If you want to retain the current URL use .assign() as mentioned by #igor
Modify the location object:
location.href = location.href.replace ( new RegExp("^" + "http://test.com"), "http://sample.com/" );
The statement replaces the start of the url from which the current document has been loaded. The resource from the new url will be loaded automatically.
Your sample urls do not contain path and fragment portions ( like in http://test.com/the/path/compon.ent?a=1&b=2#a_fragment). They are accessible as
location.pathname // 'http://test.com/the/path/compon.ent'
location.hash // '#a_fragment'
Note that the occurrence of these url components suggest to expressly compose the new url the way #MattSizzle outlines in his answer.

Parameter of an URL within another URL

This is a simple to understand question, I will explain step by step as to make everything clear.
I am using the Google Feed API to load an RSS file into my JavaScript application.
I have a setting to bypass the Google cache, if needed, and I do this by appending a random number at the end of the RSS file link that I send to the Google Feed API.
For example, let's say this is a link to an RSS:
http://example.com/feed.xml
To bypass the cache, I append a random number at the end as a parameter:
http://example.com/feed.xml?0.12345
The whole url to the Google Feed API would look like this, where "q" is the above link:
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://example.com/feed.xml?0.12345
This bypasses the cache and works well in most cases but there is a problem when the RSS link that I want to use already has parameters. For example, like this:
http://example.com/feed?type=rss
Appending the number at the end like before would give an error and the RSS file would not be returned:
http://example.com/feed?type=rss?0.12345 // ERROR
I have tried using "&" to attach the random number, as so:
http://example.com/feed?type=rss&0.12345
This no longer gives an error and the RSS file is correctly returned. But if I use the above in the Google Feed API url, it no longer bypasses the cache:
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://example.com/feed.xml&0.1234
This is because "0.1234" is considered a parameter of the whole url and not a parameter of the "q" url. Therefore "q" remains only as "http://example.com/feed.xml", it is not unique so the cached version is loaded.
Is there a way to make the number parameter be a part of the "q" url and not a part of the whole url?
You need to use encodeURIComponent like this:
var url = 'http://example.com/feed.xml&0.1234';
document.getElementById('results').innerHTML = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=' + encodeURIComponent(url);
<pre id="results"></pre>
You are escaping the special characters that would have been treated as part of the url otherwise.
To append or create a queryString:
var url = 'http://example.com/feed.xml';
var randomParameter = '0.1234';
var queryString = url.indexOf('?') > - 1;
if(queryString){
url = url + '&' + randomParameter;
} else {
url = url + '?' + randomParameter;
}
//url needs to be escaped with encodeURIComponent;
You need to use encodeURIComponent to do this.
encodeURIComponent('http://example.com/feed.xml&0.1234')
will result in
http%3A%2F%2Fexample.com%2Ffeed.xml%260.1234
and when appended to the end result you'll get
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http%3A%2F%2Fexample.com%2Ffeed.xml%260.1234

location.href is decoding the URL

I have a javascript function:
function QuoteBeGone(url)
{
location.href = url;
}
The URL that is passed is encoded, for example http://www.target.com/page.asp?name%3DJohn%27s%2BProject, but when the new page loads, the URL is unencoded - http://www.target.com/page.asp?name=John's+Project.
The apostrophe is messing up the page, so I would like to keep it encoded in the URL, but it doesn't seem to stay that way. I assume the location.href function is interpreting the URL before passing it along.
Any suggestions?
In the place where you are creating the URL that you are passing to the function use encodeURIComponent() on the value for name
e.g.
var john = "John's Project";
QuoteBeGone('http://www.target.com/page.asp?name='+encodeURIComponent(john));
If you want it to still be encoded after a decode due to navigating to that URL, then you have to double encode:
QuoteBeGone('http://www.target.com/page.asp?name='+encodeURIComponent(encodeURIComponent(john)));

JQuery encodeURIComponent page not found error

I'm trying to encode my uri by using encodeURIComponent function. Here is my code.
//res[0].CLIENT_ID=10 and id=res[0].CLIENT_ID
var url = "new_quotation.php?clientid="+res[0].CLIENT_ID+"&quoteid="+id;
var encodedurl = encodeURIComponent(url);
$('#edit').attr("href", encodedurl);
It successfully encodes the uri, but when the page redirects it shows error as
The requested URL /Quotation/new_quotation.php?clientid=10&quoteid=0000000014 was not found on this server.
I saw the url. It seems like
http://localhost/Quotation/new_quotation.php%3Fclientid%3D10%26quoteid%3D0000000014
So, the uri is encoded but why not the page is redirected? Do I need to use any other function to redirect? Or is there any error in my code?
You should only be encoding the values, not the entire url.
var url = "new_quotation.php?clientid="+encodeURIComponent(res[0].CLIENT_ID)+"&quoteid="+encodeURIComponent(id);
$('#edit').attr("href", url);
Since you are using jQuery, you can also use param()
Each and every parameter in the URL must be applied encodeURIComponent (if the parameter consists of special characters)
Example :
var enc =param1+'/'+encodeURIComponent(param2)+'/'+encodeURIComponent(param3);
param2, param3 - here are expected to have special chars

Categories

Resources