Rails Layout: Make is so it doesn't reload the whole page everytime - ruby-on-rails

I currently have a layout setup where it <%yeild%>'s the part that changes. However, I have noticed that it reload and fetches the rest of the page css, html & js that never changes while the same layout is in use.
I would like to know if there is a simple and efficient way to make it so that if the user is changing page through the tabs I have setup to navigate it only fetches the part of the page that changes. Not the navbar, the main js, etc.
Please let me know if I wasn't clear enough.
Thank you very much.

Related

Is there a way to execute a javascript function at the end of a WebForms event?

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.

jQuery Mobile + FullCalendar - need to refresh page to see it with multiple page divs

Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....

Templates and sub Templates aren't working in Nav

So, I've got this app I'm working on. I've got a nav built and it sort of works. But not right. I'm pretty confident I'm screwing this up some where.
The nav looks like this. The problem is, that it never shows the current view highlighted in the nav (except for dashboard) unless i go directly to that page. But, if I do go directly to the page, none of the angular stuff works? The second problem is, under the Admin menu, I can't get any views to appear. But, if I refresh the page, then I can? That seems odd.
This is what my routes look like. What am I missing?
UPDATE:
Ok, so, if I start from dashboard, then navigate to other pages (such as admin/create or admin/manage) then it doesn't work (except for /properties) and I don't see the view update correctly (again, except for /properties). However, if I start in /properties, refresh the page, I see the content (minus any of the angular stuff), but I can navigate to admin/create and admin/manage. Again, Angular doesn't work, but I can at least navigate and see the rails partials.
UPDATE 2:
So, I figured out my own first mistake. I needed to add the routes into the angular side as well as the rails side. Now, I just need to figure out why highlighting isn't working?
Move the partials to it's own foler:
example: app/views/shared/_partial_name.html.erb
right now, you have the partials under the layout folder. And my guess is that is causing the rendering problem.
Keep application.html.erb as the only file under the layouts
then render the partials as shared/partial_name

Render 2 views at the same time?

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.

Hiding embedded tweet until Twitter JS loaded

I'm trying out the new embed Tweet feature https://dev.twitter.com/docs/embedded-tweets and it renders horribly until presumably the js file is run and it styles the Tweet. I'd like to hide the Tweet until it is properly styled. Is this possible? I've moved the js file towards the top of the head section to try to get it loaded early.
The example is at http://www.photogenix.biz - I've put it inside a container div with width and min-height set to try to control the horribleness :) Any advice at all? If code is involved I would really need it as specific as possible.

Resources