[Phpwm] [OT] JavaScript Scope Problem

[Keith Pope]

Why not use something like mootools? It provides an easy way to add events and loop through elements in the dom.

Heres something I have been working on for a wordpress style ajax delete buttons. 

var Core =
{
	init: function()
	{
		$$( document.links ).each( function( link ) {
			switch( link.getProperty( 'rel' ) )
			{
				case 'delete':
					link.addEvent('click', function(event){
						event = new Event(event);
						var msg  = event.target.getProperty( 'title' );
						var answer = confirm( event.target.getProperty( 'title' ) );
						if( answer ) {
							var DelAjax = new AjaxDelete( event.target );
						}
						event.stop();
					});
					return false;
					break;
			}
        });
	}
}
window.addEvent('domready', Core.init );

In this I am getting all the links in the dom $$() and then looping over them to check the rel property link.getProperty( 'rel' ). I then add a new event to the link using mootools event class, which gets around the crappy differences between IE and good browsers.

Mootools also has really cool selectors, so you can do:

// Select all anchors
$$('a');

// Select all anchors inside list items
$$('li a');

// Select all anchors with class "ajaxified" inside an element with "menu" id
$$('#menu a.ajaxified');

// Select all anchors and images with the "title" attribute
$$('a[title], img[title]');

// Select all anchors with the "href" attribute, beginning with "http://" and with "ajaxified" class
$$('a.ajaxified[href^="http://"]');   

And you should checkout the new selectors http://blog.mootools.net/2007/6/11/selectors-on-fire ( in the svn build :) )


Keith Pope
Web Developer

-----Original Message-----
From: pete graham [mailto:petegraham1 at gmail.com] 
Sent: 10 August 2007 16:44
To: West Midlands PHP User Group
Subject: [Phpwm] [OT] JavaScript Scope Problem

I'm writing some Javascript that highlights rows in a html table when checkboxes are ticked (like gmail). However since I initialise the function onload the bottom row in the table always gets highlighted no matter which box is ticked.

Here is an extract of the code:
WindowOnload(function()
{
    var form = document.getElementById('clips_form');
    var re = new RegExp('^mod_[0-9]+$');

    // search through forms children for checkboxes
    for (i=0;i<form.elements.length;i++)
    {
        if (form.elements[i].type=='checkbox')
        {
            // Find checkbox for each member of the group:
            if (re.test(form.elements[i].name))
            {
                box = form.elements[i];
                box.onclick = function(){
                    return highlight_row(box);
                };
            }
        }
    }
});

(I can provide more code or explanations of the code if needed) I remember this irritating me before, ggrrrhhh. There is a work-around/hack that I can't remember which makes JavaScript variable scope behave itself, it involves declaring functions all over the place.

Thaks, Pete

_______________________________________________
Phpwm mailing list
Phpwm at mailman.lug.org.uk
https://mailman.lug.org.uk/mailman/listinfo/phpwm



-- 
allpay.net Limited, Fortis et Fides, Whitestone Business Park, Whitestone, Hereford, HR1 3SE. 
Registered in England No. 02933191. UK VAT Reg. No. 666 9148 88. 

Telephone: 0870 243 3434, Fax: 0870 243 6041. 
Website: www.allpay.net
Email: enquiries at allpay.net 

This email, and any files transmitted with it, is confidential and intended solely for the use of the individual or entity to whom it is addressed. If you have received this email in error please notify the allpay.net Information Security Manager at the number above.