Tag Archive for 'JavaScript'

AddThis and HTTPS / SSL support – ‘Do you want to view only the webpage content that was delivered securely?’

29612v1 max 250x250 AddThis and HTTPS / SSL support   Do you want to view only the webpage content that was delivered securely?
Image via CrunchBase

Yesterday I wrote about a problem I came across using AddThis service. Today I had a new issue.

This is an example of the code generated by AddThis:

| More

It’s said what you need to do is to include it in your page and AddThis will do all the work for you. Now, it didn’t in my case…

Continue reading ‘AddThis and HTTPS / SSL support – ‘Do you want to view only the webpage content that was delivered securely?’’

AddThis on IE – Object doesn’t support this property or method

29612v1 max 250x250 AddThis on IE   Object doesnt support this property or method
Image via CrunchBase

AddThis is a great service – it allows robust integration with online services, e.g. Facebook, Twitter, LinkedIn, del.icio.us. What you need to do is to get your button’s code on AddThis homepage and use it in your project. Additionally you can configure the widget; you can refer to AddThis API, where you can find needed information and examples.

I created a component which I included on a couple of pages. I was very happy to use it until I started testing my pages on different browsers. It turned out there was a problem on IE (only; why didn’t that surprise me…); in two of three places it worked just fine but in one place I was getting JavaScript error:

jserror 350x234 AddThis on IE   Object doesnt support this property or method

As usual JavaScript error message on IE gave little (if not zero) information on the error. The only statement to give was the problem was on AddThis side. Unfortunately debugging their code was not the best case because the referenced library was obfuscated and (rather not) dedicated to a human being.

Continue reading ‘AddThis on IE – Object doesn’t support this property or method’

IE7 – problems with onchange event for text field when auto complete used

Imagine you have a text field in the form which is defined as below

<input type="text" name="fake" id="fake" onchange="doSth()" />

Apparently doSth() will not be called at all if you are running IE7 and use its auto completion mechanism. If you bind doSth() with onblur that won’t solve the case either.


The best solution is to call doSth() only when the form is submitted. That seems to be the safest option.

Unfortunately, there might be cases when doSth() must be called immediately after leaving the input, not only at the submit time. Any ideas here?

How to always open a new page in a new window with JavaScript?

In order to always open a new page in a new window you can employ window.open function of JavaScript:


Note: If you have a number of links that use this JavaScript snippet and want to open each of them in a separate window remember to set UNIQUE_TITLE to a unique string for each of them. If those strings are the same, the new window will be created only once and it will be reused every time you click such link.

FCKEditor – how to access the HTML content from JavaScript?

Imagine you have a form in which you use FCKEditor as an inline HTML editor. So, inside script tag you have this:

var oFCKeditor = new FCKeditor('body_html');
oFCKeditor.BasePath = "A_PATH_TO_FCKEDITOR";
oFCKeditor.ToolbarSet = "Basic";

As you know, this creates a textarea with id set to ‘body_html’ and make it look like an inline HTML editor.

Going forward, you would like to receive the HTML code that represents the content of this textarea, and that you want to do this in JavaScript. In order to do that you need to follow FCKEditor API, so do somethink like this:


Maybe it’s obvious but it took my a while to find out how to do this…

Microsoft JScript runtime error: Object doesn’t support this property or method.

Yesterday I spent two hours analyzing this issue, which of course I had only with Internet Explorer…

As the background: I wrote a library that would make a table sortable and paginable. I decided to use prototype.js and script.aculo.us. I tried to test the result not only in Firefox which I use by default, but then I simply forgot… Then, when I run the page I got the error:

Microsoft JScript runtime error: Object doesn’t support this property or method.

At the end of the day, (after cutting JavaScript files into slices) I found the reason. All because I created HTML elements like follows (this example uses Builder of script.aculo.us):

$(this._sPaginationSecId).appendChild(Builder.node('span', { class: 'disabled' }, '<'));

If you look at that closer, you will find out that class is not put inside apostrophes (‘). Changing the above snippet to the one below will solve the case:

$(this._sPaginationSecId).appendChild(Builder.node('span', { 'class': 'disabled' }, '<'));

Be careful with defining properties like href and class with Builder.node() (of script.aculo.us) and new Element() (of prototype).

It’s also possible to define class name of a DOM object created with prototype.js or script.aculo.us using className as a parameter (instead of od 'class'):

$(this._sPaginationSecId).appendChild(Builder.node('span', { className: 'disabled' }, '<'));
 Microsoft JScript runtime error: Object doesnt support this property or method.

JavaScript: what if nested ‘this’ doesn’t work?

Note: Examples used in that post require usage of prototype.js.

Imagine you have a JavaScript class with some features related to the current view. One of the method in that class is supposed to add an observer on all anchors marked with class “delete”. That observer is also defined in this class. In other words, you have a number of “delete” links (similar to one below) and you want to register an event handler that would fire when either of those links is clicked.

The link exmple:

<a href="#" class="delete">delete</a>

Let’s assume the aforementioned methods are defined as follows:

registerDeleteHandlers: function() {
	$$('a.delete').each(function(anchor) {
		anchor.observe('click', this.deleteItem);
deleteItem: function(event) {

As you would discover the handler wouldn’t be registered… It’s because this inside the inner function (which really registers the observer) is binded to a different context!

Simple solution (smarter)

Define the registerDeleteHandlers function as follows:

registerDeleteHandlers: function() {
	$$('a.delete').each(function(anchor) {
		anchor.observe('click', this.deleteItem);

Another way around

Inside the registerDeleteHandlers function you can bind this to a temporary variable and use it in the inner function instead of this. So the registerDeleteHandlers function would look like that:

registerDeleteHandlers: function() {
	var self = this;
	$$('a.delete').each(function(anchor) {
		anchor.observe('click', self.deleteItem);

Writing a Firefox add-on

I’ve created my first plugin for Firefox. It turned out to be easier than I thought. However, it was so easy beacause I didn’t have to interfere Forefox menu. If I hafd to, I would use XUL, which would be tough.

What I was supposed to do, was to add a link Post to notitio.us to articles on wiki that use MediaWiki engine. The link should be placed in the right menu in a box, where link Help is. I decided to use only JavaScript and test the code with GreaseMonkey plugin for Firefox. In short, GreaseMonkey allows to run a specified JavaScript on declared web pages.

So I ended up with the following JavaScript code:

// ==UserScript==
// @name            IKHarvesterWikiPlugin
// @namespace    http://notitio.us/IKHarvesterWikiPlugin
// @description    Adds to Wikipedia pages "Post to notitio.us" link
// @include         http://*wiki*/*
// @exclude        *url=*
// ==/UserScript==

(function () {
var IKHarvesterWikiPlugin = {

    addPostToNotiotiousLink: function() {
        var li = document.createElement("li");
        li.setAttribute("id", "notiotious");
        li.setAttribute("title","Added by IKHarvester plugin");
        li.innerHTML = ' \
            <a title="Post to notitio.us" \
            window.location.href+'\" \   
            style="color:red; font-weight:bold;">Post to notitio.us</a>'

I’ve tested with GreaseMonkey and it worked. So it could be used by anyone who used GreaseMonkey plugin. Then I stared to think how to create a real add-on to Firefox, an xpi file added to Firefox. I’ve found User Script Compiler, a service that compiles GreaseMonkey scripts to real add-ons. Compilation finished with success, and the plugin is available here

So, GreaseMonkey and User Script Compiler allow to create Firefox add-ons. The former can be used during development and testing stage, while the latter generates the final add-on. User Script Compiler creates JavaScript, xul, and other files that are required so that the plugin works. However, you can do it this way only if you don’t plan to add items to Firefox menu and taskbar. Actually, this way you can create only simple extensions. Anyway, sometime it’s just what you want icon smile Writing a Firefox add on

AJAX activity indicator

Users are familiar with indications of work performed in background since first versions of MS Windows. Besides being fancy, they are also informative.

AJAX, a Web 2.0 technique, aim at exchanging only small amounts of data with a server; this should be performed behind the scenes. If so, why not expose the moments when user interaction brings about reqest and response from a server? Remeber my previous post about using prototype.js for making AJAX request? I use prototype also for indicating background actions on web pages that support AJAX.

You’d never guess how easy it is to such indicator.

First, you must register an action which accurs in case of an AJAX-related event. The best way to do that is add the following code in the head section of the HTML code (remember to include prototype.js library before it!):

<script type="text/javascript">
    onCreate: function(){ Element.show('spinner')}, 
    onComplete: function(){Element.hide('spinner')}

Then, further in the code inside body section, add this:

<img alt="spinner" id="spinner" src="gfx/spinner.gif" 
    style="display:none;" />

Actually, it’s all. Whenever you click an object which sends an AJAX request to the server, the indicator defined by img appears and is visible until the response is obtained.

Wonder, how to create an indicator animation? Generate one on ajaxload.info

Using PUT and DELETE methods in AJAX requests with prototype.js

Whenerver I write JavaScript I use prototype.js. I find it brilliant, especially when you deal with AJAX. With this library it’s easy to create an AJAX request and process its response from the server.

To send an AJAX request you create a following HTML code:

<a href="#" id="ahref">a link</a>
$('ahref').onclick = function() {
    new Ajax.Request('/some_url', {
        onSuccess: function(transport){
            var responseXml = transport.responseXML;
        onFailure:function(){ alert('Something went wrong...') }
    return false;

This way, you create a request with GET and POST method. Recently, while developing a SOA system based on REST (REpresenational State Transfer), I faced a problem of creating requests also with other HTTP methods.

In short, REST allows using a few HTTP methods. The most popular are:

  • GET – for obtaining representation of a resource
  • POST – for updating or creating a representation of a resource
  • PUT – for creating a representation of a resource
  • DELETE – for removing a representation of a resource

Again, prototype.js helps a lot. Since version 1.5, it is possible to use all those methods (formerly, it supported only GET and POST). PUT and DELETE methods are realized by tunneling over POST. Also, “_method=METHOD_NAME” is added as a query parameter with the request. The only thing to do is to prepare relevant logic on the server side to manage the request.

Suppose you have a servlet that allows adding a resource to a database and it is invoked with the following URL:

A simplified definition of a Ajax.Request object in prototype would be as follows:

new Ajax.Request('/some_url', {

In the JavaServlet, you obtain the request and manage it like that:

protected void doPost(
    HttpServletRequest req, 
    HttpServletResponse res) 
    throws ServletException, IOException {
    if (req.getParameter("_method") != null 
        && "put".equalsIgnoreCase(req.getParameter("_method"))) {
        doPut(req, res);