scriptaculous snippets

Solving "Internet Explorer cannot open the Internet site http://xyz.com. Operation aborted."

Tagged ie6, ie7, bug, ajax, prototype, scriptaculous  Languages javascript

This bug exists in IE6 and IE7 and is caused by a JavaScript that tries to modify a tag that hasn't been closed (yet).

For example this one:

<div id="x">
  <script type="text/javascript">
  $('x').replace("wrong");
  </script>
</div>

This example fixes the problem, because the script is defined after the tag that it tries to modify:

<div id="x">
</div>
<script type="text/javascript">
  $('x').replace("correct");
</script>

See BUG: Error message when you visit a Web page or interact with a Web application in Internet Explorer: 'Operation aborted' for a detailed explanation of the problem.

How to create an autocompleted field with jQuery, which looks and feels like autocomplete with Scriptaculous & prototype

Tagged jquery, autocomplete, plugin, scriptaculous, prototype  Languages javascript

There are a lot of autocomplete plugins for jQuery, but not one of them seems to work similarly to Scriptaculous, except for the one at bassistance.de.

To use it follow the instructions found here.

There are a couple of gotchas for ex-scriptaculous users, like that the controller should return the list of tags with a newline character as separator, compared to an HTML list with Scriptaculous.

The other gotcha is the syntax, which is a lot prettier than Scriptaculous:

<script type="text/javascript">
$("#tags-field").autocomplete("/tags/autocomplete", {
    multiple: true,
    autoFill: true,
    minChars: 3
});
</script>

Remember that /tags/autocomplete should render a list of tags delimited by linefeeds:

ruby
php
java
perl
python

Note that jQuery sends the user typed text in a request parameter named 'q', so jQuery makes the following request to your controller: '/tags/autocomplete?q=ruby'.

The list that's shown when you type something can be styled with these CSS rules:

div.ac_results {
    width: 350px;
    background: #fff;
}

div.ac_results ul {
    border:1px solid #888;
    margin:0;
    padding:0;
    width:100%;
    list-style-type:none;
}

div.ac_results ul li {
    margin:0;
    padding:3px;
}

// Hovering over list item
div.ac_results ul li.ac_over {
    background-color: #ffb;
}

The plugins documentation is quite good, but for some reason it was easier to figure out what was needed to get it working by reading the code.