You may have seen app.asana.com.
If not you should check it out, it is a very nice designed webapp.
But I can't figure out how they handle the whole URL management.
Backbone.js or Knockout.js handles the URL with the #, and everything after that is just generated.
But asana doesn't have a hash and can modify the URL, how are they doing this?
Looks like they're using HTML5 history.pushState(); so they don't have to refresh the page and so they don't have to use # (hashes) in the URL to go to a certain part in a web app.
Here's a good tutorial about history.pushState();: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
This is the what Google+ and Facebook uses to change the URL without refreshing.
I hope this helps.
HTML5 Push State: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page
The big benefit here is that if you paste an Asana URL directly into the browser (or click on a link from an email), the server sees the full URL and can immediately send the appropriate task data to the client. We used to use url fragments, but we needed to do a second round trip after the application loaded to read the fragment in JavaScript and pass it to the server.
Related
I'm not supporting clients that can't run JavaScript.
I want my URL paths to look like /settings, not /#settings, i.e., no hash or fragment identifiers.
I understand how to intercept a click event with JavaScript.
But, what should the server do? Should the server just reply to every page, e.g., /, /settings, /profile, etc., with the same exact HTML file?
Then, after the page loads, the JavaScript will decide which parts of the HTML to display based on the location's path?
You need to use pushState. Here's a link to MDN on how to do it.
https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method
I have a facebook app that requiers authorization, therefore I have to pass a redirect url along with the authentification-request.
My app is entierly front-end code.
If I wan't the standalone-version, I can just pass the window.location.href
Something like this won't work for the app-page, because it's iframes from different servers. Therefore I have to hardcode the app-url in this case.
The app is intended to be embedded on different app-pages, so I can't hardcode that. Apperntly I can get the facebook page-tab-link etc using the facebook api. Haven't looked in to the details yet though. Redirect back to page tab after user authenticates?
As facebook doesn't allow parameters, my plan is to add /pagetab/ or /app/ to the end of my url, and add that to the various urls in the settings of facebook. After that I will create different cases for the different url-endings.
Although this soultion sounds like a lot of work. Is there a better way to do this?
If your app wasn’t totally client-side, then you could find the info which page your app is embedded on in the signed_request parameter. But since Facebook POSTs that to the iframe on calling your app, there is no way of accessing it client-side.
As facebook doesn't allow parameters
Facebook allows for a parameter called app_data in the URL, which is passed on to your app. But again, this happens via POST on first page load.
If you were willing (and able to, regarding your platform) to make the little adjustment of having your apps HTML code generated by a server-side language (instead of it being purely static HTML pages), then you could easily evaluate the signed_request parameter, and have the page id written into a JavaScript variable, so that you can use it client-side from there.
Consider I have a URL, now I want to have some information associated with the URL on my page same way as Facebook or other websites such as LinkedIn do. You submit a URL and the data about the website is retrieved to be submitted. I am using JQuery and HTML for an application and want to know how to do this thing. My application has few URL's retrieved from the different sources. I want to show some of the information instead of plane URL's. How is it possible to make such a thing using JQuery?
You cannot access external URL's directly by AJAX calls because of the Same Origin Policy. What you'll have to do is to submit a request to your own server, and have some serverside code request the external URL and retreive information.
How that is best achieved depends on what serverside setup you're running.
.NET example
PHP example
(basically just google "Screen scraping" + your language of choice)
You need to process the whole page to search for images or useful information.
Looking at turning my ASP MVC app into pure JS/Html however its not just a 1 page app, it has a couple of pages, but each one has alot of ajax and events.
Anyway currently my urls on ASP MVC are like:
/login
/admin/{action}/{adminId}
/posts/{posterId}
/picture/{pictureId}
So that is all nice and simple and easy to see what you are doing in the url, you also get correct back button behaviour. So trying to adopt this sort of thing to a pure JS/Html approach seems to bit either very tough or impossible. I dont need an exact match but I was hoping to do something like:
http://localhost/myapp/posts/10
Then that would somehow be able to route the actual request to http://localhost/myapp/posts.html with the variable exposed. Now I am pretty sure this is impossible as when the above is entered into the browser it is going to attempt to look in a directory called posts and look for 10, which wont exist.
Now I have seen Crossroads and LeviRoutes and a few other similar technologies, however they seem to rely upon the hashbang method, which some people like others hate. Is there any way around this? If not can anyone point to any good tutorials on how to use these frameworks, as each seems fairly light on documentation.
There's no workaround for not using hash. HTML5 History API isn't available on IE and Opera yet. If your application is targeting very specific platform, then you can use History API instead of hash. However, History API is inconsistent across browsers. You can read it here: http://www.battlehorse.net/page/2011/02/12/html5history.htm
If you choose to use History API, it would be easy. You can use whatever routing strategy you want in ASP.NET MVC, then just match this strategy in JavaScript. You can read more about History API here: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you choose to use hash, you need to do make some requests into AJAX requests:
Determine if a request is done via AJAX:
if GET/posts/{action}/{id} is by AJAX, serve the original content
if it's not by AJAX, redirect the user to /#!/posts/{action}/{id}.
Handle client side hash by requesting for the right content:
When the hash is changed to #!/posts/{action}/{id}, GET /posts/{action}/{id} via AJAX and replace the content with the new one from the server.
Intercept form.onsubmit event:
Whenever a form is trying to submit to /posts/{action}/{id}, cancel it and use AJAX to post and then replace the content with the new one from the server.
Now your app should work like a one page app.
There is no real way around hashbangs if you wish to keep it clientside and cross browser compatible.
I have a client request on one of my projects where they want to be able to enter a url and have it pull in some information form the site who's url they entered and save it in the database.
So the user enters: http://www.example.com/2342342 and my controller visits that site, and gets the content of the first <h1>Tag</h1> on the site and saves this in the database. Is this possible? If so, how would I go about doing it? Would I use some rails commands to do it, or something else, like jQuery?
Nokogiri is a great parser and can work directly with an url.
So two steps there:
Instantiate a Nokogiri object with the url as param
Parse the html page to get what you expect
Find instructions here: http://nokogiri.org/tutorials/parsing_an_html_xml_document.html
Because you'll work with another website, keep in mind two advice:
wrap your queries so that you can rescue if the website is down
consider using ajax request because it could be long
I would checkout the Railscast here:
http://railscasts.com/episodes/190-screen-scraping-with-nokogiri
It's explained very well on how to use Nokogiri and scrape content from other sites.