View Full Version : script.aculo.us Having issues using Script.aculo.us to render an Effect of AJAX server request

08-26-2009, 02:03 PM
I currently have a HTML selection list box. When you select something from the drop down menu and click a button it sends an AJAX request to the server (using prototype framework) retrieving additional information based on what was selected from the drop down menu and renders it in the browser, which works fine.

I'm trying to get a little creative and when the information is rendered in the browser I would like to use a Script.aculo.us effect like Effect.BlindDown. When I implemented this in my script it worked fine after I made the first initial AJAX call. But the issue was with the first call. The first piece of data coming back once the browser is refreshed isn't cooperating with my Script.aculo.us Effect.BlindDown. There is flickering going on. Once again after I retrieve additional information after the first call everything works fine. I was wondering if anybody had any ideas.

08-26-2009, 04:08 PM
at what point are you calling the blinddown? can you paste some code?

09-01-2009, 10:36 PM
My biggest challenge is trying to figure out how to apply script.aculo.us effects to information that I'm getting from ajax calla, as I recieved the information. For example the following code retrieves a nested JSON object from the server. I'm able to successful parse through the js Object and create a table of the NBA teams selected from the drop down menu as well as retrieve the relative address for the logo image, by clicking a button. But what if I wanted to use the Effect.Appear on table (<div id="view"></div>) and Effect.BlindDown on the logo( <div id="logo"></div>) as the information is presented to the browser, how would I go about doing this?

Code that retreives js Object

function doSomething(event)
var val = $('NBA').value;

var request = new Ajax.Request('getNBA.php',
onSuccess: function(request)

var team = request.responseJSON;
var container = $("view");

var labels = [ "Name", "Position", "Height", "Weight", "College" ];

var table = document.createElement("table");

var tCaption = table.createCaption();

tCaption.appendChild( document.createTextNode("NBA :: Allstars Statistics-Table" ));

var tHead = table.createTHead();

var addCell = function( row, label )
return row.insertCell( -1 ).appendChild( document.createTextNode( label ));

var xrow = tHead.insertRow( -1 );

for ( var i = 0; labels[ i ]; i++ )
addCell( xrow, labels[ i ]);

var tBody = document.createElement("tbody");

table.appendChild( tBody );

for (var info in team)
for (nba in team[info].Players)
xrow = tBody.insertRow(-1)

for(var westcoast in team[info].Players[nba])
addCell(xrow, team[info].Players[nba][westcoast]);


new Effect.Appear("view");

var logo = $("logo");

var logo_url = team.TeamName.TeamLogo;

logo.innerHTML = '<img src="' + logo_url + '">';



method: 'get',

team: val




js Handler

function addObservers()
$('NBA').observe('click', doSomething);

Event.observe(window, 'load', addObservers);