I have the below example of a URI that I am requesting on my local site in Firefox v15.0.1, I have removed the hostname for brevity.
/search?cat=ngb%26b
and some paging links are shown on the resulting page with href's like this
?p=2&cat=ngb%26b
that do the below history request on their click event which is using https://github.com/browserstate/History.js/ which uses HTML5 History for it's state changes from what I know of it.
History.getState().url;
the url History.getState().url is giving me the below, this is passed to an async function on the click event:
/search?cat=ngb&b&p=2
and the history is then adjusting the browsers URI to this
/search?cat=ngb&b=undefined&p=2
and my Async action is failing because the "cat" param is now incorrect.
I can't URL encode the entire result from getState().url because that would be incorrect.
Is there something I am missing that needs to be done when facing this sort of situation?
Any help would be appreciated. Thanks.
UPDATE:
I am currently debugging this and looking at the object that the getState() function returns.. it has a "data" object property that has the correctly encoded params in it.
Potentially I could spin through and then add them on to the URL i pass to my function that makes an ajax request (instead of passing it the .url property) but this doesn't sound like a good idea when History is meant to handle hash url fallback for HTML4.
Answering my own question here.
I had two issues here, 1 with History.js and another with using JQuery.param in an incorrect situation because that encodes anything you give it to make it valid for URL use.
To fix some issues with the History.js plugin I found this useful branch
https://github.com/hrunting/history.js/tree/encoded-uris
which is still an open pull request but it helped me out a lot
unfortunately it does require having to re-bundle the changed files and minify them if you need to.
Once that was changed I also had an issue in the code with using $.param() to add the values in a state object that had been built up based on the values in the querystring. Obviously the "ng%26b" value was already encoded and param was encoding the % so it ends up as "ng%2526".
Hope this might help someone in the future anyway.
Thanks
Related
I'm currently working on a PHP 5.3 based CMS. A lot of actions are called using GET Parameters.
Example:
index.php?action=create_module
adds a certain module to the database and displays the module structure again. There are also functions (triggered by simple links, no POST request) for removing and ordering modules, working the same way with GET parameters.
Problem with this: If the users clicks on History Back after two actions on that page, the whole action is triggered again, which I would like to avoid.
How can I solve this issue? Searched the internet already, but with no satisfying results.
Is there a jQuery function which can remove this ?action parameter when using the browser Back button?
If not, can I prevent the browser from going back?
Is there a way to trigger this "Page has expired" notice?
Different approach on the PHP side?
Note: Header("Location:..") is no option, and I would like to avoid AJAX here.
Thank you for your help!
You could add an event listener on 'onpopstate' to clean window.location.search which holds the parameters, see http://html5doctor.com/history-api/ to get more info about HistoryAPI.
I am a beginner to JS. and I am learning how to use HTML history API to chnage the URL.
Act , I want to append query string parameters to the URL after Ajax call is made.
Which files do I need to include in my code, is it just history.js? I dont know how to use this API(not asking about the coding part of that).
an dafter wiriting the pushstate method, do I need to give popstate also?
Basically , if I have used Pushstate to append query String parameters to URL, DO I always nee dto give popstate()?
Thanks iin advance
Try reading this, it explains everything you need
http://html5doctor.com/history-api/
I've seen that a lot and I just don't know what it means. This, for example:
<script src="http://server.com/file.js?y=2345678" type="text/javascript"></script>
If it is in deed possible to 'catch' the value of 'y' in the javascript file, how would that be?
Thank you.
PS. I know what mod_rewrite is and that is not the answer, just in case :)
This is to force the browser not to cache the file, by making it believe that it is a dynamic file with get parameter rather than a static one.
This is often used to facilitate caching of the JS file. You set a far-future Expires header which means the browser may cache it for a very long time. If you change something in the file you also update the number in the querystring, which will make the browser refetch the file. This works because caching is for unique filenames and the querystring is part of the filename (as far as the browser is concerned).
A similar approach to this is to use rewrite rules in the web server to have some part of the file name which it doesnät care about. Here's a Nginx rule to show what I mean:
rewrite ^/style\..*\.css$ /style.css;
I use this rule to have filenames like style.42750cad6.css, which always points to the file style.css. The text in the middle is changed whenever I change style.css. The difference between the first approach is that this does not use the querystring so the caching will work in more browsers.
ok the way i see it in two ways.
it can be used to load js without caching
for every request to the server, the server might log information(if logging is enabled), if i am using it for analytics i can therefore use a different parameter for locations and from the log i can analyse and get required details.
I am trying to pass a single piece of information (using a query string) to my Facebook page tab application.
For example, if the user clicks on this URL:
-http://apps.facebook.com/myappname/?app_data=mydata
I would want to be able to access 'mydata' in the app.
From the reading I've done, Facebook does not allow GET requests, but it's possible to do this using app_data and signed_request.
However, I have not been able to find any information on how to set this up using the javascript SDK (is that even possible?) and .NET (ideally, I would be able to implement this with just JavaScript). I have no idea how to set up and read data using a signed_request, and the documentation around signed_requests is confusing me more than helping. I would really like simple instructions on how to implement this feature.
EDIT:
I think I've almost figured it out. In case anyone else is looking for an answer to this, I put what I did so far below. Also, if you see any room for improvement please let me know. I don't claim this is perfect by any means, but it works.
First, the url needs to be the page tab url, not the direct url to the app (like I posted above):
-http://www.facebook.com/pages/PageName/########?sk=app_#########&app_data=mydata
Here is the javascript code that is working for me:
//get value of signed request and split it
var signedRequest = $('#mainContent_hfSigned').val().split(".");
//decode json (this does not work on ie - needs to be replaced)
var decodedJson = window.atob(signedRequest[1]);
//parse json to gain access to parameters
var jsonParams = jQuery.parseJSON(decodedJson);
//append the app_data varible to ensure it's being read properly
$('.message').append('Your app_data param is "' + jsonParams.app_data + '"')
On jsfiddle:
http://jsfiddle.net/C3xsm/1/
One thing I know I still need to do is replace atob with a base64url decoder for javascript. I'm thinking about using this one:
http://code.google.com/p/stringencoders/source/browse/trunk/javascript/base64.js
If it works well, I'll update it here. Or if anyone knows of something that works better, please let me know.
ideally, I would be able to implement this with just JavaScript
That’s not possible, because as you already found out the signed_request parameter is POSTed to your page, and JavaScript has no access to POST parameters itself.
The documentation on the signed_request parameter has instructions on how to parse/decode it server-side; the example is in PHP, but it should be easy to transfer the basic algorithm (if you can call it that) to your .NET environment.
If you have a link or script tag, say to a css or js document, and you have something like ?1 in the url, what is that? Example:
<script src="home.js?1" type="text/javascript"></script>
Just a basic question...
This is for caching purposes. For example, the next time that script gets updated the developer can add a ?2 at the end and the browser will fetch the new version not the cached.
It denotes the beginning of the Query String, used to pass values around, or commonly just to create a randomized portion of the URL to avoid cached results.
In your example, the user is likely tacking on a new value to constantly create a unique URL that ultimately goes to the same place, and requests the same thing.
The part after the question mark is called the query string.
The query string is ignored when the server maps the request to a file on disk, but it can be used by server-side scripts.
In this case, the query string is being used to avoid caching.
When the script is changed, the query string can be changed to ?2 and it will not use the previous version from the cache.
It just keeps it from caching. Normally the browser caches those files, so adding a ? plus a random number will make the browser see it as a different url, thus reloading the file. Its not really necessary since most browsers will reload cached files with Ctrl+R.
What follows the ? is the query string. It is used to pass parameters to the src file and sometimes to prevent caching by adding a random number to the file string to force the browser to fetch from the server.
The '?' separates the resource identifier from the query parameters of the URL. I'm not sure if I'm naming them correctly. Often a CMS will add ?1 to the URL for a CSS or other page to avoid browser cacheing for the elements. Each time you edit the CSS, the number will get bumped to the next value so the browser is sure to reload the CSS or script or whatever.
? separates the URL from the parameters. Parameters would follow the ?. After the ? you should use & separate multiple parmaeters. e.g. www.google.com?q=URL&language=en