I am developing a small web application using Ruby, Sinatra & HAML.
The scenario I am struggling with at the moment is something that I used to solve in PHP using Ajax and Javascript, and am not sure how to best go about doing it in Ruby (what the best practice would be, if there is a more optimized way of approaching this).
I have a screen as follows:
What I wish to happen is that when a user clicks on one of the buttons (for example Show most popular), the system calls a function which queries the database to get the relevant records and re-populates the 'Entries' box with the appropriate records. I want to do this without the rest of the page re-loading or anything else being effected, just the 'Entries' box. Bonus - If I can show a little "LOADING" spiral while the data is being fetched.
My research led me to gem known as "typhoeus" which I found to be really great, but am not sure if it applies in this scenario (or how to implement it if it does).
Any kind of help would be greatly appreciated.
Much obliged.
It seems like pjax is what you would be looking for.
https://github.com/defunkt/jquery-pjax/tree/heroku
The author uses Sinatra in his example app. Though he does use erb, I am sure that it wouldn't cause any problems if you switched the template engine to haml
I am trying to run a command on a UNIX console and display its STDOUT on a webpage in realtime with Ruby on Rails. Currently, I can use the following approaches to run the system commands:
popen3
popen4
System
backtick
etc.
However, I am unable to figure out the real-time aspects with Rails 3.0. Would I have poll a url with Javascript? I would be very grateful if someone could give a simple example to work off from.
Thanks so much and please let me know if you need more information on my question.
You can either poll with Javascript or push with websockets.
You can use one of available libraries for WebSockets communication, check out this link with some highlighted libraries: Best Ruby on Rails WebSocket tool
And on client side, you need simple JavaScript WebSockets application, and you can output the messages as text, into textfield using DOM function to append text. Or even create DIV elements for each message and append them in beginning of another container DIV element.
Currently I use php + ajax to create dynamic web applications. As I realized, sometimes I need to write much more javascript to achieve dynamic appearance than I would need to write just php for 'static' page.
After small research I found websockets / sockets.io. Can I use it instead client-side javascript to achieve the same dynamics (some pagination, reloading website parts without reloading whole page...)?
Another thing is server-side programming language (and framework) for that task. Languages I've been working with:
Python (I would prefer that one)
Javascript / CoffeeScript
Java
Do you know any web framework written in one of those languages that fits my needs?
Non blocking environments/frameworks you might want to take a look at.
JavaScript: node.js
Python: Twisted
Ruby: EventMachine
If your requirement is to reduce javascript ajax thus propose using websockets, it will not help u much. Maintaining socket is beneficial to avoid long polling ajax/rest requests, in your case it doesnt look like much if only to render json for dynamic contents.
Also im not sure where does stateful exist in your requirements.
So stick with your architecure as is
I am getting information from the browser using Javascript / HTML5 that I want to pass back into Sinatra and Ruby.
How can I pass this information back into Sinatra so that I can use it in other parts of my code?
If you want to pass any information from the client-side (JavaScript) to the server-side (Sinatra), you need to use AJAX or something like Comet. You should serialize, encode your data, send it using XMLHttpRequest and handle in the server-side code. After that, you may return an answer to your client-side.
I am trying to find the optimal architecture for an ajax-heavy Django application I'm currently building. I'd like to keep a consistent way of doing forms, validation, fetching data, JSON message format but find it exceedingly hard to find a solution that can be used consistently.
Can someone point me in the right direction or share their view on best practice?
I make everything as normal views which display normally in the browser. That includes all the replies to AJAX requests (sub pages).
When I want to make bits of the site more dynamic I then use jQuery to do the AJAX, or in this case AJAH and just load the contents of one of the divs in the sub page into the requesting page.
This technique works really well - it is very easy to debug the sub pages as they are just normal pages, and jQuery makes your life very easy using these as part of an AJA[XH]ed page.
For all the answers to this, I can't believe no one's mentioned django-piston yet. It's mainly promoted for use in building REST APIs, but it can output JSON (which jQuery, among others, can consume) and works just like views in that you can do anything with a request, making it a great option for implementing AJAX interactions (or AJAJ [JSON], AJAH, etc whatever). It also supports form validation.
I can't think of any standard way to insert ajax into a Django application, but you can have a look to this tutorial.
You will also find more details on django's page about Ajax
Two weeks ago I made a write up how I implement sub-templates to use them in "normal" and "ajax" request (for Django it is the same). Maybe it is helpful for you.
+1 to Nick for pages displaying normally in the browser. That seems to be the best starting point.
The problem with the simplest AJAX approaches, such as Nick and vikingosegundo propose, is that you'll have to rely on the innerHTML property in your Javascript. This is the only way to dump the new HTML sent in the JSON. Some would consider this a Bad Thing.
Unfortunately I'm not aware of a standard way to replicate the display of forms using Javascript that matches the Django rendering. My approach (that I'm still working on) is to subclass the Django Form class so it outputs bits of Javascript along with the HTML from as_p() etc. These then replicate the form my manipulating the DOM.
From experience I know that managing an application where you generate the HTML on the server side and just "insert" it into your pages, becomes a nightmare. It is also impossible to test using the Django test framework. If you're using Selenium or a similar tool, it's ok, but you need to wait for the ajax request to go return so you need tons of sleeps in your test script, which may slow down your test suite.
If the purpose of using the Ajax technique is to create a good user interface, I would recommend going all in, like the GMail interface, and doing everything in the browser with JavaScript. I have written several apps like this using nothing but jQuery, state machines for managing UI state and JSON with ReST on the backend. Django, IMHO, is a perfect match for the backend in this case. There are even third party software for generating a ReST-interface to your models, which I've never used myself, but as far as I know they are great at the simple things, but you of course still need to do your own business logic.
With this approach, you do run into the problem of duplicating code in the JS and in your backend, such as form handling, validation, etc. I have been thinking about solving this with generating structured information about the forms and validation logic which I can use in JS. This could be compiled at deploy-time and be loaded as any other JS file.
Also, avoid XML. The browsers are slow at parsing it, it is a pain to generate and a pain to work with in the browser. Use JSON.
Im currently testing:
jQuery & backbone.js client-side
django-piston (intermediate layer)
Will write later my findings on my blog http://blog.sserrano.com