Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having issues using Script.aculo.us to render an Effect of AJAX server request

    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.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    at what point are you calling the blinddown? can you paste some code?

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    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]); 	
    											}	
    										}
    							
    							 
    									container.update(table);
    									
    									new Effect.Appear("view");
    							
    									var logo = $("logo");
    							
    									var logo_url = team.TeamName.TeamLogo;
    							
    									logo.innerHTML = '<img src="' + logo_url + '">';
    							
    									return;
    											
    							},
    			
    						 method: 'get',
    						 
    						 parameters:
    							{
    								team: val
    							}
    							
    			
    						});
    			
    				event.preventDefault();
    		
    			}
    js Handler
    Code:
    function addObservers()
    {
    $('NBA').observe('click', doSomething);
    }
    
    Event.observe(window, 'load', addObservers);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •