chao's clips tagged ajax

Dmytro Shteflyuk’s Home » In-place file upload with Ruby on Rails

chao — Thu, 28 Dec 2006 18:02:13 -0000

Clipped by chao to develop a ruby on rails web app

In-place file upload with Ruby on Rails

October 28th, 2006 at 3.10 pm (AJAX, Ruby on Rails, Development) · (3,010 Views)

My friends often asked me how to upload file using AJAX, and usually they got answer “in no way”. Correct answer, but what if I need to upload file without full page reloading? And, of course, I want to use RJS in this case. Here I’ll explain what to do to get effect very similar to AJAX file upload (btw, Gmail uses this technique).

First of all, do you know, that form element has attribute target? If you specify it your form will be submitted into frame with name entered in target attribute. Of course, this frame can be iframe, and it can be hidden! Look at the following chunk of HTML code:

                    
                      <form
                     target="upload_frame"
action="/test/upload_action" id="upload_form"
                    >
                  
                      <input
                     type="file" name="uploaded_file"
/>
                  
                      <br
                     />
                  
                      <input
                     type="submit" />
                  
                    </form>
                  
                      <iframe
                     id="upload_frame"
name="upload_frame" style="display:
none"
                    >
                  
                    </iframe>

When you click the “Submit” button, form will be submitted to hidden iframe and controller’s action will be called. But resulting RJS will be returned into the hidden frame! We need to get full respond and execute it in context of whole page (parent window for our frame). There is one interesting technique exists: http://developer.apple.com/internet/webcontent/iframe.html, and it’s implementation as Ruby on Rails plugin here. Example of using:

class TestController <
ActionController::Base
                  
  def upload_action
                  
    # Do stuff with
params[:uploaded_file]
                  
    responds_to_parent do
                  
      render :update
do |page|

        page.replace_html 'upload_form',
:partial => 'upload_form'
                  
      end
                  
    end
                  
  end
                  
end

It’s simple, right?

jQuery: New Wave Javascript

chao — Tue, 13 Jun 2006 05:50:45 -0000

Clipped by chao to use ajax in my web apps

jQuery
New Wave Javascript

jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript.

What is jQuery?

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

What does jQuery code look like? The quick and dirty:

$("p.surprise").addClass("ohmy").show("slow");

Congratulations! You just ran a snippet of jQuery code - wasn't that easy? There's lots of example code throughout the documentation , on this site - be sure to give all the code a test run, to see what happens.

The above code snippet looks for all paragraphs that have a class of 'surprise', adds the class 'ohmy' to them, then slowly reveals them. Click the 'Run' button to see it in action!

Quick Facts:

jQuery supports CSS 1-3 and basic XPath.
jQuery is about 10kb in size.
jQuery works in Internet Explorer, Firefox, Safari, and Opera.

Using REST with Ajax

chao — Sat, 25 Feb 2006 06:04:19 -0000

Clipped by chao to use ajax in my web apps

Using REST with Ajax

by Nic Ferrier
02/23/2006

This article shows how to use Ajax techniques to make web apps with REST APIs.

Everyone's talking about REST these days. Lots of people are still struggling with it, and there's good reason for that--REST is actually quite difficult to fit into the browser-based HTML Web, for two reasons:

Current HTML forms support only GET and POST, not PUT or DELETE
HTML forms always involve a page change

As far as I'm concerned, this is fair enough; REST is primarily a web services platform, an alternative to CORBA, SOAP, and XMLRPC, not a user interface. Still, at least some of the time, it's nice to use a REST API as the foundation for a web app. On the other hand, Ajax can be really complicated, and it always seems to involve lots of different bits of code.

That is the point of this article. REST's clean definition of an application's architecture solves at least some of the problems with Ajax; and using Ajax to a REST web app leaves the REST API uncomplicated and pure.

Selenium Automated testing for Rails

chao — Fri, 23 Dec 2005 00:44:46 -0000

Clipped by chao to test my web2.0 app

Acceptance, or functional, testing is designed to put manual tasks through their paces, but testing these tasks by hand can be time consuming and prone to human error. In this article, the author shows architects, developers, and testers how to use the Selenium testing tools to automate acceptance tests; automating the tests saves times and helps eliminate tester mistakes. You also are provided with an example of how to apply Selenium in a real-world project using Ruby on Rails and Ajax.

AHAH

chao — Fri, 25 Nov 2005 00:58:49 -0000

Clipped by chao to use ajax in my web apps

JAH - Ajax without XML

With all the AJAX excitement, it's worth pointing out a simple technique I call JAH - which can be Just Async HTML, or Javascript Async HTML to taste.

This works on the microformat principle that XHTML is XML, but with the added advantage that Javascript already knows how to handle XHTML DOM's so no xml parsing is required.

You just include

<script language="javascript1.3"
src="jah.js" ></script>

in the <head> and then link to dynamic pages with

<a
href="javascript:jah('kevin.html','

target');">kevin</a> where target is the id of the HTML element you want to replace.

Here's a very simple static example.

If you want an elaborate dynamic example, go see Kottke, he gets paid for this kind of thing.

chao's clips tagged ajax

Dmytro Shteflyuk’s Home » In-place file upload with Ruby on Rails

In-place file upload with Ruby on Rails

jQuery: New Wave Javascript

jQuery New Wave Javascript

What is jQuery?

Using REST with Ajax

Using REST with Ajax

Selenium Automated testing for Rails

AHAH

JAH - Ajax without XML

jQuery
New Wave Javascript