From: Eivind Eklund <eeklund@...>
Date: 2007-11-21T20:54:21+09:00
Subject: Re: AJAX without Rails

On Nov 20, 2007 5:34 PM, Miki Vz <mikisvaz@yahoo.com> wrote:
> Hi, I'm pretty new to Ajax.
>
> I need to do some simple web interfaces for some project I have. A
> friend told me Rails was a bit to much for what I need, so I'm using
> eruby and markaby, and I'm pretty happy, and things are kept pretty
> sweet and simple for now.
>
> However I would like to use a little of Ajax, what is the best way to go
> about it? How do Ajax work for ruby? seems like rails has support for
> Ajax that makes it simple. Can i have the same for my eruby scripts
> without having to install any MVC system like Rails or anything?

AJAX is fairly simple, at least as long as you ignore the "XML" part
of it and use HTML or JSON (Javascript Over Network) to deal with it.

The very easiest way to do AJAX is to just have a new command
handler/new script that output the HTML you want to replace with, and
do something like this (example with the jQuery library):

<!-- Include jQuery library, replace with your own copy -->
<script type="text/javascript"
src="/publish/files/jquery-nightly-20070801.js"></script>

<!-- Add a method to jQuery for pure replace; this can also be done
other ways, I just included this because this is how my code was
structured already -->
<script type="text/javascript">
jQuery.fn.replace = function() {
  var stack = [];
  return this.domManip(arguments, true, 1, function(a){
    this.parentNode.replaceChild( a, this );
    stack.push(a);
  }).pushStack( stack );
};
</script>

<!-- Actual AJAX (actually, AJAH - Asynchronous Javascript And HTML) -->
<!-- Notice: the ready setup here is to call this stuff when the page
DOM is ready.
     What happens here is that the POST equivalent of
approve.wa2?_cmd=close_edition;EditionId=2747 gets called,
     outputs some HTML, and the #editioncloser input element shown
below gets replaced with
     whatever that HTML describes. You can trivially replace what
script gets called, what args it takes, and which element it replace.
-->
<script type="text/javascript">
<!--
$(document).ready(function(){
  $("#editioncloser").click(function(){
    $.post("approve.wa2", { EditionId: 2474, _cmd: "close_edition" },
    function(data) {
	$("#editioncloser").replace(data);
    });
    return false;
  });
});
-->

</script>

<!-- HTML code for the input element that I will be replacing -->
  <input type="submit" value=" Lukk utgave " id="editioncloser">


That's simple AJAX.

If you want to include JSON data and do DOM manipulation directly, you
can do JSON calls like this:

    $.getJSON("/autodb/ajaxapi.wa2",{_cmd: cmd, xBoatType: xBoatType,
xBrand: xBrand, xModel: xModel}, function(j) {
        var elm = document.forms['search'].elements[id];
        RemoveChildren(elm);
        for (var i=0; i<j.length; i++) {
            AddOption(j[i].optValue, j[i].optDisplay, j[i].optSelected, elm);
        }
    })

Here, you need to have your callback method output "JSON", JavaScript
structures outputted over net.  You can find examples of it on the
net; for a simple example, here's something that the above script
("ajaxapi.wa2") outputs for one of our structures:
[{optSelected: 0, optValue: 0, optDisplay: 'Alle (80)'},{optSelected:
0, optValue: 8001005, optDisplay: 'Fiskebåt/Sjark (2)'},{optSelected:
0, optValue: 8001008, optDisplay: 'Gummibåt (0)'},{optSelected: 0,
optValue: 8001006, optDisplay: 'Jolle/Åpen båt (4)'},{optSelected: 0,
optValue: 8001010, optDisplay: 'Kano/Kajakk (0)'},{optSelected: 0,
optValue: 8001001, optDisplay: 'Motorbåt (64)'},{optSelected: 0,
optValue: 8001003, optDisplay: 'Motorseiler (0)'},{optSelected: 0,
optValue: 8001009, optDisplay: 'RIB (0)'},{optSelected: 0, optValue:
8001012, optDisplay: 'Seilbrett, (0)'},{optSelected: 0, optValue:
8001002, optDisplay: 'Seilbåt (8)'},{optSelected: 0, optValue:
8001007, optDisplay: 'Skjærgårdsjeep (0)'},{optSelected: 0, optValue:
8001004, optDisplay: 'Snekke (2)'},{optSelected: 0, optValue: 8001011,
optDisplay: 'Vannscooter (0)'}]

Notice how close it is to Ruby array/hash structure?  The only thing
is that hash keys must be followed by : instead of =>.  Remember to
escape your single-quotes; they almost certainly WILL show up even if
you're sure they won't.  (Or at least they did for us...)

Hope that helped a bit.

Eivind.