location.href is decoding the URL - javascript

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)));

Related

Encoding json data for a mailto link

How do I properly encode a mailto link with JSON data in the query parameters so that the link works as expected when some of the JSON data possibly includes spaces?
Here is a simple example:
var data = {
"Test": "Property with spaces"
};
var mailTo = 'mailto:?body=http://www.google.com/?body=' + JSON.stringify(data);
document.getElementById("link").href = mailTo;
The resulting link in the email after clicking the link looks like this:
Here is a JSBin showing what I am talking about:
https://jsbin.com/vuweyemeji/1/edit?html,js,output
Edit: Adding encodeURI() or encodeURIComponent() doesn't seem to work for me. I tried adding either of those methods around the data object and when I click the mailto link the url still looks the same in outlook.
You need to use encodeURIComponent twice, because you are encoding a parameter inside another parameter.
Your link is using the mailto protocol and using a body parameter which content should be encoded. But, inside that content you are entering a URL which has parameters, so, this parameters should be encoded also.
Try this:
var data = {"Test": "Property with spaces"};
var mailTo = 'mailto:?body=' + encodeURIComponent('http://www.google.com/?body=' + encodeURIComponent(JSON.stringify(data)));
document.getElementById("link").href = mailTo;
<a id='link'>anchor</a>

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

why pushState() does not work for clean URLs?

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);

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

Passing "#" hash symbol in request parameter of url not working in Firefox

I am hitting a struts action using AJAX, everything is fine but there is problem with Firefox , when i am passing the parameter in URL as a request parameter and if that parameter, contains hash(#) symbol in the end, then firefox strips everything after that symbol and send that parameter to action without it.
For example, if im passing test123#abcd in Firefox, then i am getting only test123 in action class as opposed to test123#abcd which is undesirable for my requirement.For IE it is working perfectly.Is there any way by which i can extract the full parameter including the # symbol in Firefox.
please let me know if i need to post the java action code also,thanks.
JS snippet
var valuePassword=test123#abcd;
var url = "/test/ChangePwdAjax.do?newPass="+valuePassword;
var xmlHTTP = getXMLHTTPRequest();
Use
var url = "/test/ChangePwdAjax.do?newPass="+ encodeURIComponent(valuePassword);
This will encode your valuePassword to a valid URL component which can be passed as a query string in URLs
And on the other side you should use decodeURIComponent to get the value from encoded string
var value = decodeURIComponent(valuePasswordPassed);
To know more about this Go here
When you change data you have to do a http POST request. Not a GET request. This will automatically solve your problem without having to encode your password.
xmlhttp.open("POST", "/test/ChangePwdAjax.do", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("newPass=" + valuePassword);
Surely worth mentioning that passing a password as a URL parameter is a terrible idea. A passer-by can see your new password in your browser's address bar. And anyone in the future can find the password in your browsing history.
-mobailey

Categories

Resources