I have a single page application with several controllers and actions in each controller all of which return a json result if the page is accessed from a mobile device.
Backbone than loads the correct view according the specified url and parses the json. Using underscore.js than I am compiling the template and finally showing it inside a div.
This works fines until I refresh the browser. On refresh the action from the REST application is sending the JSON back to the browser but obviously without loading any templates.
Is there a workaround to this problem for example I have tried Redirecting to the index page with a hash behind it ("Index#MyPage").
In this case backbone loads the Index page than recognizes that it needs to go the "MyPage" route and load it's Json (and it does), but the template is still not being loaded.
Related
I'm moving a Rails app which loads new views through URLs to a completely AJAX version. The way we're doing this is that loading all views through AJAX and changing the URL through HTML5 History API. We also want to use HTTP caching throughout so that we can cache each partial.
But now we're stuck on one issue. There are now essentially two ways to load each page - through the URL or by clicking on something which loads that partial via AJAX. But this has lead us to create two different views and controllers for essentially loading the same thing - one directly from URL and one by clicking in the main page and loading via AJAX and history API. So how do we ensure that the same view loads from the browser cache when loading directly via URL and with AJAX?
To give an example, GitHub uses in their tree slider. You can access code directly by browsing to it in the window or directly using the URL path for it. I'm sure if the page has been loaded before, they get parts of it from the browser cache.
Is there a way to send requests to the same URL but just render a partial or load the whole page depending on whether the request is sent by clicking on the tab or entered in the address bar? It should use cached partials if they are already there in the browser.
Thanks
If I got it right you want to have different behaviours for the same action, one if the request is get and other one with an ajax request.
You can do it doing this:
mypage_controller.rb
def my_page
...(your logic here)
respond_to do |format|
format.js
format.html
end
end
my_page.js.erb
alert('testing');
.... (further ajax code here)
Here is an article that does this behaviour Rails 4: How to partials & AJAX, dead easy
This way you can have the same action responding for ajax and get request
I'm having a problem with how jQuery mobile works with RESTful actions in Rails.
For this explaination, let's assume I have a resource called Planet and a PlanetsController and I'm attempting to create a new Planet by sending a post request from /planets/new to /planets. If this action succeeds, my URL is now /planets even though it's actually showing /planets/1. If the action failed, my URL is also now /planets/ instead of /planets/new.
In both of these cases, if I click the Back button to go back to the index action, it won't work because jQuery Mobile thinks I'm already on /planets. I have to reload the page in order to get back.
Is there a way to fix this so normal Rails RESTful actions can be used?
I had the same issue as well, I just added data-ajax = "false" to my form with the downside of having no transitions. Or you can follow another solution I found here: http://www.adobe.com/devnet/html5/articles/jquery-mobile-and-rails.html#articlecontentAdobe_numberedheader_1
I'm having problems with JQM beta1 (the same thing happens with beta2) and ASP.NET MVC 3.
I have several pages with forms, and they post to the same address of the page, then with MVC RedirectToAction the next page is called.
Initially I had problems with the back button, which I solved by adding the attribute data-url to the page div.
But now I have this page that has a server-side validation, so posting back a page with the same data-url, when the server-side validation keeps the user on the same page, and then user hits the back button, the url on the browser is changed correctly but the page is not rendered again, it seems to remain the same, then if I hit the back button again I can see the correct page (2 steps behind page).
This should not be so problematic, since there should be many sites using forms with validation and needing the back button working properly.
Is there any special attribute that needs to be set on the page div when the post stays on the same page?
Thanks!
How would you achieve this route in rails 3 and the last stable version 2.3.9 or soish?
Explained
I don't really care about the followers action. What I'm really after is how to create '!#' in the routing.
Also, What's the point of this. Is it syntax or semantics?
Rails doesnt directly get anything after the #. Instead the index page checks that value with javascript and makes an AJAX request to the server based on the url after the #. What routes they use internally to handle that AJAX request I am not sure.
The point is to have a Javascript powered interface, where everyone is on the same "page" but the data in the hashtag allows it to load any custom data on the fly, and without loading a whole new page if you decide to view a different user, for instance.
The hash part is never sent to the URL, but it is a common practice to manipulate the hash to maintain history, and bookmarking for AJAX applications. The only problem being that by using a hash to avoid page reloads, search engines are left behind.
If you had a site with some links,
http://example.com/#home
http://example.com/#movies
http://example.com/#songs
Your AJAXy JavaScript application sees the #home, #movies, and #songs, and knows what kind of data it must load from the server and everything works fine.
However, when a search engine tries to open the same URL, the hash is discarded, and it always sends them to http://example.com/. As a result the inner pages of your site - home, movies, and songs never get indexed because there was no way to get to them until now.
Google has creating an AJAX crawling specification or more like a contract that allows sites to take full advantage of AJAX while still reaping the benefits of indexing by searching engines. You can read the spec if you want, but the jist of it is a translation process of taking everything that appears after #! and adding it as a querystring parameter.
So if your AJAX links were using #!, then a search engine would translate a URL like,
http://example.com/#!movies
to
http://example.com/?_escaped_fragment_=movies
Your server is supposed to look at this _escaped_fragment_ parameter and respond the same way that your AJAX does.
Note that HTML5's History interface now provides methods to change the address bar path without needing to rely upon the hash fragment to avoid page reloads.
Using the pushState and popState methods
history.pushState(null, "Movies page", "/movies");
you could directly change the URL to http://example.com/movies without causing a page refresh. Search engines can continue to use the same URL that you would be using in that case.
The part after the # in a URI is called the fragment identifier, and it is interpreted by the client, not the server. You cannot route this, because it will never leave the browser.
I have a website which is basically a single page containing a bunch of dynamic content. In normal operation the user should never leave this page. To handle/report certain errors though, I need to redirect to an error page. So on the error page I want to provide a link back to the normal page which provides the app the information required to rebuild all the dynamic content which was previously open.
I think I can rebuild the page by parsing the querystring with javascript and reloading dynamic content. I'm not sure if this is the best way, but I've got it working. So href in the link on my error page needs to look something like:
MySite/MyController/MyAction?1,5,8,9
where the numbers in the querystring basically indicate the Id's of content sections to load in on document.ready.
I'm now stuck on how to generate this link though. I think I need to pass these numbers into the controller somehow, so the controller can pass them into the error view which will then generate the "back" link.
I have a standard html form for uploading a file:
using (Html.BeginForm("MyAction", "MyController",
FormMethod.Post,
new { enctype = "multipart/form-data" }))
{ /* ... */ }
I then have a button which calls the jQuery .submit() method on the form.
So, the question, when I click on the button which submits the form, how can I attach the additional data so I can access it in my controller?
Hope that's clear, if not let me know and I can provide more detail. Thanks.
Edit: It occured to me that I could submit this information with a hidden field in the form. I'll try that if I can't find a better way, but I'd like a more generic solution if possible as I have a number of forms on the page and ideally I'd like this data available to any/all of them.
your url should be biult just before sending the form with .submit() not in Html.BeginForm tag....
i can't see the problem over here... what exactly you are dealing with?
I know this is not quite what you asked but instead of going through the hassle of redirecting the user in the first place why don't you show a modal window (a jquery based one) that contains an iFrame. The iFrame href can be determined by the calling page and can show the error page.
Not sure if this helps but I have used this technique and found that I do not need to worry about getting the user back to the place where they started from. Additional to this you will not need to rebuilding/reloading the orignal content as it will still be on the calling page.
****EDIT**** After reading your comments maybe you could do the following...
On the link click - open up a modal popup pointing to an iframe.
The iframe calls the action on the controller to download the file.
The view could say "Downloading file... please wait, click here to close etc."
If the action throws the error then redirect to the error page as normal as it is within the iframe modal popup.
This way you do not need to leave the current calling page.