I would like to convert an existing rails app with multiple models,controllers and views to a single page app (SPA). How can I render views for each model not as separate html pages, but as sections of the main page (say a div for each section), which could be navigated to by scrolling vertically? Is it possible to get the same user experience, I mean specifically vertical scrolling, in a standard MVC Rails app?
Well, to convert a standard rails app to a Single Page Application(SPA) you need to hook it to a MVC front - end framework. The html that was being rendered by the rails calls previously will now be fed into the front-end MVC framework which will render portions of a page instead of the complete page by making AJAX calls.
Nothing at all changes with the models and almost the whole of controller codes also stay untouched.
As a front-end MVC framework you can look into angular.js which is from the google stable of products or backbone.js which I personally find great. In fact there's a whole host of other frameworks ranging from heavy and full- featured like ember.js to minimal and necessary like handlebar.js
If you're looking for tutorials, tutsplus has a tutorial on backbone on rails that I know of. Hope this gets you started.
You have to render the views in the page you want to display ,there is noting to do with model and controller code ..
for this refer following link
http://guides.rubyonrails.org/layouts_and_rendering.html
It's perfectly possible, you should call your actions through javascript instead of html so that each actions return a portion of the page you want to modify instead of reloading the whole page.
Example, suppose you want to add a user to a list of user:
when you click the add button you make a ajax post to your controller.
this actions responds to the js format with a javascript file (controller_action.js.erb)
This js file will evaluate a partial template corresponding to a single line of your table (_user.html.erb), find your table and append the evaluated html to the table
Have a look at :
http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html
Specifically this section which answers your question with example :
http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns
Try turbolinks gem
Your app will be similar to one page application with less efforts and less time.
Related
I'm actually making a rails app for a music band. And they recently asked for a music streamer to play music throughout the whole application.
As they're on bandcamp, I thought that I might as well do that via the iframes they provide, before building a javascript streaming feature in some time.
But, here's the issue : when you put an iframe in your application.html.erb, it's reloading itself everytime the user is loading a new page. Exactly as if the code wasn't in the layout, but on every pages instead.
So far I've tried some stuff, like putting the iframe in a partial and calling it via : render 'layouts/shared/music_widget', but the issue stay the same.
As I've found nothing on the web so far, I'm guessing I've missed something ( maybe I lack some knowledge in rails' basic magic )... so, I'd be glad if someone here could help me with this one.
Thanks !
That’s because when you reload, a completely new page is generated and downloaded by your browser. The whole HTML is replaced with every HTTP request. To achieve what you want, you’d have to look into asynchronous solutions and SPA’s (Single-page Applications), basically having only one page and replacing the content of it using AJAX.
I suggest using batman.js, a great library which makes it relatively easy to switch to AJAX page loading using Rails. A big advantage is that it was built with Rails in mind, and as such it couldn’t be more simple to integrate it with your current application. However it does require you to learn CoffeeScript.
Alternatives include AngularJS, Ember.js, Backbone.js, each of them having gems helping with Rails integration.
I am sure there are many more, but I listed the most popular choices. You could also create your own JavaScript to handle that. The easiest solution in such a case would be to have the big <div> containing everything but the iframe; bind to the click event of a elements with a special attribute set (for example data-ajax="true"), make an AJAX request to the URL specified in href, and replace the content of the big <div> with the response.
In any case, you’ll need to read more about Single-page Applications.
I am working on a similar project which requires the use of iframe to play music thoughout the website. For that I used two layouts, one is the application.html.erb and another one is called player.html.erb
Now Application .html.erb is the one which contains header, footer and the iframe. And the other layout does not contain any of these and is the one which is used to for the actions to be opened in the url.
I have a asp.net mvc4 web application which for example allows me to manage members and member resources to the site.
On the member's home page there are several different sections of details about their profile. I want to use angular.js and webapi(entityframework) to allow them to edit their address details in place and save them without a page postback. I imagine the best place to start is to have a partialview which displays these address details as part of the main page view.
Are there any examples of such a setup?
You can definitely do this. First, for switching the details based on which section the user selects you have two options:
1) Create a module and setup routes. The routes will allow you to have a base HTML page with an area where you can switch partial HTML 'views' in and out based on the URL that you are clicking on in the application. The AngularJS site has a tutorial where they do something similar. Pay notice to the ng-view explanation.
2) You can create custom directives and fetch an external HTML partial page. In the directive you 'compile' the HTML partial which allows you to use any directives that are on that page (ng-click, ng-class, etc) and then render it where the div is declared in the original page. This is a bit more advanced, so look at the ng-view example first.
For sending the data back to the mvc application, all you need to do in angular is declare a resource with the url back to the mvc app where you post the data and then send it some data. Something like this:
$resource('api/updateUserData',
{userName: userNameVar, userEmail: userEmailVar},
function(data){
//callback code where you do something with the returned data if any
}
);
There is a nice github project called angular-app that has a basic CRUD setup, shows you how to layout the angular app itself, how to use tests, how best to structure the angular files, etc. This may also be a bit more than you need for this small project, but it can at least give you some ideas on how to move forward if your app grows.
I'm building an MVC application and I've noticed when I navigate through the app the layout gets reloaded along with my content.
I know this is default and expected behavior.
I'd really like to avoid reloading the layout, any thoughts?
You have minimum two abilities:
Use Ajax helper (#Ajax.ActionLink)
Link 1
Link 2
Use javascript/jquery
Link 1
Main idea is load PartialView with ajax requests and insert/replace content in DOM.
There is no way to instruct it to not reload the layout
The Layout gets rendered at the backend as soon as you request the url it returns a view that it redered with the layout .
However using ajax to load your views is bad for SEO you can do some workarounds.
Or should i say SEO is stupid and someone should Fix that shit.
I posted a link to show you how the crawlers act when you have a ajax website
http://moz.com/blog/how-to-allow-google-to-crawl-ajax-content
There are some great frameworks out there like Backbone , angularjs,knockout that makes it simple to accomplish what you wanto do.
We have a fairly complex application that was previously using WebForms. We are in the process of rewriting bits of it from scratch using MVC. Our application is comprised of a number of widgets, that together make up the functionality of the application.
In WebForms, we used UserControls. Each UserControl would register its CSS and JavaScript by means of a collection that was stored in HttpContext.Current.Items. That collection would then be merged to output as one single request. Typically this would occur in the Page_Load event, and the containing page would then render out a script tag that would comprise all the JavaScript and CSS needed for that page.
We've been struggling with doing the same in MVC. We are using a number of views within a masterpage to mimic the widgets. Each widget has its own controller, so the functionality can be sufficiently segregated. The masterpage builds up the widgets on the page using RenderAction from MVC futures. Originally we were using the same registration method for the CSS/JS files. Each controller would register its required files in an Action. The files would then be contained in the HttpContext.Current.Items collection, and would be rendered out to the page. To facilitate this, I wrote an HtmlHelper extension to render the links/scripts out to the page. It looks like this:
<%= Html.GetRegisteredCssFiles() %>
The problem is that MVC uses a more top down approach. This call is made in the tag of the page, but our subsequent calls to RenderAction happen below. By the time RenderAction is called and the required files are registered in HttpContext.Current.Items, the code above has already executed. So, the collection is not modified at the right time.
Does anyone have any ideas on how we should be constructing this? I'm looking for answers that incorporate best practices for MVC.
This question was asked a lot of time ago, so probably you've dealt with this already. But for future visitors, maybe this solution will be helpful:
http://marcinbudny.blogspot.com/2010/01/handling-stylesheet-references-in.html
The Free Telerik MVC tools have a script and a style register that might do what you want ...
Not sure if this is a feasible solution for you, but try moving that call to the bottom of each page.
I've always included my javascript and css files in the html HEAD, so I don't know if it would work lower down. My assumption is that it'll work in most browsers, but you might have random problems in a few.
The alternative is to have GetRegisteredFiles() output some javascript that loads the CSS files in the proper place (via DOM manipulation).
The problem with either of these solutions is that the files aren't included until the end, which could cause the page to look "plain" until the CSS is downloaded.
Alternatively, the controller could predict which "widgets" will get loaded and pass that data to the master page.
I'm looking to build a rails web app with an admin control panel. I'd like the control panel to use a tabbed interface for controlling users, projects, tasks etc, and I'd like to switch between tabs using jquery tab UI controls with ajax. Also using restful authentication for users and my own code for projects, tasks etc.
Here's what I can't wrap my head around. Normally, I'd have a controller for each tab, so validation is simple, if there's an error (say in the user) i just render the proper action with the object and it's errors and we're set. However, if I'm not refreshing (to different controllers between tabs) how does this work? Do I need to have one massive controller with all the user, project, task validation and controls (ie. crud operations)? Seems like not the greatest design.
Or is there some way I can use an 'admin' controller that encompasses separate controllers for proper crud/error checking etc.
Hope this makes sense?
I would make the contents of each tab be called in by a separate ajax request. This would give you the following benefits
Now each tab can easily be a different view/controller
You only need to load the contents for a tab when it is used; you won't be processing code/downloading html for tabs that the user doesn't use.
If you don't want to use this route, (i.e. you feel you need to load all the contents of the tabs on page download in a single request) then you could separate out the code using helper methods and partials. See my answer here: Rails Sub-controllers?
I would personally use inline validation in the forms. Jquery does that pretty well , but there are a lot of library that can help you with that.
I guess it's not exactly what you were looking for, but it would make your job easier. Of course still keep validation in the models so that no one can bypass the validation (using firebug or something like this)