wondering how to use BoilerplateJS with Jquery Mobile. Perticulary when it comes to manage url and how to deal with the which is created automatically.
Thanks.
I haven't seen any examples out there so have been doing exactly that myself but haven't yet completed the exercise. You need to add the jQuery Mobile references into the top level index.html and then modify the html (structure, tags) to something that JQM will like to render. You also need to ensure the views correctly trigger enhancement of content changes. It seems straight forward enough although styling might yet be a gotcha so I can't yet say whether it's trivial-but-time-consuming or going to be a mess.
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'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
Isotope lets you write templates in javascript. These templates can then be rendered by either the client (using plain-old javascript) or on the server (using Johnson).
The benefit is DRYer code. When updating the DOM on an ajax or web socket update, you can don't have to write a new partial...just point it to the one you already wrote.
Has anyone used this?
Interesting, I would have to try it, however , and I know not a lot of people do it, but I actually use HAML to template .js files. Although there is still that problem the author mentions , of each request being templated on the server and sending back html, unless you are sending loads of kb, or you have really, really high load site I don't think it's such a big deal.
Also ideally you shouldn't be even sending html data back and force, just JSON objects, which are rendered on the page by your ajax request. The only legitimate use I can see for this is if you have heavily ajax website, such as where you load a page once, and the you just keeping doing ajax requests for all interaction and javascript to manipulate view.
So it would help if you would clarify the final goal. Is this for some internal app where you control user environment ( you know for sure which browsers they will use, and that they will have fast enough computers to manipulate all this javascript?) Or is it going to be an app targeted towards 3rd world, where people don't have yet resources available to use all that fancy javascript.
All that said, it's an interesting concept, and I will try it our myself, to see how well it works.
This uses Johnson, which last I checked did not work on Ruby 1.9. So that might hint at some of the immaturity of this particular solution. Eventually the community will come up with something that works really well.
One approach I have used is to make 2 completely separate templates, but try to make them as similar as possible so that it is easy to port changes from one to the other.
This seems like a bad idea. In an Ajax application, I believe that the server should be responsible for rendering all display text. This makes i18n easier, and concentrates everything in one place. The JavaScript should simply receive data from the server, with all display text already rendered, and put it in the appropriate DOM object.
In other words, I believe that in an Ajax application, the need for a JS template engine is itself a design smell.
The situation is different in exclusively client-side JS applications, of course.
Thanks for looking into this.
I'm looking to build a framework of apps which can be extended by third party developers.
The goal is to load each frame via ajax - I need to know if there is a framework which can be help me position and resize various widgets just like this one.
Example screenshot
http://tour.netvibes.com/private.php
Thanks.
Not completely sure what the question is... but:
http://jqueryui.com/
Draggable/droppable as well as jqueryui dialog should help you create and position widgets as in your question.
If you do 'view source' on the page you have linked, you can see that the page uses Mootools.
Appears to be some kind of Javascript framework.
http://mootools.net/
Additionally, you could follow Mark's advice and go with jQuery, which is a widely-used, mature framework that offers great functionality.
I agree with rmk and Mark about jQuery being a great framework!
For the ajax stuff it works well and is really easy to get into work.
For the UI part you can try the "standard" jQueryUI, which is well structured and easily themed, but by now it has a limited set of things. You have all you need to build widgets, but you don't have ready-to-use stuff like panels, layouts and so on..
If you need more, besides those said above, try looking at jQuery EasyUI, which has a lot more of things (for instance a "panel" extension to put widgets inside).
They are both based on jQuery.