Scriptaculous onclick ( on select ?) event from menu dropdown

In need a div to appear on the page when a specific selection if made on a menu/Item

      <div id="mylist">
        <select name="List1" size=1>
        <option>option 1</option>
        <option>Option 2</option>
        <option>Option 3 (show a div)</option>
        </select>
    </div>

How do I set a trigger inside the menu to get Scriptaculous to make a div appear?

       onclick="new Effect.toggle('mydiv', 'Blind', {duration:1,
delay:0, queue:'end'}

David

quote

Hi David

This thread should help you out http://freewaytalk.net/thread/view/69466

This principle can be applied to a Div or an image

Example here http://www.deltadzine.net/test/imagepicker.html

David

quote

Thanks

I’ll take a look

David

On 27 Jun 2010, at 13:44, “DeltaDave” <email@hidden> wrote:

Hi David

This thread should help you out http://freewaytalk.net/thread/view/69466

This principle can be applied to a Div or an image

Example here http://www.deltadzine.net/test/imagepicker.html

David

quote

Try adding an onchange handler to the menu.

<select name="List1" size=1 onchange="switcheroo(this)">
    <script type="text/javascript">
    function switcheroo(elm){
        var change;
        switch($F(elm){
            case 'Option 1':
            change = 'div2';
            break;
            case 'Option 2':
            change = 'div3';
            break;
            case 'Option 3':
            change = 'div4';
            break;
            default:
            change = 'div5';
            break;
        }
        return new Effect.toggle(change,Blind',
            {duration:1, delay:0, queue:'end'});
    }
    </script>

That should work. You may have to fiddle with the placement of the function relative to the element in the page source code.

Walter

On Jun 27, 2010, at 6:43 AM, David Owen wrote:

In need a div to appear on the page when a specific selection if made on a menu/Item

    <div id="mylist">
      <select name="List1" size=1>
      <option>option 1</option>
      <option>Option 2</option>
      <option>Option 3 (show a div)</option>
      </select>
  </div>

How do I set a trigger inside the menu to get Scriptaculous to make a div appear?

     onclick="new Effect.toggle('mydiv', 'Blind', {duration:1, delay: 
0, queue:'end'}

— David

quote

Walt

In this case it’s only one (last) option that needs to reveal a div.

Not switching with each selection.

David

On 27 Jun 2010, at 14:01, Walter Lee Davis <email@hidden> wrote:

Try adding an onchange handler to the menu.

<select name="List1" size=1 onchange="switcheroo(this)">
<script type="text/javascript">
function switcheroo(elm){
   var change;
   switch($F(elm){
       case 'Option 1':
       change = 'div2';
       break;
       case 'Option 2':
       change = 'div3';
       break;
       case 'Option 3':
       change = 'div4';
       break;
       default:
       change = 'div5';
       break;
   }
   return new Effect.toggle(change,Blind',
       {duration:1, delay:0, queue:'end'});
}

That should work. You may have to fiddle with the placement of the function relative to the element in the page source code.

Walter

On Jun 27, 2010, at 6:43 AM, David Owen wrote:

In need a div to appear on the page when a specific selection if made on a menu/Item

   <div id="mylist">
       <select name="List1" size=1>
       <option>option 1</option>
       <option>Option 2</option>
       <option>Option 3 (show a div)</option>
       </select>
   </div>

How do I set a trigger inside the menu to get Scriptaculous to make a div appear?

    onclick="new Effect.toggle('mydiv', 'Blind', {duration:1, delay:0, queue:'end'}

— David

quote

Then you could replace the switch statement with a simple if().

if($F(elm) == 'foo') new Effect...

Walter

quote

Thank

Just out of interest why did Freeway opt for Scriptaculous whereas the rest of the world appears to be favouring JQuery?

From a designers point of view JQuery seem easier to follow

David

On 27 Jun 2010, at 14:27, “waltd” <email@hidden> wrote:

Then you could replace the switch statement with a simple if().

if($F(elm) == ‘foo’) new Effect…

Walter

quote

Prototype is a foundation toolkit. It lets you build things like jQuery from scratch. In contrast, jQuery is designed to build widgets that you can plug together like a kit. If I could make an analogy to the cabinetmaker’s shop that’s near to my heart, jQuery is like going to the Home Depot and buying some mouldings to tack on to your latest project, while Prototype is like owning a milling machine and a set of knives, and thus being able to make the exact set of decorations you need from scratch.

Walter

quote

Right I see. Thanks

David

On 27 Jun 2010, at 17:17, “waltd” <email@hidden> wrote:

Prototype is a foundation toolkit. It lets you build things like jQuery from scratch. In contrast, jQuery is designed to build widgets that you can plug together like a kit. If I could make an analogy to the cabinetmaker’s shop that’s near to my heart, jQuery is like going to the Home Depot and buying some mouldings to tack on to your latest project, while Prototype is like owning a milling machine and a set of knives, and thus being able to make the exact set of decorations you need from scratch.

Walter

quote

I can’t get this to work, no doubt because I don’t know enough about Javascript and Scriptaculous / Prototype libraries and syntax etc. i.e. not originating from a programming background.

I’ve been messing round with JQuery and with plenty of resources around to get started on, seems an easy path to follow. (Probably because the tutorial are aimed at designers)

Can anyone point to some basic examples/tutorials to get moving with Scriptaculous / Prototype Or get a bit more basic how to accomplish this particular task?

David

On 27 Jun 2010, at 14:27, waltd wrote:

Then you could replace the switch statement with a simple if().

if($F(elm) == ‘foo’) new Effect…

Walter

quote

If you could post a link to the page, we might be able to help. One thing to try first is to check your page in the W3 validator. Another is to install Firebug in Firefox, and enable the Developer menu in Safari.

Walter

quote

Hi Walt,

Ok the desired effect is to have id=”redbox” appear (slide down) if option 3 is selected.

http://www.printlineadvertising.co.uk/demo/menuselect/

David

On 28 Jun 2010, at 13:27, waltd wrote:

If you could post a link to the page, we might be able to help. One thing to try first is to check your page in the W3 validator. Another is to install Firebug in Firefox, and enable the Developer menu in Safari.

Walter

quote

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
    if($F('List1') == 'Option 3'){
        new Effect.SlideDown('redbox');
    }else{
        if($('redbox').visible()){
            new Effect.SlideUp('redbox');
        }
    }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$('theIdOfThePicker').getValue();

or the shorter and preferred version:

$F('theIdOfThePicker');

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

I’ve been messing round with JQuery and with plenty of resources around to get started on, seems an easy path to follow. (Probably because the tutorial are aimed at designers)

Can anyone point to some basic examples/tutorials to get moving with Scriptaculous / Prototype Or get a bit more basic how to accomplish this particular task?

For a rich compendium of “stupid prototype tricks”, JavaScript legend Kangax has a great site: http://scripteka.com Note that many or most of these expect you to understand enough about hand-coding to insert the links to the various libraries and to add classnames or IDs to the elements you want to affect.

The Freeway FX Actions are all based on Prototype/Scriptaculous, and if you need something basic, they’re the first place to start. My Carousel, ScriptyAccordion, ScriptyLightbox, CalendarView and others are an attempt to make some designer-friendly packaged effects on this same platform.

The Protaculous Action and Observer are more of a hybrid, in that they expect you to find or write a snippet of Prototype-flavored JavaScript and paste it into a plain text editing window, rather than using pull-down menus and such to configure a limited set of options. In that respect, they do require more of you, but they also remove any limits from what you can choose to do.

One thing that messing around with Proto/Scripty for the last two years has definitely taught me is the finer points of the JavaScript language. It’s quite beautiful, even if it appears mysterious from the outside. I will admit it’s not for everyone, and there are some people for whom a more cookie-cutter approach is not only preferable but also correct.

It ultimately limits you, in my opinion, so I don’t recommend it as a first step. Instead, I would go with copy and paste (without understanding) first, asking questions and learning to debug second, and letting repetition of those two steps lead to true understanding. Google is FULL of P/S code, free for the copying. Prototype itself is “self-hosted”, meaning that the library in part is used to build itself. This leads to a degree of internal consistency that is rarely seen in software projects. Meaning that a kernel of understanding in one area leads to a massive leg up in another.

jQuery has seen a massive push in the last year and a half due to corporate sponsorship from Microsoft and other vendors. There is a large culture of plug-ins surrounding jQuery that allow a designer or beginning developer to chain together a complex effect using what appears to be an English-language syntax for the most part. But I would argue that this culture engenders a posture of dependence and self-editing on the part of the user, never encouraging that user to get her (metaphorical) hands dirty and figure out why and how it works. Being able to take things apart is the first step toward craftsmanship, as opposed to mere kit-assembly.

Prototype remains independent, and is still the default in professional development frameworks like Rails (from whence it sprang, not unlike Athena, as from the forehead of Zeus), Symphony, CakePHP, and others.

Using Prototype can be, as Obi-Wan once said, “…your first step into a larger world.”

Walter

quote

Thanks Walt its very much appreciated.

It’s starting to make a bit more sense, slowly. I’ve been strongly following CSS as its very much part of day to day stuff because its design :-) followed by PHP. Javascript has been on the back burner for far too long. I need to spend more time looking at it, especially as its so much more design related these days.

I find if I can see the code, pick apart how it works, the light bulb can flicker on.

Thanks for the tutorial suggestions.

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
  if($F('List1') == 'Option 3'){
      new Effect.SlideDown('redbox');
  }else{
      if($('redbox').visible()){
          new Effect.SlideUp('redbox');
      }
  }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
  if($F('List1') == 'Option 3'){
      new Effect.SlideDown('redbox');
  }else{
      if($('redbox').visible()){
          new Effect.SlideUp('redbox');
      }
  }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.

Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.

Walter

On Jun 28, 2010, at 1:45 PM, David Owen wrote:

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression
'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

—

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
 if($F('List1') == 'Option 3'){
     new Effect.SlideDown('redbox');
 }else{
     if($('redbox').visible()){
         new Effect.SlideUp('redbox');
     }
 }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

Thanks. Got it.

David

On 28 Jun 2010, at 19:33, Walter Lee Davis <email@hidden> wrote:

That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.

Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.

Walter

On Jun 28, 2010, at 1:45 PM, David Owen wrote:

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

—

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
   if($F('List1') == 'Option 3'){
       new Effect.SlideDown('redbox');
   }else{
       if($('redbox').visible()){
           new Effect.SlideUp('redbox');
       }
   }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

One last thing, a second item needs putting in the menu to drive the same effect on the same box for example ‘option 2’

would this fight the action being performed when selecting ‘option 2’ directly after selecting ‘option 3’ if not could it be done?

http://www.printlineadvertising.co.uk/demo/menuselect/

$('redbox').hide();
var switcheroo = function(){
    if($F('List1') == 'Option 3'){
        new Effect.SlideDown('redbox');
    }else{
        if($('redbox').visible()){
            new Effect.SlideUp('redbox');
        }
    }
}
$('List1').observe('change',switcheroo);

On 28 Jun 2010, at 19:33, Walter Lee Davis wrote:

That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.

Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.

Walter

On Jun 28, 2010, at 1:45 PM, David Owen wrote:

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

—

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
    if($F('List1') == 'Option 3'){
        new Effect.SlideDown('redbox');
    }else{
        if($('redbox').visible()){
            new Effect.SlideUp('redbox');
        }
    }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

If you are switching the same box in and out, and you want it to respond to the picker being on 2 OR 3, then you would simply modify the test line:

if($F('List1') == 'Option 3' || $F('List1') == 'Option 2'){

On US keyboards, the “pipe” character is on the same keycap as the backslash. Two pipes in a row mean “or” in most programming languages. So in between ‘Option 3’ and $F(‘List1 above are two pipes, not two lower-case Ls or two upper case Is.

Walter

On Jun 29, 2010, at 2:22 PM, David Owen wrote:

One last thing, a second item needs putting in the menu to drive the same effect on the same box for example ‘option 2’

would this fight the action being performed when selecting ‘option 2’ directly after selecting ‘option 3’ if not could it be done?

http://www.printlineadvertising.co.uk/demo/menuselect/

$('redbox').hide();
var switcheroo = function(){
  if($F('List1') == 'Option 3'){
      new Effect.SlideDown('redbox');
  }else{
      if($('redbox').visible()){
          new Effect.SlideUp('redbox');
      }
  }
}
$('List1').observe('change',switcheroo);

On 28 Jun 2010, at 19:33, Walter Lee Davis wrote:

That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.

Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.

Walter

On Jun 28, 2010, at 1:45 PM, David Owen wrote:

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression
'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

—

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
   if($F('List1') == 'Option 3'){
       new Effect.SlideDown('redbox');
   }else{
       if($('redbox').visible()){
           new Effect.SlideUp('redbox');
       }
   }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype- packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

Got that.

I knew this would expand in complexity, the final project is part of a form going to a Mals shopping cart, there are certain (hidden) form values that have to be published into the ‘redbox’ ~ but only when ‘redbox’ visible. Otherwise these hidden value get passed to the mals cart together with blank customer data as part of the page form and is printed in the message[] fields at mals.

To make this complete I need to create a series of variables (20 in total) to then publish the redbox with these values included. The rest of the form is ignored if ‘redbox’ is hidden.

I could do this with php and re-load the whole page (slower) without the slide effect, but maybe this could all be wrapped up in javascript in one hit?

http://www.printlineadvertising.co.uk/demo/menuselect/option.html

I’m declaring variables at the top of the script. Can the switcheroo function change the cartvalue1 etc variables? Not sure if it can when written outside the function.

    <script type="text/javascript">//<![CDATA[        var cartvalue1; cartvalue ="this extra code is published only when box is shown and not if hidden";    var cartvalue2; cartvalue ="something else";        document.observe('dom:loaded', function(){      $('redbox').hide();      var switcheroo = function(){    if($F('List1') == 'Option 3' || $F('List1') == 'Option 2'){      new Effect.SlideDown('redbox', {duration: .5, delay :0} );        cartvalue1 ="changedvalue";    cartvalue2 ="changedvalue";        }else{      if($('redbox').visible()){        new Effect.SlideUp('redbox' , {duration: .5, delay:0} );       }    }      }      $('List1').observe('change',switcheroo);    });    //]]></script>

David

On 29 Jun 2010, at 19:52, Walter Lee Davis wrote:

If you are switching the same box in and out, and you want it to respond to the picker being on 2 OR 3, then you would simply modify the test line:

if($F(‘List1’) == ‘Option 3’ || $F(‘List1’) == ‘Option 2’){

On US keyboards, the “pipe” character is on the same keycap as the backslash. Two pipes in a row mean “or” in most programming languages. So in between ‘Option 3’ and $F(‘List1 above are two pipes, not two lower-case Ls or two upper case Is.

Walter

On Jun 29, 2010, at 2:22 PM, David Owen wrote:

One last thing, a second item needs putting in the menu to drive the same effect on the same box for example ‘option 2’

would this fight the action being performed when selecting ‘option 2’ directly after selecting ‘option 3’ if not could it be done?

http://www.printlineadvertising.co.uk/demo/menuselect/

$('redbox').hide();
var switcheroo = function(){
 if($F('List1') == 'Option 3'){
     new Effect.SlideDown('redbox');
 }else{
     if($('redbox').visible()){
         new Effect.SlideUp('redbox');
     }
 }
}
$('List1').observe('change',switcheroo);

On 28 Jun 2010, at 19:33, Walter Lee Davis wrote:

That’s because you’ve given the SELECT (picking list) and the DIV that holds it on the page the same ID (List1). No two things on a page can have the same ID. Since the DIV comes first in the source code of your page, Prototype is trying to get the Form.Element#GetValue function to run against it. But since a DIV is not a form element, the function fails.

Click on the left-most tab in the Inspector while this form element is selected in Freeway. Change the Title field to something besides List1. Then click on the right-most tab and confirm that the Name field still reads List1. Your Extended ID should not be affected by this change.

Walter

On Jun 28, 2010, at 1:45 PM, David Owen wrote:

Walt,

The updated Freeway page is balking with an error :-\

TypeError: Result of expression 'Form.Element.Serializers[method]' [undefined] is not a function.

http://www.printlineadvertising.co.uk/demo/menuselect/

—

David

On 28 Jun 2010, at 16:24, waltd wrote:

And if the picker changes from Option 3 back to something else, it should slide back up, right?

Here’s one way to do this.

$('redbox').hide();
var switcheroo = function(){
  if($F('List1') == 'Option 3'){
      new Effect.SlideDown('redbox');
  }else{
      if($('redbox').visible()){
          new Effect.SlideUp('redbox');
      }
  }
}
$('List1').observe('change',switcheroo);

Some things to note about this. First, you have to change the Library picker in Protaculous from prototype (or prototype-packed) to scriptaculous-packed for this to work. Second, your picking list as you have drawn it has a DIV surrounding it that has the ID ‘mylist’, but the picker itself does not have an ID. In order to use Prototype to get the value out of a picker, that picker has to have an ID. Once it does, then the value of a picker can be gotten using:

$(‘theIdOfThePicker’).getValue();

or the shorter and preferred version:

$F(‘theIdOfThePicker’);

To add an ID to a picker in Freeway, you can use the FormFix Action, or you can use Item / Extended when the picker is selected, then make sure you choose the <select> tab in the Extended dialog before clicking New, entering id as the Name and theIdOfThePicker as the Value. (Naturally, changing that to something unique and meaningful to you.) I added an ID to the picker while testing this. It’s a good idea to have any form element’s name and ID match exactly, simply because IE has kittens if they don’t.

Here’s a link to the working page:

http://jsbin.com/unafo

Oh, and one other gotcha waiting to pounce: your DIV that you slide into view cannot be empty. That’s a bug in Scriptaculous 1.8, maybe it’s fixed in the next version, but I haven’t checked. Freeway works around this when you use the Transition FX Action by inserting an empty DIV in any element that’s animated using these effects. But I imagine that your real page would never go to all this trouble to animate an empty box into view, so this is just a warning if you’re following along with a similar trivial test document.

Walter

quote

Certainly this can be done. The individual hidden fields would need to have IDs added to them for this to work. I don’t believe that the Form Setup dialog lets you do that, though, so you should experiment with my FormFix Action in Page mode to see if that cleans up that problem for you.

The syntax to put inside your switcheroo would be this:

 $('theIdOfTheHiddenField').setValue('123.45');

But I think that overall, you might want to re-think how this whole thing works. It might be simpler within Freeway to create each set of options in its own “redbox”, stack them all on top of each other, and then only show the one that is pertinent to the choice in the picking list. There’s another thread on this list or maybe the main FreewayTalk list from last week where I helped someone build exactly that form for a Mals cart.

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <inputtype=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

Walter

On Jun 30, 2010, at 9:58 AM, David Owen wrote:

cartvalue1 =”changedvalue”; cartvalue2 =”changedvalue”;

quote

Sorry I sould have been a little more specific I’m sending a hidden field value alongside each text field for example “my value” to accompany the use text field value.

If the user leaves these value as blank, these hidden fields “are” still being sent when the ‘redbox’ is hidden by the script and Mals then displays these unless I can disable them to “” nothing

This bits are inserted as code.

<input type="hidden" name="message_title[]" value="my value">
<input type="text" name="message[]" size="5">

so do I document.write the variables like I would use php to echo / print

Or I suppose the simplest is to use the existing script to simply hide() ?

David

On 30 Jun 2010, at 15:13, Walter Lee Davis wrote:

Certainly this can be done. The individual hidden fields would need to have IDs added to them for this to work. I don’t believe that the Form Setup dialog lets you do that, though, so you should experiment with my FormFix Action in Page mode to see if that cleans up that problem for you.

The syntax to put inside your switcheroo would be this:

$(‘theIdOfTheHiddenField’).setValue(‘123.45’);

But I think that overall, you might want to re-think how this whole thing works. It might be simpler within Freeway to create each set of options in its own “redbox”, stack them all on top of each other, and then only show the one that is pertinent to the choice in the picking list. There’s another thread on this list or maybe the main FreewayTalk list from last week where I helped someone build exactly that form for a Mals cart.

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

Walter

On Jun 30, 2010, at 9:58 AM, David Owen wrote:

cartvalue1 =”changedvalue”; cartvalue2 =”changedvalue”;

quote

You can’t use document.write within an anonymous function. Anything you write with the Protaculous Action gets wrapped in an anonymous function to keep it from “leaking” into the global namespace.

So the options would be to use Element.setValue to set the value to nothing or Element.hide to make it disappear altogether.

On balance, I’d go with hide, because there’s no telling what might happen in a Freeway document if you had two fields with the same name, and one of them is blank and the other has a value set by the customer.

I say in Freeway because it’s never all that clear what order these elements will end up in the source code. And the last one “wins”, usually, when submitting forms. So you might end up with the value being nothing, rather than what the customer set.

Walter

On Jun 30, 2010, at 10:36 AM, David Owen wrote:

Sorry I sould have been a little more specific I’m sending a hidden field value alongside each text field for example “my value” to accompany the use text field value.

If the user leaves these value as blank, these hidden fields “are” still being sent when the ‘redbox’ is hidden by the script and Mals then displays these unless I can disable them to “” nothing

This bits are inserted as code.

<input type="hidden" name="message_title[]" value="my value">
<input type="text" name="message[]" size="5">

so do I document.write the variables like I would use php to echo / print

Or I suppose the simplest is to use the existing script to simply hide() ?

—

David

On 30 Jun 2010, at 15:13, Walter Lee Davis wrote:

Certainly this can be done. The individual hidden fields would need to have IDs added to them for this to work. I don’t believe that the Form Setup dialog lets you do that, though, so you should experiment with my FormFix Action in Page mode to see if that cleans up that problem for you.

The syntax to put inside your switcheroo would be this:

$(‘theIdOfTheHiddenField’).setValue(‘123.45’);

But I think that overall, you might want to re-think how this whole thing works. It might be simpler within Freeway to create each set of options in its own “redbox”, stack them all on top of each other, and then only show the one that is pertinent to the choice in the picking list. There’s another thread on this list or maybe the main FreewayTalk list from last week where I helped someone build exactly that form for a Mals cart.

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

Walter

On Jun 30, 2010, at 9:58 AM, David Owen wrote:

cartvalue1 =”changedvalue”; cartvalue2 =”changedvalue”;

quote

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

I am sorry, I was remembering the behavior of a form submitted through Ajax (JavaScript submit without a page refresh) and thinking it was the general case. It is not. A form field that has a value but is hidden by CSS (display:none) still gets submitted with the form contents during a normal form submission.

This script will fix that.

function strip_hidden(evt){
  evt.stop();
    var f = $(this);
    f.getElements().each(function(elm){
        if(!elm.visible() ||
            elm.ancestors().find(
                function(m){
                    return ! m.visible();
                })
            ){
            elm.remove();
        }
    });
    f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

Walter

On Jun 30, 2010, at 11:21 AM, David Owen wrote:

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

—

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

Also, if you want to see what a form is up to, POST or GET it here: http://scripty.walterdavisstudio.com/reflector.php

Walter

On Jun 30, 2010, at 11:21 AM, David Owen wrote:

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

—

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

To apply this function to as many forms as you might have on your page all at once, do this:

$$('form').invoke('observe','submit',strip_hidden);

This (and the function itself) rely on Prototype and should be pasted into the top Function Body dialog on Protaculous in order to work at all.

Walter

On Jun 30, 2010, at 12:01 PM, Walter Lee Davis wrote:

I am sorry, I was remembering the behavior of a form submitted through Ajax (JavaScript submit without a page refresh) and thinking it was the general case. It is not. A form field that has a value but is hidden by CSS (display:none) still gets submitted with the form contents during a normal form submission.

This script will fix that.

function strip_hidden(evt){
evt.stop();
  var f = $(this);
  f.getElements().each(function(elm){
      if(!elm.visible() ||
          elm.ancestors().find(
              function(m){
                  return ! m.visible();
              })
          ){
          elm.remove();
      }
  });
  f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

Walter

On Jun 30, 2010, at 11:21 AM, David Owen wrote:

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

—

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide- send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

OK thanks I will try this.

One last spanner, we’re checking a specific complete ‘Option 3’ to trigger the drop down extension to the form

if($F('List1') == 'Option 3' || $F('List1') == 'Option 2')

I’ve realised the real world form value does change depending where to form is coming from. There are unique word/s in the string to match from. The string ‘(add your prescription/lens below)’ is always in the last two in the menu

Does Javascript use wildcards? to compare?

David

On 30 Jun 2010, at 17:01, Walter Lee Davis wrote:

I am sorry, I was remembering the behavior of a form submitted through Ajax (JavaScript submit without a page refresh) and thinking it was the general case. It is not. A form field that has a value but is hidden by CSS (display:none) still gets submitted with the form contents during a normal form submission.

This script will fix that.

function strip_hidden(evt){
evt.stop();
  var f = $(this);
  f.getElements().each(function(elm){
      if(!elm.visible() ||
          elm.ancestors().find(
              function(m){
                  return ! m.visible();
              })
          ){
          elm.remove();
      }
  });
  f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

Walter

On Jun 30, 2010, at 11:21 AM, David Owen wrote:

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

—

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

You can use regular expressions to match if a string or substring exists in a string. Prototype also adds the helpful function String.include which does the most common case for you: “does this string include this other string?”.

if($F('List1').match(/foo/i)) // will hit on any string value that
includes 'foo', 'FOO', 'Foo',...
if($F('List1').match(/foo/)) // will hit on any string value that
includes 'foo'
if($F('List1').include('foo')) // will hit on any string value that
includes 'foo'

I have a very fat O’Reilly book about regular expressions, they are an entire college or graduate school course unto themselves. But suffice it to say, you can do almost anything with them.

Walter

On Jun 30, 2010, at 12:25 PM, David Owen wrote:

OK thanks I will try this.

One last spanner, we’re checking a specific complete ‘Option 3’ to trigger the drop down extension to the form

if($F('List1') == 'Option 3' || $F('List1') == 'Option 2')

I’ve realised the real world form value does change depending where to form is coming from. There are unique word/s in the string to match from. The string ‘(add your prescription/lens below)’ is always in the last two in the menu

Does Javascript use wildcards? to compare?

—

David

On 30 Jun 2010, at 17:01, Walter Lee Davis wrote:

I am sorry, I was remembering the behavior of a form submitted through Ajax (JavaScript submit without a page refresh) and thinking it was the general case. It is not. A form field that has a value but is hidden by CSS (display:none) still gets submitted with the form contents during a normal form submission.

This script will fix that.

function strip_hidden(evt){
evt.stop();
 var f = $(this);
 f.getElements().each(function(elm){
     if(!elm.visible() ||
         elm.ancestors().find(
             function(m){
                 return ! m.visible();
             })
         ){
         elm.remove();
     }
 });
 f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

Walter

On Jun 30, 2010, at 11:21 AM, David Owen wrote:

This full site I’m working on is on MAMP on my machine here so cannot easily share.

Both Firefox and Safari is sending the POST data from my MAMP site to Mals specifically the message_title[] data to Mals is sent.

<input type="hidden" name="message_title[]" value="my value">

should hide() be stopping this? Should each hidden field be given and ID to specifically hide()

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html

—

David

On 30 Jun 2010, at 16:08, Walter Lee Davis wrote:

Try sending the form as a POST rather than a GET. I get mixed results. Safari seems to pass the elements along in the GET, but Firefox with Tamper Data does not see them.

Walter

On Jun 30, 2010, at 11:01 AM, David Owen wrote:

You say the form elements held within ‘redbox’ should not get sent to the server if using hide() ?

The script uses $(‘redbox’).hide(); And elements held within ‘redbox’ are being sent to the server

Is hide() working correctly?

http://www.printlineadvertising.co.uk/demo/menuselect/hide-send.html —

David

On 30 Jun 2010, at 15:36, David Owen wrote:

One thing that will definitely help you here is that any form element that is hidden with JavaScript (not hidden in the sense of <input type=hidden>) will not be submitted to the server. So if you had a lot of form elements, but most of them had their display property set to none through JavaScript (which is what happens when you apply the Prototype function hide() to them) then they would be missing from the form submission. So only the elements that you’ve enabled through your picker will go anywhere.

quote

Thanks it’s all soaking in.

I do find if things go wrong there is sometimes very little feedback to what is happening.

David

On 30 Jun 2010, at 17:36, Walter Lee Davis wrote:

I have a very fat O’Reilly book about regular expressions, they are an entire college or graduate school course unto themselves. But suffice it to say, you can do almost anything with them.

quote

If you haven’t already, enable the Developer menu in Safari or install Firebug in Firefox. Then in Safari, choose Develop/Show Error Console or in Firefox, click on the little bug in the lower-right corner of the window. That will show you all the ugliness. Sometimes the error messages approach English in their clarity, very often not. But copying and pasting error messages into Google is a time-honored way to debug your scripts!

Walter

quote

All working and good to go except the disabling of the form element on submission.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Where in the document/how should the script go?

(I’m OK just inserting into Freeway just need to know the code position and I will reverse engineer back into Freeway interface ~ e.g. I’m not using any Protaculous actions in this instance) personally it helps me understanding what is going on by interacting with the raw code working in situ.

(I like the page: http://scripty.walterdavisstudio.com/reflector.php very useful)

David

On 30 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
 var f = $(this);
 f.getElements().each(function(elm){
     if(!elm.visible() ||
         elm.ancestors().find(
             function(m){
                 return ! m.visible();
             })
         ){
         elm.remove();
     }
 });
 f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined] is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
    var f = $(this);
    f.getElements().each(function(elm){
        if(!elm.visible() ||
            elm.ancestors().find(
                function(m){
                    return ! m.visible();
                })
            ){
            elm.remove();
        }
    });
    f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

This error means that the page does not have a form on it. Which shouldn’t be possible. But it might be explained thus: At the moment that the script runs, the code that describes the form object has not been downloaded to the browser.

You need to do one of two things. The easiest would be to move the entire script, starting with function strip_hidden… and ending before the end-script tag, inside the document.observe block. This Pastie shows before and after, and I admit the difference appears subtle: http://pastie.org/1026711

What this does is place all of your code inside another “listener” function, which waits until the document has entirely downloaded to the browser (but usually before the page has become visible) and then fires off your code. It guarantees that everything is ready for the code, but doesn’t require that you break your JavaScript across multiple <script> blocks placed throughout the page. And in most cases, it readies the effect before anything is visible on the page. This keeps you from having the “flash of scripted content”, where you see something for a fraction of a second and then it disappears as the page is set up for some visual effect.

You can get the same effect by using the Protaculous Action to place the code on the page. If you click on either of the Function Body buttons in Protaculous, you will get a code editing window where you can place a lump of code. The top button wraps your code inside the ‘dom:loaded’ listener function, which means (sorry for shouting) YOU HAVE TO REMOVE THAT from your code. If you were to remove the first line and the last line from my corrected script, and paste that inside the top Function Body dialog in Protaculous, you would end up with the same code.

The second button is for a different event: Event.observe(window,’load’,function(evt){ your code here }); The reason you might want to use this versus the other has to do with timing. On a large page, you might have tons of photos or other resources that take a while to download. You want your script to do something visual with the page, but you want it to wait until everything is visible to start. So then you would use the second button and put your code there.

Walter

On Jul 1, 2010, at 9:34 AM, David Owen wrote:

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined]
is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

—

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
   var f = $(this);
   f.getElements().each(function(elm){
       if(!elm.visible() ||
           elm.ancestors().find(
               function(m){
                   return ! m.visible();
               })
           ){
           elm.remove();
       }
   });
   f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

OK got that, and moved the second part inside the first no errors.

(BTW I’m NOT using the Protaculous Action in this instance, I’m using code direct in the “before </head>” section on Freeway)

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

the form sends to http://scripty.walterdavisstudio.com/reflector.php

But this still showing the hidden field data sent by the form

~~~~~ Array ( [List1] => Option 1 [message_title] => Array ( [0] => Prescription Code: )

[message] => Array ( [0] => )

) ~~~~~~

David

On 1 Jul 2010, at 16:15, Walter Lee Davis wrote:

This error means that the page does not have a form on it. Which shouldn’t be possible. But it might be explained thus: At the moment that the script runs, the code that describes the form object has not been downloaded to the browser.

You need to do one of two things. The easiest would be to move the entire script, starting with function strip_hidden… and ending before the end-script tag, inside the document.observe block. This Pastie shows before and after, and I admit the difference appears subtle: http://pastie.org/1026711

What this does is place all of your code inside another “listener” function, which waits until the document has entirely downloaded to the browser (but usually before the page has become visible) and then fires off your code. It guarantees that everything is ready for the code, but doesn’t require that you break your JavaScript across multiple <script> blocks placed throughout the page. And in most cases, it readies the effect before anything is visible on the page. This keeps you from having the “flash of scripted content”, where you see something for a fraction of a second and then it disappears as the page is set up for some visual effect.

You can get the same effect by using the Protaculous Action to place the code on the page. If you click on either of the Function Body buttons in Protaculous, you will get a code editing window where you can place a lump of code. The top button wraps your code inside the ‘dom:loaded’ listener function, which means (sorry for shouting) YOU HAVE TO REMOVE THAT from your code. If you were to remove the first line and the last line from my corrected script, and paste that inside the top Function Body dialog in Protaculous, you would end up with the same code.

The second button is for a different event: Event.observe(window,’load’,function(evt){ your code here }); The reason you might want to use this versus the other has to do with timing. On a large page, you might have tons of photos or other resources that take a while to download. You want your script to do something visual with the page, but you want it to wait until everything is visible to start. So then you would use the second button and put your code there.

Walter

On Jul 1, 2010, at 9:34 AM, David Owen wrote:

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined] is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

—

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
  var f = $(this);
  f.getElements().each(function(elm){
      if(!elm.visible() ||
          elm.ancestors().find(
              function(m){
                  return ! m.visible();
              })
          ){
          elm.remove();
      }
  });
  f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

See if changing Submit to submit in the observer function has any effect on the problem. Just this line:

 $(document.forms[0]).observe('submit',strip_hidden);

It seemed to help here.

Walter

On Jul 1, 2010, at 12:02 PM, David Owen wrote:

OK got that, and moved the second part inside the first no errors.

(BTW I’m NOT using the Protaculous Action in this instance, I’m using code direct in the “before </head>” section on Freeway)

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

the form sends to http://scripty.walterdavisstudio.com/reflector.php

But this still showing the hidden field data sent by the form

~~~~~ Array ( [List1] => Option 1 [message_title] => Array ( [0] => Prescription Code: )

[message] => Array ( [0] => )

) ~~~~~~

—

David

On 1 Jul 2010, at 16:15, Walter Lee Davis wrote:

This error means that the page does not have a form on it. Which shouldn’t be possible. But it might be explained thus: At the moment that the script runs, the code that describes the form object has not been downloaded to the browser.

You need to do one of two things. The easiest would be to move the entire script, starting with function strip_hidden… and ending before the end-script tag, inside the document.observe block. This Pastie shows before and after, and I admit the difference appears subtle: http://pastie.org/1026711

What this does is place all of your code inside another “listener” function, which waits until the document has entirely downloaded to the browser (but usually before the page has become visible) and then fires off your code. It guarantees that everything is ready for the code, but doesn’t require that you break your JavaScript across multiple <script> blocks placed throughout the page. And in most cases, it readies the effect before anything is visible on the page. This keeps you from having the “flash of scripted content”, where you see something for a fraction of a second and then it disappears as the page is set up for some visual effect.

You can get the same effect by using the Protaculous Action to place the code on the page. If you click on either of the Function Body buttons in Protaculous, you will get a code editing window where you can place a lump of code. The top button wraps your code inside the ‘dom:loaded’ listener function, which means (sorry for shouting) YOU HAVE TO REMOVE THAT from your code. If you were to remove the first line and the last line from my corrected script, and paste that inside the top Function Body dialog in Protaculous, you would end up with the same code.

The second button is for a different event: Event.observe(window,’load’,function(evt){ your code here }); The reason you might want to use this versus the other has to do with timing. On a large page, you might have tons of photos or other resources that take a while to download. You want your script to do something visual with the page, but you want it to wait until everything is visible to start. So then you would use the second button and put your code there.

Walter

On Jul 1, 2010, at 9:34 AM, David Owen wrote:

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined]
is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

—

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
 var f = $(this);
 f.getElements().each(function(elm){
     if(!elm.visible() ||
         elm.ancestors().find(
             function(m){
                 return ! m.visible();
             })
         ){
         elm.remove();
     }
 });
 f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

Yay! got it. Boy this Javascript is fickle

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

David

On 1 Jul 2010, at 17:13, Walter Lee Davis wrote:

See if changing Submit to submit in the observer function has any effect on the problem. Just this line:

$(document.forms[0]).observe(‘submit’,strip_hidden);

It seemed to help here.

Walter

On Jul 1, 2010, at 12:02 PM, David Owen wrote:

OK got that, and moved the second part inside the first no errors.

(BTW I’m NOT using the Protaculous Action in this instance, I’m using code direct in the “before </head>” section on Freeway)

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

the form sends to http://scripty.walterdavisstudio.com/reflector.php

But this still showing the hidden field data sent by the form

~~~~~ Array ( [List1] => Option 1 [message_title] => Array ( [0] => Prescription Code: )

[message] => Array ( [0] => )

) ~~~~~~

—

David

On 1 Jul 2010, at 16:15, Walter Lee Davis wrote:

This error means that the page does not have a form on it. Which shouldn’t be possible. But it might be explained thus: At the moment that the script runs, the code that describes the form object has not been downloaded to the browser.

You need to do one of two things. The easiest would be to move the entire script, starting with function strip_hidden… and ending before the end-script tag, inside the document.observe block. This Pastie shows before and after, and I admit the difference appears subtle: http://pastie.org/1026711

What this does is place all of your code inside another “listener” function, which waits until the document has entirely downloaded to the browser (but usually before the page has become visible) and then fires off your code. It guarantees that everything is ready for the code, but doesn’t require that you break your JavaScript across multiple <script> blocks placed throughout the page. And in most cases, it readies the effect before anything is visible on the page. This keeps you from having the “flash of scripted content”, where you see something for a fraction of a second and then it disappears as the page is set up for some visual effect.

You can get the same effect by using the Protaculous Action to place the code on the page. If you click on either of the Function Body buttons in Protaculous, you will get a code editing window where you can place a lump of code. The top button wraps your code inside the ‘dom:loaded’ listener function, which means (sorry for shouting) YOU HAVE TO REMOVE THAT from your code. If you were to remove the first line and the last line from my corrected script, and paste that inside the top Function Body dialog in Protaculous, you would end up with the same code.

The second button is for a different event: Event.observe(window,’load’,function(evt){ your code here }); The reason you might want to use this versus the other has to do with timing. On a large page, you might have tons of photos or other resources that take a while to download. You want your script to do something visual with the page, but you want it to wait until everything is visible to start. So then you would use the second button and put your code there.

Walter

On Jul 1, 2010, at 9:34 AM, David Owen wrote:

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined] is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

—

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
    var f = $(this);
    f.getElements().each(function(elm){
        if(!elm.visible() ||
            elm.ancestors().find(
                function(m){
                    return ! m.visible();
                })
            ){
            elm.remove();
        }
    });
    f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

An unforeseen issue with the behaviour I did not spot.

Using Option 1, and press Order (the hidden div contains a select menu) then the first value of this hidden select menu gets sent to http://scripty.walterdavisstudio.com/reflector.php

Array
(
    [List1] => Option 1
    [message] => Array
        (
            [0] => -8.00
        )

)

I need to exclude these values if “prescription” is “not” selected

Demo here:

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

David

On 1 Jul 2010, at 17:13, Walter Lee Davis wrote:

See if changing Submit to submit in the observer function has any effect on the problem. Just this line:

$(document.forms[0]).observe(‘submit’,strip_hidden);

It seemed to help here.

Walter

On Jul 1, 2010, at 12:02 PM, David Owen wrote:

OK got that, and moved the second part inside the first no errors.

(BTW I’m NOT using the Protaculous Action in this instance, I’m using code direct in the “before </head>” section on Freeway)

http://www.printlineadvertising.co.uk/demo/menuselect/getting-nearer.html

the form sends to http://scripty.walterdavisstudio.com/reflector.php

But this still showing the hidden field data sent by the form

~~~~~ Array ( [List1] => Option 1 [message_title] => Array ( [0] => Prescription Code: )

[message] => Array ( [0] => )

) ~~~~~~

—

David

On 1 Jul 2010, at 16:15, Walter Lee Davis wrote:

This error means that the page does not have a form on it. Which shouldn’t be possible. But it might be explained thus: At the moment that the script runs, the code that describes the form object has not been downloaded to the browser.

You need to do one of two things. The easiest would be to move the entire script, starting with function strip_hidden… and ending before the end-script tag, inside the document.observe block. This Pastie shows before and after, and I admit the difference appears subtle: http://pastie.org/1026711

What this does is place all of your code inside another “listener” function, which waits until the document has entirely downloaded to the browser (but usually before the page has become visible) and then fires off your code. It guarantees that everything is ready for the code, but doesn’t require that you break your JavaScript across multiple <script> blocks placed throughout the page. And in most cases, it readies the effect before anything is visible on the page. This keeps you from having the “flash of scripted content”, where you see something for a fraction of a second and then it disappears as the page is set up for some visual effect.

You can get the same effect by using the Protaculous Action to place the code on the page. If you click on either of the Function Body buttons in Protaculous, you will get a code editing window where you can place a lump of code. The top button wraps your code inside the ‘dom:loaded’ listener function, which means (sorry for shouting) YOU HAVE TO REMOVE THAT from your code. If you were to remove the first line and the last line from my corrected script, and paste that inside the top Function Body dialog in Protaculous, you would end up with the same code.

The second button is for a different event: Event.observe(window,’load’,function(evt){ your code here }); The reason you might want to use this versus the other has to do with timing. On a large page, you might have tons of photos or other resources that take a while to download. You want your script to do something visual with the page, but you want it to wait until everything is visible to start. So then you would use the second button and put your code there.

Walter

On Jul 1, 2010, at 9:34 AM, David Owen wrote:

I’m getting an error :-(

TypeError: Result of expression '$(document.forms[0])' [undefined] is not an object.

http://www.printlineadvertising.co.uk/demo/menuselect/findmenuanddisab.html

Google is not really helping me with this probably because I understand what “//to apply it, set a listener on the form’s submit event:” means but not entirely sure where/how to implement it.

—

David

On 1 Jul 2010, at 09:36, David Owen wrote:

0 Jun 2010, at 17:24, Walter Lee Davis wrote:

This script will fix that.

function strip_hidden(evt){
evt.stop();
    var f = $(this);
    f.getElements().each(function(elm){
        if(!elm.visible() ||
            elm.ancestors().find(
                function(m){
                    return ! m.visible();
                })
            ){
            elm.remove();
        }
    });
    f.submit();
}
//to apply it, set a listener on the form's submit event:
$(document.forms[0]).observe('submit',strip_hidden);

quote

Try this version of the strip_hidden function:

I have no idea why it’s behaving this way, but this version uses long-hand DOM methods rather than the Prototype remove() function to remove the form elements that have hidden parents, and it seems to work with your form.

Walter

quote

Me neither, thanks that works now.

David

On 3 Aug 2010, at 15:32, waltd wrote:

I have no idea why it’s behaving this way

quote

Here’s the finished job if you want a look: http://www.ledglasses.co.uk/

David

On 3 Aug 2010, at 15:32, waltd wrote:

Try this version of the strip_hidden function:

I have no idea why it’s behaving this way, but this version uses long-hand DOM methods rather than the Prototype remove() function to remove the form elements that have hidden parents, and it seems to work with your form.

Walter

quote

That’s really excellent! One suggestion: put your prescription form element inline, above the Order button, so it pushes the Order button down when it’s needed. On my 15” laptop, the magical appearing form was appearing below the fold, so I didn’t see it there.

Walter

quote

Hi David, A really great looking site (even without my Speculite’s on!). :-) Although maybe not a huge market your client should maybe market these to DJs, nightclub security staff etc. They remind me of watching Orbital in my youth who would wear these while DJing; http://technomusicnews.com/images/OrbitalWithGlasses.jpg All the best, Tim.

On 3 Aug 2010, at 18:07, David Owen wrote:

Here’s the finished job if you want a look: http://www.ledglasses.co.uk/

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com

quote

Good idea, I tend to be spoiled using a large iMac screen.

It’s all run with WebYeb, the client maintains his pricing, postage, descriptions, product shots. It’s quite a flexible CMS for small sites, or small shops.

David

On 3 Aug 2010, at 19:10, “waltd” <email@hidden> wrote:

That’s really excellent! One suggestion: put your prescription form element inline, above the Order button, so it pushes the Order button down when it’s needed. On my 15” laptop, the magical appearing form was appearing below the fold, so I didn’t see it there.

Walter

quote

I could do with a pair of these - any chance of a discount?

David

quote

Is that singular or plural? (discounts can be coded:) )

Afraid that’s something you’ll have to ask the client.

David

On 3 Aug 2010, at 20:02, “DeltaDave” <email@hidden> wrote:

I could do with a pair of these - any chance of a discount?

David

quote