Posts Tagged ‘javascript’

prototype’s Element#removeClassName gotchas

// multiple classes MUST be removed by
// multiple calls to Element#removeClassName

element.removeClassName("show-resource inline");
// is NOT the same as
element.removeClassName("inline show-resource");

// THIS WORKS
element.removeClassName("show-resource");
element.removeClassName("inline");

rajax.js

// RAjax Namespace
var RAjax = {};

// Basic Logger facility that supports logging to
// an HTMLElement, the Firebug console and alerts.
// If provided with a valid DOM id, it will append
// log messages to this element. If it can't find
// the DOM id you provided, it will try to use
// the Firebug console instead (you can make sure
// that this will be found by installing Firebug Lite
// from http://www.getfirebug.com/lite.html website).
// Finally, if it can't find a console Object to log to,
// and you tell it so by passing true as the
// second parameter to initialize, it will fall back
// to those nasty alerts, that can lead to very unfortunate
// situations dependending on which situations (events)
// you use them!

RAjax.Logger = Class.create({

  initialize: function(stream, performAlerts) {
    this.stream = (s = $(stream)) ? s : console; // maybe null
    this.performAlerts = performAlerts || false;
  },

  log: function(message) {
    if(PERFORM_LOGGING) {
      if(this.stream) {
        // Firebug console or HTMLElement present
        if(this.logsToFirebug()) {
          // Logging to Firebug console
          this.stream.log(message);
        } else {
          // Logging to HTMLElement
          this.stream.insert({bottom: this.formattedMessage(message)});
        }
      } else { // no stream present
        // fallback to annoying alerts
        alert(this.formattedMessage(message));
      }
    }
  },

  clear: function() {
    if(this.logsToPage()) {
      this.stream.update('');
    }
  },

  // override this if you need different formatting
  formattedMessage: function(message) {
    return "
  • ” + message + “
  • “; }, debug: function(message) { this.log(message); }, error: function(message) { this.log(”ERROR: ” + message); }, // utility methods logsToFirebug: function() { return !!this.stream.log; }, logsToPage: function() { return this.stream && !this.firebugPresent(); } }); // additional supported callbacks RAjax.EXTENDED_CALLBACKS = [ “onPOSTSuccess” , “onPOSTFailure”, “onGETSuccess” , “onGETFailure”, “onPUTSuccess” , “onPUTFailure”, “onDELETESuccess”, “onDELETEFailure” ];

    Read more »

    javascript string formatting trickery

    // WORKING
    function foo(a, b) {
      return (
        "foo-" +
        a +
        "-" +
        b
      );
    }
    
    // breaks parser ???
    function bar(a, b) {
      return
        "bar-" +
        a +
        "-" +
        b;
    }
    
    // CORRECTLY returns "foo-a-b"
    foo("a","b");
    
    // NO output at all if bar is uncommented !!!
    // => i guess this breaks the js parser
    foo("a","b");
    //bar("a","b");
    

    true or false javascript objects

    >>> var o = new Object();
    >>> !!o
    true
    >>> !o
    false
    >>> !null
    true
    >>> !!null
    false
    
    // example code
    // ...
    hasAuthToken: function() {
      return !!this.authToken; // this.authToken != null
    }
    // ...
    

    that = this;

    var Foo = Behavior.create({
    var that = this; // work around bug with this in inner functions
    this.foo = "bar";
    new Ajax.Request(url, {
    //...
    onSuccess: function(transport) {
    alert(that.foo); // this.foo would not work
    }
    })
    });

    fix to_json for methods ending with ‘?’

    ruby methods are allowed to end with a ‘?’
    while javascript Object properties are NOT.

    This leads to problems when serializing a ruby
    object to_json along with the :methods option
    pointing to a method that ends with a ‘?’

    # Example:
    o.to_json(:methods => :valid?)
    # returns something like
    # { ..., "valid?": true, ... }
    

    Workaround:

    1)
    Always access such a property with the [] operator.
    Which actually is kind of weird because it’s not
    really clear to me, wether this means that ‘?’
    IS actually a valid porperty name in javascript
    albeit one that just cannot be accessed in all
    possible ways javascript syntax would allow it?

    # >>> o = { "valid?": true }
    # Object valid?=true
    # >>> o["valid?"]
    # true
    # >>> o.valid?
    # SyntaxError: syntax error
    

    2)
    try to workaround in rails’ to_json which leads
    to a few problems (possible names clashing, only ruby=>json and not json=>ruby, …)

    module ActiveRecord #:nodoc:
      module Serialization
        class Serializer #:nodoc:
    
          def serializable_record
            returning(serializable_record = {}) do
              serializable_names.each do |name|
                # ------------------------------------
                js_name = name.to_s.delete('?').to_sym
                serializable_record[js_name] = @record.send(name)
                # ------------------------------------
              end
              add_includes do |association, records, opts|
                if records.is_a?(Enumerable)
                  serializable_record[association] = records.collect do |r|
                    self.class.new(r, opts).serializable_record
                  end
                else
                  serializable_record[association] =
                  self.class.new(records, opts).serializable_record
                end
              end
            end
          end
    
        end
      end
    end
    

    get prototype trunk

    svn co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype/trunk
    cd trunk
    rake dist
    

    javascript array manipulation

    >>> a= [1,2,3]
    [1, 2, 3]
    >>> a[a.length] = 4
    4
    >>> a
    [1, 2, 3, 4]
    
    >>> foo = { foo: "foo" }
    Object foo=foo
    >>> bar = { bar: "bar" }
    Object bar=bar
    >>> a = [ foo, bar ]
    [Object foo=foo, Object bar=bar]
    >>> a.without(foo)
    [Object bar=bar]

    lowpro autosave behavior to POST JSON

    Event.addBehavior({
      '.autosave': Behavior.create({
        onchange : function() {
          var source = this.element;
          var name = source.name.split('['); // name according to rails convention
          var model = name[0]; // rails model name
          var resource = model + 's'; // rails resource (TODO better pluralization)
          var id = name[1].substring(0, name[1].length - 1); // rails model id
    
          var authToken = 'authenticity_token=' + $('auth-token').getValue()
          if(name[1].match(/new/)) {
            var url = '/' + resource + '?' + authToken
          } else {
            var url = '/' + resource + '/' + id + '?_method=put&' + authToken;
          }
    
          var inputs = $(source.parentNode).id.split('-');
    
          new Ajax.Request(url, {
            method: 'post',
            contentType: "application/json",
            postBody: Object.toJSON({
              survey_execution_id: $('survey_execution_id').getValue(),
              question_application_input_id: inputs[1],
              time_line_offset: inputs[2],
              value: source.getValue()
            })
          });
        }
      });
    });