Javascript /PHP thing

[Rdogg]

like i have this php/javascript script but the one of the javascripts bit isnt worrking here is the code:

window.addEvent('domready',function() {
    $$('a.delete').each(function(el) {
        el.addEvent('click',function(e) {
            e.stop();
            var parent = el.getParent('div');
            var request = new Request({
                url: 'lol.php',
                link: 'chain',
                method: 'get',
                data: {
                    'delete': parent.get('id').replace('record-',''),
                    ajax: 1
                },
                onRequest: function() {
                    new Fx.Tween(parent,{
                        duration:300
                    }).start('background-color', '#fb6c6c');
                },
                onSuccess: function() {
                    new Fx.Slide(parent,{
                        duration:300,
                        onComplete: function() {
                            parent.dispose();
                        }
                    }).slideOut();
                }
            }).send();
        });
    });
}); 

now the problem is its all ok until the parent.dispose(); and the slideout() because the , the thing changes color which is meant to happen but then after that the box doesnt "dispose" and "slideOut"
BTW this is MooTools

[jscheuer1]

The keyword parent refers to the window containing the current page, or the current window if there is no window containing the current page. If this is not the sense in which you meant parent, although in certain cases it may still work as intended, in other cases it may not.

You gave no indication in your post about there being frame(s) or iframe(s), which is commonly the situation when 'parent' may be used.

Are you using frame(s) or iframe(s)? If so, in what sense as regards this code, and which? If not, what is your intention as regards (especially 'parent', but also in general) this code?

These answers will be helpful in our ability to assist you. At the same time, in addition to that, it would also be helpful if you could supply a link to the page where you are trying this, or a link to a demo of what you are trying so we could perhaps see what is going on.

[Rdogg]

im not using frames and link:
http://www.rdogg.realisticflow.com/lol.php

[jscheuer1]

OK, well you haven't really answered enough of my questions, but what you have helps a bit. The word parent should not be used as a variable name. It is reserved, it means in this case window (also a reserved word). Use some word that isn't already taken, like elParent.

Anyways, since onRequest fires when you make the request, parent probably will be the value that you set it to, but when the onSuccess fires, if it fires at all, that should be checked with an alert in that part of the code, parent may now refer to the window, which cannot slide or dispose. You should use a browser like Firefox which will tell you on alert what type of object (window or htmlDiv) parent is to alert what you have as parent in the onSuccess:

onSuccess: function() {
	alert(parent);
	new Fx.Slide(parent,{
		duration:300,
		onComplete: function() {
			parent.dispose();
		}
	}).slideOut();
}

If you use a neutral name like elParent as I suggest, you may get an error at that part of the code, as elParent may no longer be defined.

What's still got be scratching my head though is why you even need or would want a request here, you are already on lol.php and you are doing nothing as far as I can tell with the content that the request will fetch. The action of making the request will involve a slight delay, but an onComplete added to the Tween with or without a timeout, or even a timeout alone to fire the Slide could provide a delay.

I'll play with the code a bit myself to see what it actually is doing.

[jscheuer1]

OK, as far as I can tell the main problem is that you have no Fx.Slide. Mootools comes in various compressions, which you may download here:

http://mootools.net/download

And has available various optional units which you may get here:

http://mootools.net/more

Fx.Slide is one of these optional units, and it appears you do not have it.

Another issue is that the onSuccess may not be firing. I changed mine to onComplete and onFailure, both of these worked, but with a live page requesting itself, you would think that onSuccess would fire.

Still, as I asked in my last post, "Why a request?" The whole thing could (since Fx will automatically queue unless specified not to) be done as:

<script type="text/javascript">
window.addEvent('domready',function(){
	$$('a.delete').each(function(el){
		el.addEvent('click', function(e){
			e.stop();
			var parDiv = el.getParent('div');
			new Fx.Tween(parDiv, {duration:300}).start('background-color', '#fb6c6c');
			new Fx.Slide(parDiv, {duration:300, onComplete: function(){parDiv.dispose();}}).slideOut();
			});
	});
});
</script>

[Rdogg]

thanks, works now
downloaded the more thing for fx.slide

[jscheuer1]

Not sure what code you are using now, but regardless - I've discovered that Fx or Fx.Tween, or more likely Fx.Slide creates a wrapper div for the element, either if one doesn't exist, or as a matter of course. In any case though, since in IE all div elements have a default font-size property of 9pt, this causes a gap to appear. So instead of disposing of the parent div, one should dispose of the parent div of the parent div:

window.addEvent('domready',function(){
	$$('a.delete').each(function(el){
		el.addEvent('click', function(e){
			e.stop();
			var parDiv = el.getParent('div');
			new Fx.Tween(parDiv, {duration:300}).start('background-color', '#fb6c6c');
			new Fx.Slide(parDiv, {duration:300, onComplete: function(){
					parDiv.getParent('div').dispose();}
				}).slideOut();
			});
	});
});