How should I use history.js - javascript

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/

Related

How do I add this API to my Javascript program?

How do I add this API: http://developer.simsimi.com/api to my javascript script? I have the trial key, but I don't know how to add it in. Basically, when someone types '#Bot ' the script should reply back to the '' using the API. I just need to know how to incorporate the API into my script, I've searched up tutorials but I still don't understand how to do it.
You just need to call the api using HTTP GET Methods, look the URL they provided for trial version:
http://sandbox.api.simsimi.com/request.p?key=your_trial_key&lc=en&ft=1.0&text=hi
So you need to replace your_trial_key with your trial key you have, text with the key you want to use and then use HTTP GET in javascript to fetch the result and then show it on your page.
You can use is it in any library like React, Angular or jQuery for example, for get method in jQuery visit the link below:
https://www.w3schools.com/jquery/ajax_get.asp

javascript ajax post/get from one html-javascript to another

I am developing my first website. At this time i am generating a new html design that would be a ticket.
From my main page, i will load this html when the user clicks the "See ticket" button. This html has a table which is filled on document.ready with javascript. The data used is a JSON created in the main page.
I coded a working solution using localStorage. The problem is that the next step is to convert that HTML website to PDF and the software i am using does not work properly with localStorage, so i need to pass the JSON from main page to the ticket page. I can't neither use URL encoding cause string could be sometimes longer than 2000 characters and it is not productive.
So i thought that maybe i could do and $.get call from the ticket.html to index.html and get the needed JSON. Is this approach correct, or is there any better solution?
Regards
As suggested earlier comments, you need to use serverside code to accept post params and you need to do a ajax post to send the data. This is very good approach. I have one more idea for implementing this.
Let say you open ticket.html in a window.open. And have a JS function ( say GetValue) in index.html, that returns JSON . So you need to get JSON in ticket.html.
You need to define a JS function in ticket.html , using windown.opener.GetValue() , you can get JSON value.
Hope, i am in same direction, which you need. If not, please clarify.
Other way, would be use iFrame and use message communication to pass large data between them, you are interested in this, please read this - https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Durandal: pass parameter to view request url

I know this question might trigger some reactions of the type "View-model separation is good". So please be aware that I am aware of that :).
So, when activating a route, Durandal obtains a view by doing a very simple get request, just using something like "view.html" in the get url.
Question: is it supported to add a parameter to the url? So as to have: "view.html?id=4".
I know it's not the point but I want to do it anyway. Why? Because currently, an important part of the js code happens in the viewAttached method. I am using a js library for adding stuff to the page, that needs access to the dom. So when reaching the page, one can see modifications taking place, and it's not nice to see the page changing like that. So I'd prefer that stuff to happen on the server, using a .Net control.
Thanks,
Nicolas
I think that you can find all the information that you need in this other question: Pass data in DurandalJS to other view

History.js and url encoding

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

How to pass information from a query string to a page tab app in Facebook using just Javascript/jQuery

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.

Categories