Recent Posts by Christophe Porteneuve

Topic: Prototype and script.aculo.us / ShiftClick to select a range of check boxes

Hey Johan,

Well your implementation works alright. It makes little use of “comfort methods” so it’s pretty fast as it is. I have a few remarks, however:

1. I would explicitly declare lastSelected, at least as a global variable, ideally in a more scoped/namespaced way (perhaps just as a property of the handleClick function, which you’d then access internally using, for instance, arguments.callee.handleClick).
2. I fail to see why you’d want the two first checks; I don’t see a use case where they’d be useful.
3. Instead of nesting if’s, I tend to prefer inverting the conditions and short-circuting with return calls to keep it leaner and avoid remote else clauses.
4. As of Prototype 1.6, observe calls the handler within the binding context of the element you observed on, so instead of going $('frmStudentList') (btw, are you coming from a Delphi background to use this naming scheme? :-)), you can just use this.
5. getInputs already returns an actual array, so the wrapping $A call is superfluous.
6. I would consider the last click always to define lastSelected, even when it’s a shift-click.

So I might rephrase your function like this:

var lastSelected = null;
handleClick: function(e)
{
    var origin = e.element();
    if (origin.nodeName.toLowerCase() != 'input')
        return;
    if (!e.shiftKey) {
        lastSelected = origin;
        return;
    }
    var checkBoxes = this.getInputs('checkbox');
    var first = checkBoxes.indexOf(origin);
    var last = checkBoxes.indexOf(lastSelected);
    if (-1 == last) {
        lastSelected = origin;
        return;
    }
    var start = Math.min(first, last), end = Math.max(first, last);
    for (var index = start; index < end; ++index)
        checkBoxes[i].checked = lastSelected.checked;
    lastSelected = origin;
} // handleClick

There are several tricks we could use to size it down a little, but they’d be somewhat detrimental to speed, so the trade-off isn’t so good.

‘HTH

Topic: Prototype and script.aculo.us / ShiftClick to select a range of check boxes

Hey Johan,

No time to reply just now, but the problem is interesting and I think I see a simple solution. Ping me by email tomorrow and I’ll try to come up with something here.

Cheers,

Topic: Prototype and script.aculo.us / Draggable Blocks Size problem

Hey there,

These forums are not exactly a support list, especially outside the context of the book itself. Just now, I won’t have the time to dive into your problem and help. I suggest you take the following steps:

1. Create a minimalist page that reproduces your issue, preferrably a single file (except for the libs)
2. Put it somewhere online.
3. Subscribe to the new official support list
4. Ask for help on it, linking to our online page.

I hope you’ll get a good reply!

Topic: Prototype and script.aculo.us / prototype toggle with image rollover?

Well, that’s a way to have it work. I dislike inline event handlers, but they sure work in this case. And just changing the src attribute when reacting to events is bound to be faster and feel smoother than a full-blown update call that will cause a larger DOM update.

What I don’t really get is why you keep using update with static contents instead of having the markup present in the page already, perhaps hidden to start with, and just toggle visibilities…

Topic: Prototype and script.aculo.us / DOM

Oh.

The archive wasn’t regenerated after the recent typo fix in one of the early code blocks. This only borked IE, are you using IE? This is all due to a superfluous comma before closing the nodes array. It’s been discussed in this thread already. I’ll ping PragProg to update the compressed archives.

You’ll have to explain “static”. Do you mean it is bound to elements already present in the DOM at load time? Going dynamic simply means that after injecting your form elements in the page’s DOM, you can register event handlers for them using observe calls, instead of doing so by name and at early DOM loading time. That’s pretty much all there is to it.

Also, it’s been my experience that in dynamic, user-controled forms, most of the event-related behavior is not field-specific, but by field kind. So perhaps using appropriate field classes and event delegation at the whole form’s level would be a win, too.

Topic: Prototype and script.aculo.us / DOM

Hey,

So sorry, but I have no idea what you’re talking about… Could you perhaps illustrate your need?

Topic: Prototype and script.aculo.us / Effect.Highlight Bug

Hey Kevin,

‘sounds to me like there was some weird overwrite+typo on your effects.js file: “toRngorPart” should read “toColorPart,” which bears the hallmark of an overzealous search-and-replace of “Col” to “Rng” (perhaps you did a project-wide change instead of a file-wide change?)

Topic: Prototype and script.aculo.us / Chapter 16 - AutoCompletion

Hey Bharat,

Well, I finally found time to wrap up the article and full demo page: check it out

I hope this addresses your questions.

Topic: Prototype and script.aculo.us / Chapter 17: Builder

Regular IE “debugging:” load the page with individual JS messages enabled, see the line being claimed as faulty, then go to the JS file, sprinkle alert calls liberally, and zero in slowly on the issue…

Fortunately, the script for this page is pretty short :-)

Topic: Prototype and script.aculo.us / Chapter 17: Builder

Hey Bharat,

Thanks for the heads up! I’m astounded this hasn’t cropped up before… I investigated and posted an errata notice on the book’s blog.

Topic: Prototype and script.aculo.us / Chapter 16 - AutoCompletion

Hey Bharat,

Your request actually gave me an idea for a fuller post on the book’s blog. Obviously it’s taking some time to write, and I have precious little of it, but it’s moving ahead nonetheless. Keep an eye on the book’s blog for it, it’s going to be the next post, and will discuss rich contents in Ajax autocompletion and how to leverage it with predefined options and afterUpdateElement.

Cheers,

Topic: Prototype and script.aculo.us / Praise and suggestion

Hey Matt,

Well, thanks for the praise! I’m delighted the book is helpful to you.

As for your suggestion, it’s a pretty good idea. I’ll keep it around for the second edition, and tuck it somewhere between the intro and the Prototype part (or, at worst, put it up as first appendix and reference it throughout the book).

Topic: Prototype and script.aculo.us / Array.indexOf

Hey,

So your point, I guess, is that our indexOf is incompatible with the upcoming indexOf in recent JS as found in Mozilla and IE8, right? That’s a fair point, but the best place to post about it and stir something to get done would be the Prototype-Core ML (available to all): http://groups.google.com/group/prototype-core. I advise you post this material there, with perhaps some intro like “hey! we should upgrade this!”.

Thanks and cheers,

Topic: Prototype and script.aculo.us / Adding a drop down menu

Hey Mike,

Essentially, you should try and style your menu items so that they appear in the proper positions by default, all shown. Use a first-level list for the top navbar, and inner lists inside the <li>’s that have submenus. Then, you should hide the inner lists by default (using inline style="display: none;"), and toggle them using mouseover/mouseout on the relevant <li>’s in the top list.

The markup would go like this:

<ul id="navBar">
  <li><a href="…">No Sub Menu</a></li>
  <li>
     <a href="/cat2">Submenu here</a>
     <ul id="cat2">
       <li>Subitem 1</li>
       <li>Subitem 2</li>
       …
     </ul>
  </li>
  …
</ul>

Then you should style those using a position: relative for list items, and a position: absolute with proper top/left positioning for inner lists. Perhaps something alone these lines:

#navBar li { position: relative; height: 1em; padding: 0.5em; }
#navBar li ul { position: absolute; top: 2em; left: 0; }
…

When it renders well on all browsers you want to support, add the inline hiding and event-based hide/show calls.

‘HTH

Topic: Prototype and script.aculo.us / Adding a drop down menu

Have a look at the SCTI website I did a while back, which does what you want. It uses semantic markup for the menu (nested lists) and JavaScript to react to mouseover/mouseout’s by hiding/showing the sublists. CSS positions the menus. The script (/js/scti.js) could be taken one step further by using event delegation + target identification instead of attaching handlers to every single top-level menu item.

‘HTH

Topic: Prototype and script.aculo.us / Section 9.4 Polling: Ajax.PeriodicalUpdater

Hey Bharat,

I believe the issue you have with IE7 is that you may have not configured it out of its stupid defaults, so that it would check the server on each request in order to know whether to invalidate its cache or not. The default setting says something like “automatic,” which should more properly be worded “moronic.”

Forcing post is a workaround to force IE7 to ignore its cache (what’s too bad is, it will effectively defeat caching; on a GET, the server would return a 304 Not Modified when appropriate, thanks to the ETag mechanism). At least I believe so.

About the connection closed thing: perhaps you closed IE right when it was performing a POST to the server? As connections are not supposed to be Keep-Alive, that may explain it. Also, I can’t vouch for JRuby’s properly running WEBrick, but I suspect it does fine all the same.

Topic: Prototype and script.aculo.us / dom example does not work in IE 7?

Sharing is what we write books and speak at conferences for, man :-)

Looking forward to hook up at TAE, then!

Topic: Prototype and script.aculo.us / dom example does not work in IE 7?

Hey Bharat,

I’m glad you enjoy the book!

As for your questions:

1. Effectively debugging JS in MSIE is a friggin’ mess. Basically, either you have VisualStudio installed and plug into IE with it, or you’re pretty much out of luck. The IE Developer Toolbar is a joke, and whatever “features” it has don’t extend to JS anyway. Still, there are new 3rd-party plugins being released quite often, and I can’t keep on top of it all, so perhaps there is a better alternative these days. If there were, I’d love to know about it! The way I go about frontoffice dev these days is: develop, debug, tune and hone with Firefox and Firebug, double-check on Safari 3 and Opera 9, then test on IE7, then on IE6. Experience has me put a few extra tidbits here and there for IE’s sake when I script, but Prototype handles most of the complexity of this for you, so it’s just a matter of avoiding certain well-known issues (mostly related to table components and <select> stuff). Generally, the majority of headaches between IE and the rest of the world are more about CSS than they are about JS, once you use a well-honed JS lib.

2. I don’t know, really. IMHO, the book’s DOM chapter strives to explain away any potential complexity or “trick” in the code, so it’s more a matter of carefully reading the surrounding text when you try the code out. If there are pending questions after that, you could ask about them here or on the book’s blog, for instance as comments on the relevant Neuron Workout solutions post.

3. What JS lib you use is orthogonal to whether you use Rails or not. I prefer Prototype over jQuery but that’s largely a question of coding style. jQuery works just fine with any backend, as does Prototype. What framework you’re using server-side shouldn’t constrain your client-side choices (except perhaps in the ASP.NET world, but even there, most people ditch Ajax.Net to use another, more established lib such as Prototype, jQuery or Dojo). Still, the nice thing about using Prototype is that it’ll let you use RJS, for instance. And while you could load Prototype for RJS purposes, and jQuery for your own custom scripting, it feels pretty heavy-handed.

‘HTH

Topic: Prototype and script.aculo.us / dom example does not work in IE 7?

Hi Bharat,

First, know that there is an issue with the script as present in the book, that b0rks some behavior in IE: there’s an extraneous trailing comma at the end of the Staff constant definition. The last comma in this fragment is incorrect. If you have it, strip it, then reload with no cache and try it again.

Second, if you still have issues, as this is a fairly large example, the first thing to try is the online example (except for this stupid comma, which should be fixed online pretty soon).

You can download all the files from its directory, correct the comma, and try that. I assure you this works on all major browsers. You would then diff against your own copy and see whether you perhaps mistyped something?

‘HTH

Topic: Prototype and script.aculo.us / Slider and drop down lists

Hey Abbas,

Well, I’m not going to guide you through a complete UI control creation, this is not what these forums are for, and I lack the time.

BUT, the product browser you’re linking to is, indeed, based on Prototype and script.aculo.us (through the Control.Slider class), with a couple nice UI touches on it, such as putting category labels on top of the handle image, and dissociating the actual handle (invisible) and the image to let the “visible” one slide around when you click.

You can get inspiration on how to replicate this cool widget by looking at its source code (it’s in http://www.apple.com/global/scripts/product_browser.js), but be sure to avoid just copy-pasting it: the code belongs to Apple. At any rate, it probably relies on data structures not quite fit for your own purposes.

You’ll probably need to dive into the Sliders chapter around the end of the book before, though.

‘HTH

Topic: Prototype and script.aculo.us / How to create traggable columns with Prototype and Scriptaculous

Hey Geshan,

Can you clarify what you mean by “columns” and “rows,” exactly?

Effectively dragging table rows is kind of a nightmare for now, as various browsers have a very different level of support for <tr> layout tricks… The article you refer to doesn’t even work properly on the latest update of FF2, for instance.

As for columns, they’re not represented by an element in HTML, so you can’t make a whole column draggable, as there’s no such element as the column itself. If you need to make columns draggable, it has to look like a column, but actually be something else codewise. Perhaps what you’re looking for is just a series of left-floating <div>’s with inner tables?

Perhaps HTML tables are mandated in your page because of the semantics of the underlying data, but if you don’t mind wrecking the semantics of the page, you can use alternate markup and CSS tricks to make it all draggable. It becomes pretty easy then: just consider what floating elements can do, when dragged!

Also, if you’re more into just creating a portal-like interface, have a look at Sébastien Gruhier’s Prototype Portal attempt.

Topic: Prototype and script.aculo.us / Replace dashes with other text

Hey Mike,

I put a minimalistic demo page for it up at http://tddsworld.com/questions/

Let me know if that makes it.

Topic: Prototype and script.aculo.us / Drag & drop question about revert behavior

Glad I could help. Keep reading! :-)

Topic: Prototype and script.aculo.us / Drag & drop question about revert behavior

Hey Jeff,

I believe the special 'failure' value for the revert option is exactly what you’re looking for: it will trigger the revert effect only if the drop failed (if the piece was refused on dropping). This occurs after any custom checking on the Dropppables side (including custom accept/@containment@…

Let me know if that cut it out for you!

Cheers,

Topic: Prototype and script.aculo.us / binding? scoping?

That’s because you used responseText instead of responseJSON, tss tss…