JavaScript gotcha: storing objects in an associative array

Posted by Luke Francl
on Wednesday, June 17

I just ran into a tricky gotcha in JavaScript.

I was trying to store some objects in an associative array. Based on my experience with Java, Ruby, and other languages, I expected that given code like this:

1
2
3
4
5
6
7

var dictionary = {};

var obj1 = {}; 
var obj2 = {};

dictionary[obj1] = 'foo'
dictionary[obj2] = 'bar'

The result of dictionary[obj1] would be ‘foo’ and dictionary[obj2] would be ‘bar’.

This is not the case!

The problem is that JavaScript objects are not really hash tables. They’re associative arrays, and the key can only be a String. When you insert an object into a associative array, toString() is called and that is used as the key. Unfortunately, the default toString implementation for JavaScript objects returns “[object Object]”...which is not only very unhelpful when debugging, but doesn’t provide you with a unique key for your associative array.

You can work around this problem by overriding toString. Or you can figure out another way to associate your object with a value. D’oh!

Slider.js - a javascript slider component

Posted by Bruno
on Monday, May 14

Update: this component has been renamed to Glider.js

Inspired by the cool sliding window thingy at Panic, I decided to whip something up that I could use on Curbly.

Glider.js depends on Prototype and effects.js (from the Scriptaculous library), and it’s available for download here.

Here’s what it looks like:

AJAX partial DOM posting with link_to_remote

Posted by Casey
on Tuesday, April 17

One of my favorite little AJAX tricks is posting only a few fields of the DOM with link_to_remote.

The real world application of this is when you have a composite object that needs to be created in the process of creating your main composing object. It can also be helpful when you have a dynamic interface with hidden divs within one main form and you don’t not want to pass the whole form via xhr (it could be a multipart request with a file selector).

Here is how to submit only one DOM element’s children form inputs:

1.Define the DOM element you want to submit 
1
2
3
4
5
6
7
8
9
10
11
12
13
14


<div id="remote_message" style="display:none"></div>

<div id="create_input">
  <label>Movie name</label>
  <input type="text" name="create_movie_name" id="create_movie_name" value="" />
</div>

<%= link_to_remote "Create movie", 
  {:url=>'/movie/create',  :submit=>"create_input",  
    :success=>'handleCreateSuccess(request);',  
    :failure=>'handleCreateFailure(request);' }, 
  {:id=>'create_movie_link_id'} %>

The important thing to note is the :submit=>‘create_input’ which defines the DOM element whose children will be serialized and passed to the controller on submit. Also notice we haven’t defined an HTML form. Prototype is smart enough to serialize any DOM structure, not only forms. This could just as well be inside a form, but only the DOM element we specify will be sent to the server.

2. A standard controller to handle the post 
1
2
3
4
5
6
7
8
9
10


class MovieController < ApplicationController

  def create
    return unless request.xhr? && request.post?
    # do stuff
    render :inline => "'#{params[:create_movie_name]}' was created"
  end

end
3. Handle the response with javascript 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17


<script type="text/javascript">
//<![CDATA[
  function handleCreateSuccess(request) {
    showMessage("Success! " + request.responseText);
  }
  function handleCreateFailure(request) {
    showMessage("Problems creating that movie: <br/>" + request.responseText);
  }
  function showMessage(message) {
    $('remote_message').show();
    $('remote_message').innerHTML = message;
    new Effect.Highlight('remote_message');
    new Effect.Fade('remote_message', {duration: 10})
  }
//]]>
</script>
And that’s it. Of course you don’t need to use link_to_remote, you could just use prototype's Ajax.Request() 
1
2
3
4
5
6


new Ajax.Request('/movie/create', 
    {asynchronous:true, evalScripts:true, 
        onFailure:function(request){handleCreateFailure(request);},
        onSuccess:function(request){handleCreateSuccess(request);}, 
        parameters:Form.serialize('create_input')});

Using this technique you are no longer forced to do full form submissions when you only want a small bit of data which will lead to a more dynamic and ‘snappy’ user experience.