Working with Jquery-Mobile 1.0 Final and Ruby on Rails 3.2.0.rc2: I am attempting to set up a persistant sidebar existing in views/layouts/application.html.haml where accessing any other link within the site the content will be dynamically loaded in a designated content area and the sidebar remains persistant.
The issue I am running into is JQuery-Mobile already taking care of the Ajax and then producing animation for the entirety of the page. I don't have a firm understanding of the flow of a page transition in JQuery-Mobile, aside for the doc on their homepage is there another resource which may better educate me about this process?
How does making the class of a div ui-state-persistant affect how JQuery-Mobile is handling a new page access?
What is the best way to set up a persistant sidebar building on JQuery-Mobile?
Take a look at this experimental project for a split-view for jquery mobile. It looks like they are doing something that may help.
http://asyraf9.github.com/jquery-mobile/
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 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.
I have many different pages in jquery mobile which utilizing different data-icon, some custom and some are built in, is there a way to preload all of these data-icons, because now its like when a new page loads with a new icon for the first time, it will be blank for a second before it is loaded. which is annoying.
I am using phonegap+backbone+jquery mobile. so its heavy java stuff instead of pure html.
Have you thought about using image sprites? This way, all icons will be cached on the first page load. It's a little extra css upfront, but I think it'd be really worth it!
I'm doing an app with jQuery Mobile and Angular.js. Cause we have some issues using both libs, exists an adapter that do "teh job".
So I'm trying using routeProvider to route my pages. But I still can't render pages using this.
Here plunker if u can help show me the way.
http://plnkr.co/edit/DNGiT83csWMmfYnHXOop
Thanks in advance!
I ran into a similar problem and maybe what I learned might help you. It comes down to the differences in the way angular and jquery go from one page/section to another (routing).
First, the basics: angular routes by inserting a chunk of html into your view, then on whatever click/action/etc, removing that html from the view and adding a new chunk of html. Essentially you're on the same page all the time; it's just the included html is changing. In contrast, think of jqm as loading up all the html into the same page, with those html chunks as divs. Instead of removing html chunks and replacing them (via routing), it's just turning divs off and on. (There are multi-page jqm apps but SPAs really highlight the differences.)
My suggestion is to pick which set of features you really want: angular's minimalistic loading (only as you need it), or jqm's flashy transitions and other built-in features. If you've got a massive app with a lot of data on every page, you might want to bypass jqm and use angular alone, and see what you can do with angular's new animate functions. It'll mean you'll need to build (via CSS or javascript) duplicates of the jqm features -- and from what I've seen, you can get close but it won't quite be as pleasantly streamlined as jqm.
If the jqm built-in features are what you really want, then skip using angular's routing. It'll just introduce all kinds of complications, anyway. Set up your pages using jqm's pattern, and use angular only where you're dealing with data.
What I've found works best is to treat it like it's a jqm app overall, and only add angular into the sections where you need it. After all, you don't have to add ng-app at the html line; you can add it into a single div as needed. Since jqm is happiest as a system-wide kind of thing, while angular is just fine being confined to pieces within a system, so far I've found jqm-whole and angular-parts to be the simplest way to get the best of both worlds.
I want to create a multiple page jQuery Mobile application and don't have any idea how to do that in a proper way.
Is is better to go for a single HTML file for each page or better putting all pages in one single file? How about changing pages and reacting to events like initializing, stopping, starting, coming back to pages, etc.?
I'd like to know the perfect way to build the page change with all the events in jQuery Mobile.
It depends on your application, you can either put all pages together or separate them. All Jquery transaction work with both methods.
Read more about this subject here: Pages