Spry: onclick event not working inside an 'HTMLPanel'

**Sekhmet** · 04-03-2009, 02:05 PM

Hi guys! Hope you can give me a hand on this simple problem, here's the deal:

I have this 'Primary' page, which loads a 'Secondary' page inside a Spry HTMLPanel:

Primary page

(click on the 'Item 1' link and the secondary page will be loaded on the empty area on the right).

The secondary page is basically a thumbnail gallery made of a Spry SlidingPanel, with some onclick events used for navigating between pages:

Secondary page

(the secondary page doesnt have any <head> or <html> tags, so it wont look right if you open it by itself, it has to be loaded inside the HTMLPanel from the Primary page for it to work.

The problem is that the 1,2,3... nav. links are not working (they have some onclick events that tell the Spry SlidingPanel to move between pages). The strange thing is that when set up as an independent page, the page links work fine, it's just when loaded inside the SpryHTML panel that they are not working.

Any help with this will be geatly appreciated!

Thanks!!

**jscheuer1** · 04-03-2009, 02:16 PM

This:

Code:

<script type="text/javascript">
	var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>

and this:

Code:

<script> 
	Spry.Data.initRegions(); 
</script>

on the secondary page will not be executed if it is being imported (as I'm assuming it is) via AJAX.

From the looks of things though, if you were to put those on the primary page, then the onclick events on the secondary page might actually work.

**Sekhmet** · 04-03-2009, 02:46 PM

Hi! thanks for replying!

On the primary page I have the 'evalScripts: true' option enabled that tells the HTMLPanel to execute any <script> tags. (If I don't do evalScripts: true the thumbnail generation doesn't work).

Code:

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

Anyway I just tried moving the two scripts to the Primary page just in case, and the onclick events still didn't work

**jscheuer1** · 04-03-2009, 03:03 PM

Well, I said 'might'. Upon closer examination I see that:

HTML Code:

<div id="apDiv1" class="SlidingPanels" spry:region="dsadult">

which is the declared element of:

Code:

var sp1 = new Spry.Widget.SlidingPanels("apDiv1");

doesn't arrive until the the secondary page arrives, so declaring it and/or initializing it on the primary will do no good unless you wait until after the secondary has arrived.

Now, this evalScripts: true, if it worked as one might hope, should take care of all that. But something like that is often not comprehensive. Check your Spry documentation for what situations it is intended for, and how complex of a script evaluation it can do.

Also, even if it does work, the script it is calling must be on the primary.

If you have all that, you might try (on the secondary):

Code:

<div id="thmpagecontainer" onmouseover="if (typeof sp1 === 'undefined'){
sp1 = new Spry.Widget.SlidingPanels('apDiv1');
Spry.Data.initRegions(); 
};">
	<div id="thmpagedivL"></div>
		<div id="thmpagedivM">
			<span class="thmpage">Page:&nbsp;</span>
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p0'); return false;">1</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p3'); return false;">2</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p6'); return false;">3</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p9'); return false;">4</a>
		</div>
	<div id="thmpagedivR"></div>
</div>

**Sekhmet** · 04-03-2009, 04:02 PM

Code:

<div id="thmpagecontainer" onmouseover="if (typeof sp1 === 'undefined'){
sp1 = new Spry.Widget.SlidingPanels('apDiv1');
Spry.Data.initRegions(); 
};">
	<div id="thmpagedivL"></div>
		<div id="thmpagedivM">
			<span class="thmpage">Page:&nbsp;</span>
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p0'); return false;">1</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p3'); return false;">2</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p6'); return false;">3</a>&nbsp;
			<a class="thmpagelink" href="#" onclick="sp1.showPanel('p9'); return false;">4</a>
		</div>
	<div id="thmpagedivR"></div>
</div>

Cool, that did the trick!

But as soon as I add another category to the gallery (a tertiary page) and click on the nav links, they stop working again

Here's an example:
Primary page with another category added

**Sekhmet** · 04-03-2009, 06:32 PM

Ok, small update, according to one of the guys at the Adobe forums:

When Spry evals script blocks, the var scopes the constructor invocation to within the code that evals the code and not to the over all page.

So what I had to do was remove the 'var' from the widget constructor to scope the SlidingPanel globally:

Code:

<script type="text/javascript">
	var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>

so I ended up with this:

Code:

<script type="text/javascript">
	sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>

Another solution would be using 'window.sp1' instead of just 'sp1', but I didn't try that one as simply removing the 'var' did the trick

Thanks for your help jscheuer1!

**jscheuer1** · 04-03-2009, 07:58 PM

I understand just what you are saying.

You could also declare sp1 (and other vars if you like) on the top page:

Code:

var sp1;

Then later, when Spry evaluates the imported:

Code:

<script type="text/javascript">
	sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>

It would be to the already declared global, which has advantages over an undeclared global, especially (but not limited to) IE.

Thread: Spry: onclick event not working inside an 'HTMLPanel'

Thread Tools

Search Thread

Spry: onclick event not working inside an 'HTMLPanel'

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions