Hotwire Turbo Drive reloads all the page - ruby-on-rails

So I am testing Hotwire in Rails, every thing is working as expected. But if I just generate simple CRUD scaffold for rails and call new action, I can see Turbo drive is using fetch by default and page don't referesh. But when I was reading the tutorial, I read that by default Turbo drive will only load content of <head></head> only once on first request and I will not load the <head></head> again on second request.
However when I check the Network tab on Chrome, I can see that <head></head> is getting loaded for every request. With Turbo Stream I am able to just append/prepend the content but I was hoping I can achieve same thing just by using default Turbo drive. So my question is how can I avoid loading content of <head></head> in every request ? What am I doing wrong ? I have not written any code, I just use scaffold to generate simple CRUD app.

Related

Generate PDF from Vue template

I need to create downloadable pdfs of a page which is rendered using Vue. The html to template API we're using is DocRaptor.
API built using Rails
Client built using Vue
Two types of approaches are possible:
Passing in a url to the page, which is then rendered to a PDF.
Problems.
The page is behind our auth, do I pass in the session token in the header?
Page is calling our API, meaning the above wouldn't even matter...I assume you the page will only fetch the raw html, not run JS in the DocRaptor POST request.
Passing in the raw html in the DocRaptor POST request, with styling. Problems
We don't use server side rendering, so don't have access to a nice pre rendered html string
Figuring out how to compile vue to raw html
Am I way off the mark here?
The two options above seem like the way to go. Would love for option 1 to work, but I don't see how - which leaves me with option 2, however no amount of googling has given me answers beyond server side rendering. Can I even do that for single pages? I assume the whole app gets rendered.
Option 1 could work, assuming you have some sort of authentication mechanism in place (for example a short lived token). DocRaptor does indeed execute your javascript, so it should work.
You can render to an invisible element on client (or may be even visible and make user think that this is a preview) and then use old good innerHTML:
let html = document.querySelector('#render-placeholder').innerHTML;
and then post it to server to forward to pdf renderer (to keep service access tokens secret).

How to update iframe page tab content using a form?

I am trying to pass data using a form to a Facebook iFrame page tab but can't seem to figure how to do it.
I have a page tab on my Facebook page with several elements such as links and images directing users to various pages on the main website. This is updated every week, so rather than update the HTML file and upload via FTP everyweek i would like to see if i can create a form to pass the new data to the iframe.
In addition the Facebook page tab cannot be created in PHP as the server is running ASP.NET
I am trying to do this without the use of a database table if possible, using POST or GET would be preferable.
If anyone knows of any tutorials or has any tips i would be very grateful.
Cheers
You can only pass content or interact with iframe content if it's on the same domain as the parent webpage that has the iframe. All browsers have a "same origin policy" that prevent you from being able to do that - sorry :(

Server side rendering for dynamic pages with PhantomJS on Ruby On Rails

I have a WebPage made that is 90% Javascript. All of the WebSite is rendered dynamically.
I want this content to be rendered by the server as well so that Google can crawl and index all of my content and links.
I know that in order not to get banned by google, the content of the dynamic page and the server rendered page must be almost identical.
I don't want to code two different pages (one from the client with Handlebars and one from the server with ERB in this case).
So I thought of PhantomJS. What I want is that when I get the _escaped_fragment_ param from google, I open the page without that with PhantomJS and I render this to HTML from PhantomJS and return that from the server to Google. This way, I don't have to create two different pages for anything.
I know that I can use Handlebars for Server Side templating as well, but I'd have to code everything twice anyway.
Does anybody know how to accomplish this with PhantomJS? Is there any other way for not repeating the Logic and code Twice and have Google index the Site?
Thanks!!!
Yes you can.
Add the following to the of your Javascript intensive page
<meta name="fragment" content="!">
When the Google bot finds this tag, it will issue a new http GET request. This time, it will add ?_escaped_fragment_= to your URL.
So if your web page with Javascript is located at:
www.mysite.com/mypage
Google will issue a new GET using the following URL:
www.mysite.com/mypage?_escaped_fragment_=
In your Ruby GET handler, you simply call PhantomJs with the unescaped URL (just do a string replace). In your PhantomJs javascript code, wait for the page to render and then then extract the HTML using regular javascript and return it back to your Ruby GET handler where you will simply respond to the GET with the HTML text string.
In this way you do not have to write your code twice. The solution is generic and will snapshot anything.

Getting the content of Joomla page into Rails page

I have a web page created in Joomla. How do I get the content of that page into my Rails app's page ?
If you used joomla, then you can just grab the rss feed from the page and parse the xml with Nokogiri.
https://github.com/tenderlove/nokogiri
If you're using the same db for both, simply create a rails model to read that db table, and bring the content in.
OTOH, if you're wanting Joomla to assemble and create the entire page, then pass it to rails to view unmodified, why force Rails into the mix at all and just let some pages be rendered by Joomla and some by Rails? You'll need some creativity in the routing and positioning, but then you'll need that to do the RSS read mentioned above, anyway.
Thanks for your hint #chrisBarretto. There wasn't any rss feed associated with the joomla page. However, I managed to grab the content from Joomla page with just using Nokogiri.
Here's what I did in the controller :
#page = Nokogiri::HTML(open(" ... <joomla page url>..."))
Then in the view,
<%=raw #page.css("body table").first.to_s :%>
This worked perfectly as I wanted to be.

rails 3 + ajax: what is simplest way to embed variable-length report html from my rails app onto another webpage

My app collects data reports that our users want to embed onto their own webpages.
The report is a short daily activity report... but the report length varies based upon the particular data that day, so a fixed-iframe will not work... one day the report might have 10 lines, the next day the same report might have 100 lines.
Currently, they have to put a huge iframe on their webpage that attempts to be larger than the biggest report... but that's hit or miss.
I need to offer a better way that
a) works independently of the size of the html data that is returned, and
b) still allows us to control the display of the report via CSS on our server (eg, does not require them to add a our stylesheet to their website)
The info I've seen using ajax with rails -- including an earlier question I asked -- seems to assume the destination page has an iframe...
But an iframe will not resize to fit the data, right?
Not having done ajax before, I'm looking for the simplest solution to embed this kind of variable-length content from my rails3 app to remote webpages.
suppose, for example my app has a url/route/view:
http://example.com/dailyreport/customer_key=ABCDEFGHIJ
that currently returns a very simple css-styled html page with that customer's daily report:
<head>
<link rel="stylesheet" type="text/css" href="/stylesheets/reports.css">
</head>
<body>
REPORT IS DISPLAYED HERE
</body>
I'd appreciate any info on how to transition from our current fixed-iframe non-ajax approach to an approach (presumably ajax? without iframe?) that handles arbitrary-length data coming from our app.

Resources