Carousel text links and onclick events not working as expected...

Hello,

I’m using the Carousel action to build some kind of a “multi-page” HTML form, where each “page” is a Carousel pane. The user can jump from one “page” to the next by clicking at a button (I did it as a Carousel text link).

Before moving to the next part of the form (aka the next Carousel pane), a JavaScript function is called verifying user’s input. If something is missing, an alert message is shown and the function returns false preventing the user to go to the next panel until he fixed his input.

So far the theory. But unfortunately it is not working.

The alert message will be shown as intended, but although false is returned as well, the next Carousel pane gets displayed.

Strangely when I replace the internal anchor link to an external one calling a website (or whatever), my script is working as intended (alert message AND not following the link).

I wonder if this is related in any way with the Carousel action ? But I fear that JavaScript is simply not supporting the onclick event on internal anchors as intended.

How can I solve this problem ? Is there an easy way to get form elements validated on a Carousel pane and only allowing the user to move to the next pane if anything has been filled in correctly ? Or shorter: How can I prevent following an internal anchor by using JavaScript ?

For your reference, here is some of my code used:

JavaScript validation function (it’s part of a larger file)

function VerifyShopContentSE6_en()
{
    var f = document.forms[0];
    if (f.elements["SE_ISSEO-0014_001_Website"].value == "")
    {
        alert("You must fill in this form field.");
        return false;
    };
};

Button code excerpt from the HTML document (I’m using a rollover effect in addition here); added some returns for better readability

<a href="#ShopContent7"
onclick="javascript:return VerifyShopContent6_de();" 
id="text_tab_ShopContent7"
onmouseover="FWRestore(1,'Indigo'); ...

Basically this is a set of four images bound together the rollover effect. In order to make it to work, I added the following manually:

  1. Internal link: #ShopContent7 (it’s the next Carousel pane)
  2. onclick-Event: javascript:return VerifyShopContent6_de();
  3. id-Tag: Well, that was on waltd’s example for a Carousel text link; the Carousel is working without having that tag, but leaving it has no influence to my problem.

Well, much text to read :wink: But perhaps you can provide me with some insights; hopefully it’s just a small oversight by myself…

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[code]
<a href=“#ShopContent7
onclick=“javascript:return VerifyShopContent6_de();”

get rid of the javascript: part in here, onclick is explicitly a
javascript event, and so this is causing a syntax error and your code
is not running at all.

Walter


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

this was one of my first tries already, but no luck. I see no difference. It works in both cases, unfortunately not as intended.

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aaaah, I got it. What a stupid mistake !

I was in the process preparing a small project for you to see the problem by yourself and, guess what, this time anything worked well.

As I further examined it, the reason of all that trouble was the rollover effect used on the original project:

As said before, the rollover consists of four parts. Two of them are marked as visible for “mouseover” (one background and one transparent foreground image used for button caption).

I guess both are firing an onclick event when clicked - but there was only one onclick event handled by my script. After applying the link and onclick event handler to both, it works :slight_smile:

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just tried this in a dummy page, and I can’t see a way to do this
from the Carousel Button element. The issue here is that the observer
function for the carousel buttons is added unobtrusively to the
button, and when that happens, you cannot stop it from being called.
Stopping the click event in an inline handler, as you are doing,
doesn’t stop it from being handled by the handler that was registered
when the page was loaded. These handlers can “stack” on top of one
another, and the way that Carousel is coded, there are no exposed
variables you could use to alter this behavior.

What you can do (and this is the very big gun that I always caution
people not to use) is apply Source Code Snooper to the page
(effectively killing any further graphical editing) and edit the block
of code that Carousel adds to the page:

$$('.carousel_item1.next').each(function(elm){
	elm.observe('click',function(evt){
		Event.stop(evt);
		my_glider.stop();
		return my_glider.next();
	});
});

You’d add your check code before the line that returns
my_glider.next(), and only allow that return to happen if the form
passed muster.

As I said, this is a big gun to use, but it’s the only way (short of
hacking a custom version of Carousel Button) to get this code into the
page at the point where it can do some damage.

Walter

On Sep 2, 2011, at 2:48 PM, tobiaseichner wrote:

Hi Walter,

this was one of my first tries already, but no luck. I see no
difference. It works in both cases, unfortunately not as intended.

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that’s amazing, because I could not get it to work at all on a
regular click event! Good job!

Walter

On Sep 2, 2011, at 3:22 PM, tobiaseichner wrote:

Aaaah, I got it. What a stupid mistake !

I was in the process preparing a small project for you to see the
problem by yourself and, guess what, this time anything worked well.

As I further examined it, the reason of all that trouble was the
rollover effect used on the original project:

As said before, the rollover consists of four parts. Two of them are
marked as visible for “mouseover” (one background and one
transparent foreground image used for button caption).

I guess both are firing an onclick event when clicked - but there
was only one onclick event handled by my script. After applying the
link and onclick event handler to both, it works :slight_smile:

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

@waltd: A compliment from a JavaScript expert like you counts twice for me :slight_smile:

Tobias.


actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options