Ruby on Rails ajax - dynamically loading all pages - ruby-on-rails

I have a flash media player (similar to lala.com) that needs to continue to stream while people click around. I don't want to use an iframe.
So, I need to dynamically load all site pages with ajax no matter what link people click on.
I've got this working with Rails and JQuery for a single page. With this method I have to place a file.js.erb file for whatever controller is called. Example: example.com/home is called and I have to have an index.js.erb in the views home dir to respond to this.
I used:
http://railscasts.com/episodes/174-pagination-with-ajax
to get this to work on one page, but it wouldn't be DRY at all to copy .js.erb files to every controller.
Is there something I can do with the main application_controller or even with routes.rb?

I found a way to do this. You can load whatever pages you want via the jquery load method.
$('#result').load('ajax/test.html #container');
They will then be placed in the div with the #result id.
You can also specify a page fragment with #container so you only load the part you want.
This allows all your controllers to stay in tact etc with no extra js.

This is really going to impact your visibility to search engines. I also think it will mean you need to think about the flow of your controllers. Rather than having controllers responding with views that represent a page, controllers will respond with snippets of HTML/JSON/etc that get injected into the home page. Your home page acts as a coordinator, loading the content in and out. Perfectly fine to have js.erb files in each view folder ... as they should be returning content specific to an individual controller.

Related

Rails load selective contents into view using jquery load function

Recently, I've found this template from codyhouse which I decided to play with it a little in a sample rails app.
Looking into the code, I found that the page transition from the side navigation bar is happening via jquery load function.
From what I understand, whenever view, say user/show, gets loaded in rails, the contents written in the specified url, which in this case would be the contents in my user/show.html.erb file, gets embedded in the application.html.erb file.
As this is the case, I was wondering if there would be a way to "swap" contents being embedded into the application.html.erb file perhaps via jquery load function. For instance, without having to reload the whole view, replace the user/show.html.erb contents loaded in the page with the contents of user/signup.html.erb. Or is it not possible as it deviates from the concept of the MVC model?

ruby on rails, adding a partial to each html page in the system

I'm currently working on a project which has ROR in backend, I need to add a noscript tag to every page in the system to show a banner to the user.
Does ROR provide an easy way to add a piece of html to every page?
Add it to the application layout file /app/views/layouts/application.html.erb. That file gets loaded for every view unless you have disabled this layout or have used a different layout.
If you have multiple layouts then place the <noscript>...</noscript> in a partial and render the partial in all the layouts.

Grails- Add link href to button

I'm building a simple Grails app for a web development class. For the most part, the app is finished, but I'm having one sticking issue.
On the index page, I have a series of buttons that correspond to the List, Create, and other templates that are built in Grails via scaffolding. How can I dynamically pass on the correct path to the controller action?
In order to do this, I need to get the current page URL and add the proper location. Is that possible to do in Grails or should I stick with jquery or some other ajax solution?
What are you trying to achieve here,
If you want to generate link to controller actions that you can use for button href, you can do it like this,
<button href="${createLink(controller:'foo', action:'bar')}"/>
See the createLink tag
If you want to know controller and action name, ${controllerName} and ${actionName} can be used.
Can you use ${controllerName} to get the name of the current controller?
An alternative might be ${params.controller}, but again, not 100% sure it works in gsps

Rails - Creating a Landing Page, which is different than the Web App

I'm rails I've been building a web app.
But the web app is completely different than what the landing page (sign in, register, about, etc should look like)
How do rails developers handle this? Different layouts? Different CSS files? etc..
what's cleanest? Thanks
You could create a HomePage controller (with associated views), and write the index action for that.
If the layout for the home page is going to be different from the application's again, then in the app/views/layouts/ folder, create a home_page.html.erb template. This will automatically be used by a HomePageController instead of the default application.html.erb template.

Jquery load external file that relies on jquery plugin

I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.

Resources