[Phpwm] [OT] JavaScript Scope Problem

[Keith Pope]

Yeah mootools has everything you should need, the Ajax stuff is nice :) 

Heres my JS script:

//core object is called once the DOM is loaded @see window.addEvent
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;
			}
        });
	}
}

//ajax delete class
var AjaxDelete = new Class( {
    initialize: function( target ) 
    {
		this.row  = target.getParent().getParent();
		this.href = target.href;
		this.AjaxStart();
    },
    AjaxStart: function()
    {
    	var data = { XHR_req: this.href };
      //this will ajax request /admin/ajax/index/?XHR_req=/admin/users/delete/id/1
    	var myAjax = new Ajax( '/admin/ajax/index/', 
    						   { method: 'get', 
    						     onComplete: this.AjaxComplete.bind(this), //bind used to keep scope this
    						     onFailure:  this.AjaxFailed,
    						     data: data
    						   }
    						   ).request();	
    },
    AjaxComplete: function( response )
    {
    	if( response == 'success' )
    	{
	    	var fx = new Fx.Styles(this.row, {duration: 1000,
	    									  onComplete: function(){ this.row.remove(); }.bind(this),
	    									  transition: Fx.Transitions.linear
	    									  });
			fx.start({
			    'background-color': ['#fb9393', '#f8f8f8'],
			    'opacity': [100, 0]
			});
    	}
    	else 
    	{
    		alert( response );
    	}
    },
    AjaxFailed: function()
    {
    	alert( 'Ajax delete failed, please try again' );
    } 
});
window.addEvent('domready', Core.init );

And the html:

<td><a href="/admin/users/delete/id/<?php echo $this->Escape( $user['userID'] );?>" rel="delete" title="Are you sure you want to delete user <?php echo $this->Escape( $user['displayname'] );?>?" class="delete">Delete</a></td>


This works by first adding the click event to the anchors with the rel="delete", then it uses the title as the confirm message ( in Core ).

When the user confirms, the ajaxdelete class takes the event.target and gets the tbl row dom element and the anchor href. Then we send the ajax request using mootools Ajax class.

The ajax request in my case goes to a proxy script which then delegates the request to the correct controller/action in the MVC. But the general idea is that in the anchor the link should go to the non-ajax delete script (so that if JS is disabled it will still work), then the proxy script uses that href to redirect the request to the ajax delete script.

The ajax delete script simply echos out either echo strings or "success", this is then handled by AjaxComplete method.

Hope this makes sense it a very quick explanation :)


Keith Pope
Web Developer

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

Hi Keith,

That looks really useful, I'll have to check out mootools today if I have time. Coincidentally I need to add a Ajax delete facility to my application too.

Has mootools got functionality built in to assist with Ajax or are you using something else for that?

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.