Wish List

Search

RSS

Enter your email address to subscribe to this blog.

Spry HTMLPanel Problem

Posted At : November 26, 2007 4:15 AM | Posted By : Gary Gilbert
Related Categories: Programming,Spry

Last week I posted about loading dynamic content into a Spry Tabbed Panel, which as we learned ended up being pretty easy.

The tricky bit comes when your dynamic content is also Spry content. By default when you use the HTMLPanel it doesn't parse any javascript on the page. But you can enable script parsing on pages using two different methods.

//globally

Spry.Widget.HTMLPanel.evalScripts = true;
//for the tab only
var tab1 = new Spry.Widget.HTMLPanel("tab1",{ evalScripts: true});

The only problem is that it doesn't exactly work as one would expect.

Problem Details

I first took my example from last week and the linked select box example from November 6th and figured I could use the HTMLPanel and get the select boxes to display in my tab.

My first attempt was simply to set up my HTMLPanel to evaluate the scripts on the page. The page is a complete HTML page and the Spry functions as expected when run on its own.

var tab1 = new Spry.Widget.HTMLPanel("tab1",{evalScripts:true});
tab1.loadContent('tab1.cfm');

Unfortuantely this didn't work. I received the following error message from firebug:

Spry.Data has no properties Spry.Widget.HTMLPanel.eval = function(str) { return eval(str); };

The Spry documentation states the the JS will be extracted and inserted into the DOM and then run through the eval function. Clearly the error occurs during the evaluation of the JS.

Making it work

I did manage to get it to work, but the solution is really no solution at all since the idea behind using the HTMLPanel is to insert completed self contained (and functional) chunks of code into another page.

So what did I do? I removed the <script> from my tab1.cfm page and moved them into my main page, now all includes and script is contined in the main page so the evaluation of the Spry attributes takes place as normal without needing the evalScripts.

As I said, this isn't really a solution at all. What I will do is send in an email to the Spry team and see if they have a "real" solution.

One Last Problem

Since the evalScripts argument doesn't evaluate the scripts correctly you also can't use any of the new Coldfusion 8 Ajax tags within an included script block because it too will also fail.

Until there is a solution you will have to build your included content without additional Ajax functionality.

Happy Coding

Comments (3) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 983 Views

Comments

[Add Comment]

I have had the same problem, I beleive, the way I was able to sort it out after 2 days of investigating was call the Spry.Data.initRegions() method in the script section inside the htmlpanel then you can take everything out of the page that is creating the htmlpanel.

http://labs.adobe.com/technologies/spry/articles/d...

# Posted By César Augusto Naranjo | 1/29/08 6:41 PM

heres an even easier way around this... It has worked very well for me

Add an observer to initiate the regions automatically after the html panel is updated!

===================================
var PagePanel = new Spry.Widget.HTMLPanel("PagePanel", {evalScripts:true});

function myObserverFunc(notificationType, notifier, data)
{
if (notificationType == "onPostUpdate")
Spry.Data.initRegions('PagePanel')
}

PagePanel.addObserver(myObserverFunc);

# Posted By Sean Hunt | 2/7/08 6:26 PM

So what do you do if you are trying to use a sliding panel within an htmlPanel? It isn't a Spry data region so I just get errors that the Spry data region is not defined. If I do it the first way posted in this article I get errors that my var name for the sliding panel is not defined.

Any ideas? I'm stumped.

# Posted By Chad | 7/1/08 3:15 PM