#296 new
algisimu

Autocompleter: use initialize() and $super() instead of baseInitialize()

Reported by algisimu | July 21st, 2010 @ 02:10 PM

// Prototype JavaScript framework, version 1.6.0 // script.aculo.us controls.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009 // script.aculo.us effects.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007

We have two address forms on our page and we encapsulate Ajax.Autocompleter to show a list of Zip codes or Cities depending on the field. Basic JS structure is:

Address_Autocompleter = Class.create({

initialize(...) {};
...

});

= Class.create(Address_Autocompleter, {

initialize($super, ...) {
    $super(...);
    ...
    new Ajax.Autocompleter(...);
}

});

= Class.create(Address_Autocompleter, {

initialize($super, ...) {
    $super(...);
    ...
    new Ajax.Autocompleter(...);
}

});

And then the page contains:

Event.observe(window, 'load', function() {

new Autocompleter_Address_Zip(...); // Passing element from the first form;
new Autocompleter_Address_Zip(...); // Passing element from the second form;
...

});

On FF (v.3.6.6) both forms works as expected - autocompleter is attached to both Zip fields, but on IE7/8 autocompleter is attached only to the form which is higher in the DOM tree. Took me some time to find out the solution for this problem:

  1. Autocompleter.Base.baseInitialize() should be renamed to Autocompleter.Base.initialize() - simple initialize method as in all other classes.

  2. Ajax.Autocompleter = Class.create(Autocompleter.Base, {
    initialize: function(element, update, url, options) {

    this.baseInitialize(element, update, options);
    ....
    
    }, .... });

has to be replaced with:

Ajax.Autocompleter = Class.create(Autocompleter.Base, {

initialize: function($super, element, update, url, options) {
    $super(element, update, options);
    ....
},
....

});

This means that prototypes mechanism to implement inheritance between classes should be used. Haven't researched why this helps, but it does.

Comments and changes to this ticket

  • algisimu

    algisimu July 21st, 2010 @ 02:21 PM

    • Assigned user set to “ronin-15560 (at lighthouseapp)”

    OK, fixed formmating issues.

    • Prototype JavaScript framework, version 1.6.0
    • script.aculo.us controls.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
    • script.aculo.us effects.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007

    We have TWO address forms on our page and we encapsulate Ajax.Autocompleter to show a list of Zip codes or Cities depending on the field. Basic JS structure is:

    Address_Autocompleter = Class.create({
        initialize(...) {};
        ...
    });
    
    Address_Autocompleter_Zip = Class.create(Address_Autocompleter, {
        initialize($super, ...) {
            $super(...);
            ...
            new Ajax.Autocompleter(...);
        }
    });
    
    Address_Autocompleter_City = Class.create(Address_Autocompleter, {
        initialize($super, ...) {
            $super(...);
            ...
            new Ajax.Autocompleter(...);
        }
    });
    

    And then the page contains:

    Event.observe(window, 'load', function() {
        new Autocompleter_Address_Zip(...); // Passing element from the first form;
        new Autocompleter_Address_Zip(...); // Passing element from the second form;
        ...
    });
    

    On FF (v.3.6.6) both forms works as expected - autocompleter is attached to both Zip fields, but on IE7/8 autocompleter is attached only to the form which is higher in the DOM tree. Took me some time to find out the solution for this problem:

    1. Autocompleter.Base.baseInitialize() should be renamed to Autocompleter.Base.initialize() - simple initialize method as in all other classes.

    2. Replace

    Ajax.Autocompleter = Class.create(Autocompleter.Base, {
        initialize: function(element, update, url, options) {
            this.baseInitialize(element, update, options);
            // Rest of the code
        },
        // Rest of the code
    });
    

    with:

    Ajax.Autocompleter = Class.create(Autocompleter.Base, {
        initialize: function($super, element, update, url, options) {
            $super(element, update, options);
            // Rest of the code
        },
        // Rest of the code
    });
    

    This means that prototypes mechanism to implement inheritance between classes should be used. Haven't researched why this helps, but it does.

  • hsc result

    hsc result April 2nd, 2019 @ 04:11 PM

    know-how for plainly being caring and moreover to settle on positive fabulous applications the overwhelming majority of the folks actually need to acknowledge with reference to.
    CBSE Exam Result 2019 SSC Result 2019 Date

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages