Navigating back after a non-turbolinks request displays raw JSON on chrome - ruby-on-rails

The case (Chrome only)
I open my webapp
Navigate to another page (turbolinks)
Navigate to
another page (no-turbolinks, e.g. form submittion)
Hit 'Back'
Instead of showing the previous route's HTML, i see a raw JSON. Note that this route, along with others, are configured to respond to both HTML and JSON.

I added the following Javascript to my app and that solved it:
Turbolinks.pagesCached(0)
$.ajaxSetup({cache: false})

Related

How to get form values in browser to watir webdriver

I have installed my application and it is running on following URL
http://localhost:3000
Above URL will the load form with some fields, Then I will the fill the data in the required field and then submit form. My div element will displayed at the bottom of the page. Picture will be displayed inside the iframe with in the div element.
User will the above URL and then submit form. After submitting the form, Picture should be downloaded into their local machine.
Right I am calling the following line after form submission, how can I get the existing page into the browser object and download screenshot?
browser = Watir::Browser.new
b.div(:id => "phone_shell").screenshot("/home/user/Documents/preview.png")
I found few problems in your code
screenshot method is not available for element object, it's available for browser object and also you need to call the method save to save the file in the destination folder. So write the following code, it would work.
Code to get the html of the page
b.html
Code to take the screenshot
b.screenshot.save("/home/user/Documents/preview.png")
Now this will save the image in the destination folder.

JSON shown instead of HTML for rails view using ember.js

I'm slowly moving my rails website from a traditional rails round-trip-for-each-view application to one that will eventually be single page ember.js based. As part of this migration, I'm doing it in steps and not migrating the whole app in one go to a single page app but section by section at first.
I'm stumped on one problem that seems general. When I use the same controller for JSON views as well as HTML views, pressing back in Chrome occasionally shows me the JSON view instead of the HTML view.
For instance, I have an endpoint /portfolio/13, which is the entry point into one of these section ember.js apps and which causes Ember Data to pull the JSON for Portfolio with the id of #13 over the same endpoint with application/json as the Accept: header. Pressing back after forward navigating to deeper page will get the JSON representation of the page instead of the HTML.
Do I need to force Ember Data to use the format parameter such that the JSON version is at a different URL? If so, how does one do that?
What am I doing wrong?
Try adding this somewhere in your Javascript:
$.ajaxSetup({cache: false});
It should fix the problem. However, something is wrong here, because by default browsers don't cache JSON. Probably, this is because of the wrong content type, that is, Rails is serving JSON as HTML.
Are you having some headers set as "application/json" in your rails app? Could you trace the network response headers and see the content-type: value?
Is the "whole" page displaying as JSON? ( meaning not parsing HTML )
I had this problem once using sinatra and I had a ( very stupid ) :
before do
content_type 'application/json'
end
If you want your browser to display correctly, it has to be 'text/html' for all your HTML pages.
It might be your problem at some places in your rails app. ( But why haven't you had this problem before ember? )

Changing data-method with javascript does not change what method the ajax calls users?

I've run into a very strange issue that I'm having a tough time fixing. In my view, I have a link with data-remote="true" and data-method="delete". When I click the link, I can see a DELETE request to my rails server. The JS code returned then changes this link's properties, among which are the href and data-method.
Upon clicking this link again, my server is receiving a request to the new href, but with the old data-method, even though I have changed it from DELETE to POST (it still sends a DELETE request).
If I refresh the page, however, the HTML is the same as the "new" HTML (changed with my returned JS), but it actually sends the right request type. This is why the issue is puzzling me.
Found a solution: Make sure you use the jQuery Element.data() Method for setting html data-attributes like "data-method" and so forth.
$(this).data('method', 'post'); # sets "data-method" attribute to "post"
$(this).data('method', 'delete'); # sets "data-method" attribute to "delete"
# "this" refers to the clicked link element for example

How can one change the url for a jquery ui tab added via 'add' and 'tabTemplate' functionality?

I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.
I have a tabTemplate set as follows on the initial addition of the tabs.
tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"
And the add tab functionality is done via
$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)
If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.
Next time that specific tab is visited the link should actually be 'http://thanksforyourhelp/greatly/appreciated/ID' where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for "ID."
I've looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?
The tab looks like this.
new
I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.
Edit: removed edits with references of no longer existent urls.
I haven't worked with AJAX-powered tabs too much, but I think you want the url method:
$("#tabs").tabs("url", index, url)
Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.
Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this
var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);
This will change the URL of tab at particular index and load that tab.

Accessing Page URL from within Partial View in MVC

I have a page which has a partial view included within a div called test. I may request more content to be placed within this div by receiving back a PartialViewResult.
I want to be able to obtain the url of the page (i.e. what is shown in the address bar) from within the PartialView code but when I use Request.Url, it gives me the URL of the PartialView only.
Is what I'm trying to do possible at all?
OK, figured out another way of doing it - now using the HTTP_REFERER Request.ServerVariable to work out what page requested it. Not a disaster if the HTTP_REFERER isn't populated, have got a fallback for that

Resources