PDA

View Full Version : Anyone use scriptalicious && Prototype? I need help :)


ScareCrowe
06-29-2007, 06:01 PM
So, I am starting to play around with the Scriptalicious (http://script.aculo.us/) and Prototype (http://www.prototypejs.org/) libs.

( If you haven't already, you're missing out! )

Anywho, I am able to get them to work fine independently, but I have to call each one seperately. This works, but does not give me the desired effect.

Basically right now I assign the onClick event with 2 sep calls like so:
onClick="new ajax.updater('divID','scriptURL');new effect.hightlight('divID');"

I've been playing around with the before and after 'callbacks' for each script, but still can't get it right.

Basically, What I want to happen is:
onClick: do an effect, send ajax request, do another effect.

So, what user will see when they click will be let's say, the div fades out, then ajax is called filling now hidden div with new content, then the hidden div slides down into view.

I'd like to just use one method call in the onClick event like so:
onClick="new ajax.updater('divID',{onCreate:effect.fade('divID'),onComplete:effect.BlindDown('divID')});"

What I am getting now is the ajax is called first, it populates new info in div, then the effects are triggered! So user sees new info pop in then it fades out then slides back in, lol!

Anywho, I hope someone can help point me in the right direction!

Thanks in advance!

ps. the code snippets here are just examples so you can get the gist of what I'm doing, I know they aren't syntatically correct ;)

ScareCrowe
07-02-2007, 08:51 AM
Ok, it took a little more wrangling, but I found the solution on my own!

Seems I was using the correct method (to a degree), but my callback functions were not created correctly so didn't work.

Instead of creating your functions like so:
function myFunc(){
//do this
}
You need to create them like this instead:

myFunc = function(){
//do this
}


You would call this in the ajax.request method like so:

<p onClick=" onClick="new Ajax.Updater('myElement', 'script.php?param1=1', { method: 'get', onComplete:MyFunc}">Click Me</a>


It does not perform the actions in the order I wanted in my previous post as the ajax is triggered first ( even using onBefore ). When the ajax call is triggered, the current HTML in the div is wiped, repopulated with the new data, then the effect happens.

Hopefully this will help someone else!