Question : Spry Widget Styles Lost After HTML Reloaded by AJAX Method: How Do I Fix It?

Please check the URL above to get a visual for what I'm referring to. Visit the 'parade sponsors' link, scroll down the page once it loads, then test the widget on that page. Next, click the parade sponsors link again and scroll down...

As you can see, the widget lost its' styles after I did an Ajax transfer on the left column area, aka 'main content'. I originally thought that having the stylesheets linked in the head tags would be enough but apparently Spry needs to run its JavaScript before displaying its widgets each time. While debugging using Google Chrome (and Firefox), I noticed there is a Spry property called 'Spry.Widget.SlidingPanels.onloadDidFire' that seems to relate to the problem I'm having. After Ajax transfers to another page with widgets, like 'sponsorship', the property is false. This is because the Spry objects are called at the bottom of the DOM elements, as suggested by Adobe, and when the main content is ajax-transfered in, the widgets on that page are not instantiated. Widgets are instantiated dynamically based on the loaded page at the bottom, not on the Ajax-loaded sub-pages (in the middle, above the bottom).

How do I fix this? Any ideas?

Note:

+ I assume that you have a browser inspection/debugging tool like Google Chrome or Firefox that will let you see the code at it happens. I pasted the Ajax class below.

+ I'd like to use JavaScript or back-end code (PHP) to fix this. No iFrames and no bad HTML markup like style tags loaded right into the sub-page.

+ Hopefully I can use some functionality inside the Spry framework to trigger the event that adds the styles when objects are first instantiated.

+ JavaScript doesn't fire onload when sent into the page through the sub-pages. To compensate, I use a JavaScript callback function called 'doAjaxByFlash()', called by the Flash animation just after the Ajax callback method returns successful. JavaScript is meant to be fired once the sub-page content arrives in the browser can be placed here; that's where the alert that pops up when you click 'parade sponsors' link is located.

Thanks for your help!

Code Snippet:

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:

           
           
             // JavaScript Document
 
var _activeRequestPage = '';
 
function Ajax( _id )
{
	this.id = _id;
	this.toString = function()	{		return "Ajax";	}
	this.ftype = ".inc.php";
	this.isFlashEnabled = true;
	this.mastHeadAnimeReady = true;
	
	//Create HTTPRequest object, add listener (callback) method, and send request
	this.makeRequest = function( _method, _url, _callbackMethod )
	{
		_activeRequestPage = _url;
 
		var targetURL = _url + this.ftype;
		this.request = ( window.XMLHttpRequest )? new XMLHttpRequest() : new ActiveXObject( "MSXML2.XMLHTTP" );
		this.request.onreadystatechange = _callbackMethod;
		this.request.open( _method, targetURL, true ); 
		this.request.send( targetURL ); 
	}
	
	/*
		Wrapper methods for makeRequest'
	*/
	this.doRequest = function( urlRequest )
	{
		this.makeRequest( "POST", urlRequest, this.doPageTransfer );
	}
	
	/*
		Callback methods for HTTPRequest object
	*/
	//attached via doRequest wrapper method
	this.doPageTransfer = function( )
	{
		//alert( "Ajax status: " +  this.readyState ); //Fires four times, once for each status
		switch( this.readyState )
		{
			//case 'zero' is "uninitialized"	
			//Loading...
			case 1:
				break;
			
			//Loaded.
			case 2:
				break;
			
			//Interactive.
			case 3:
				break;
			
			//Complete.
			case 4:
				var isFlashOn = true;
				 
				 //activate Toy Solidier animation
				 if ( isFlashOn )
				 {
					var anime = window.document.OHPHeaderAnime;		//attatch Flash masthead animation
					anime.toySoldierCaneTwirl() ;												//do callback method inside animation
					anime.browserAjaxReinstantiation() ;								//do callback method inside animation
				 }
				document.getElementById( "pageHub" ).innerHTML = this.responseText;
		}
	}//End doPageTransfer method
}
 
//method is called whenever the animation needs to speak to the browser
function doAlertFromFlash( message )
{
	var errorMessage = message;
	alert( message );
}
//Flash animation JS methods
function doAjaxByFlash()
{	
	switch (  _activeRequestPage )
	{
		case "pages/parade_participants" :
			alert( Spry.Widget.SlidingPanels.onloadDidFire );
			break;
		
		default:
		
	}
}

           
         

Open in New Window Select All

Answer : Spry Widget Styles Lost After HTML Reloaded by AJAX Method: How Do I Fix It?

Never mind! I fixed it myself. It was an order of operations issue. I made the following change:

                       
         
           
           
             			//Complete.
			case 4:
			
				 document.getElementById( "pageHub" ).innerHTML = this.responseText;
				 //activate Toy Solidier animation
				 var isFlashOn = true;
				 if ( isFlashOn )
				 {
					var anime = window.document.OHPHeaderAnime;		//attatch Flash masthead animation
					anime.toySoldierCaneTwirl() ;												//do callback method inside animation
					anime.browserAjaxReinstantiation() ;								//do callback method inside animation
				 }
				
		}
	}
	//End doPageTransfer method

           
         

Open in New Window Select All