I'm testing out the Turbo Frames and so far the frame works as described in the documentation.
// First Page
= turbo_frame_tag "main" do
%p Testing Turbo Out
link_to "Test it", other_page_path
// Other View
= turbo_frame_tag "main" do
%p is this thing on?
Clicking the link on the first page replaces the content in that frame with what was in the other file.
However, if I ask the browser to do a full page reload, it reverts back to the original frame and doesn't display the one it was replaced with when the page is re-rendered.
If I want the full page to retain what it currently has if someone needs to hit the browser re-fresh, do I need to instead use turb streams?
I'm testing this out as a way to build a sidebar navigation that replaces the content area. So as this currently stands, if a full page browser refresh is requested, it reverts back to what the page displayed when first rendered.
What you are asking is for the turbo-frame replacement to advance the browser history stack. This is done by this modification to the turbo-frame element:
%turbo-frame#main{ data: {turbo_action: :advance}}
I'm not using the turbo_frame_tag helper here. I imagine that you could, but I just looked at my own app, and this is how I had done it.
It's described here in the hotwire docs.
You should see the url change when you load the "other view".
Does this work for you?
Related
I create application on ruby on rails and add modal window for login. I put modal code in partial layouts/header. I expect it must work on every page of my app but not. Modal don't open in home/index. It's start work on home/about. I don't understand why. I'll update my ask If needs code. Can anyone help me understand?
I try to move modal code on another pages but get same effect.
home/index and home/about is URI?
Make sure you use the same layout (header file) and the modal element exist in HTML of home/index (you can use dev tool - f12 for checking)
Please, Does the modal need to be triggered by a button or something?
Picture a very common use-case described in the official Handbook: a <turbo-frame> that contains pagination links.
So, turbo supports (encourages?) annotating these pagination links with data-turbo-action="replace", and the resulting experience is very nice: browser URL gets updated, a page reload will load the correct pagination and the browser back button will show the last page loaded correcly. 🎉
However, as soon as you add data-turbo-action="replace" on any link, they start firing a turbo:load event on the page when clicked, even tough they are inside a <turbo-frame>; in my mind, turbo:load should be analogous to a DOMContentLoaded event, and it should fire only ONCE per page loaded; if a turbo frame is being navigated by pagination, I don't want my event handlers designed for the page that contains the turbo-frame to be fired again and again each time a frame within the page paginates.
Note that this ONLY happens if data-turbo-action is present; otherwise, the links inside the turbo-frame will not trigger a turbo:load on the page.
Lastly, the turbo:load event being fired is indistinguishable from the one on the first page load or from a full turbo visit outside the turbo-frame; it's target is the page's root html element, so I can't even detect it was a turbo:load coming from a turbo-frame.
So, how to avoid links clicked inside a <turbo-frame> that were marked with data-turbo-action="replace" to trigger turbo:load on the page, or at least distinguish these events from the sole turbo:load fired as soon as the page loads for the first time?
I have a screen I am creating to manipulate a document. As part of the web form I have a table of page thumbnails on the left side with controls for the current page in the main portion of the screen. When a thumbnail is clicked an UpdatePanel in the body section is updated with the info for that page.
I have just added the ability to change the order of the pages by dragging the thumbnails up and down. This uses JqueryUI's Sortable feature with a hidden asp:Button to communicate the changes back to the server.
All of that works when used separately. However, when I click a thumbnail to select a page the table that they are in looses the sortable property. I can easily re-establish it using a JavaScript command. But how do I call a Javascript command at the end of the WebForms event?
It is strange that after clicking on a thumbnail the script is broken. But you would have to post some source code and ASPX/ASCX to investigate that.
But it is possible to execute some javascript at the end of a postback. Have a look at this documentation:
https://learn.microsoft.com/en-us/previous-versions/aspnet/bb398976(v=vs.100)
I think you want to have a look at the 'pageLoaded' or 'endRequest' events, maybe you can call your javascript from there.
I'm kinda new to rails so forgive if this is a stupid question.
The scenario is:
I got my events controller with a index view that shows all events on the page. Now, what i want to achieve is: User clicks on one of the events, lightbox comes up showing all info about about that one event, with all the other events still behind the dark background of the lightbox. User closes the light box and process repeats. Pinterest is a good example of what i'm trying to do.
At the moment, i got these 2 views working properly. User clicks on the event and is taken to the show action.
So i'm wondering if what i'm trying to do is RESTfully achievable(without too much hacking around) in rails(3.2.8) and if so, would appreciate some insight as to where i should start from.
Thanks a lot.
As far as I understand what you want to achieve, it has nothing to do with actually rendering 2 views at the same time. What you're describing is simply making an ajax call with lightbox that opens up an URL that renders another view in the shown DIV or IFRAME (whatever lightbox uses)...
Depending on which version of Rails you use the implementation of this looks a bit different. But actually what you have to do is simply include LightBox2 in your Rails app, by simply adding the appropriate JS and CSS files and then supply the necessary class at your link_to calls...
Hope it's clear what I mean.
UPDATE
See this link for further info.
When I change page using:
$.mobile.changePage('#newPage');
the browser's url changes correctly, but I see blank page, and I have to refresh the page (F5) to see it.
I use PHP to place all pages in one HTML (tiny app, of 3 pages), and tried also:
$.mobile.changePage('#newPage', { allowSamePageTransition:true });
It looks like it starts the animation and then stops for some reason.
More than that: if I go back and forward using the browser's buttons, all pages are displayed blank, unless I refresh.
Any suggestion ?