Announcement

Collapse
No announcement yet.

Disappearing and Reappearing Prompt Boxes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Disappearing and Reappearing Prompt Boxes

    Hello there, I wonder if anyone can help me.

    Its been a few years since I last regularly used javascript and I'm a bit rusty. And I'm also having difficulty finding the right bits to change in the layouts.

    On our engraving website we have engravable products. But people don't always want something engraved on their items.

    So we have radio button lists, basically a choice between "Engraving Please" and "No Engraving Thankyou".

    There is then a prompt box which the customer can enter what they want engraved into. However, we only want this to appear when customers select the "Engraving Please" option.

    So, I have put display: none in the prompt box div tag (with an id of engravingprompt) so that it is hidden as standard, with the intention of making use of the following bit of script to reveal it and hide it again as necessary:

    <script type="text/javascript" language="JavaScript"><!--
    function RemoveContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function InsertContent(d) {
    document.getElementById(d).style.display = "";
    }
    //--></script>

    The idea then is to use an onClick event handler so that when someone selects either of the radio buttons it reads what the choice says and decides from that whether it should reveal or hide the prompt box and does so, thus:

    if (<actinic:variable name="ChoiceDisplayLabel" /> = 'Engraving Please')

    {
    InsertContent('engravingprompt');
    }

    else
    {
    RemoveContent('engravingprompt');
    }


    Now, where would I *put* the onClick event, I cannot find which layout to put it in? Also, am I being stupid and missing a simpler way of doing all this? Will this even work? Is "ChoiceDisplayLabel" actually the right variable that I need?

    Why are we even bothering you may ask. Well, this is a cut down situation, when I've got this bit figured out I can easily expand it. We actually need several different options and things to turn up and disappear as people select them.

    #2
    Nobody have any thoughts? Or have I put this in the wrong category? I noticed after posting that there's a forum for Layouts, but don't know if you can move topics...

    Edit: Thanks for moving it for me

    Comment


      #3
      Without an URL of a problem page it's unlikely anyone can help.

      It can be done as I use this on my Engraving / Embroidering add-on. See http://www.drillpine.biz/v8engravedp...log/Books.html and perhaps the code there will help.
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


        #4
        Thanks for the response Norman!

        Can't really put up a URL as the site is a complete replacement for an existing one, and what's there isn't relevant at the moment.

        However the questions I asked shouldn't really need the URL, the main problem I have is in knowing which layout I should put the onClick event for radio button choices.

        I can get prompts to disappear and reappear easily with a button as per your add-on Norman, but I need it to do it when people select choices; from radio buttons or drop down lists.

        Comment


          #5
          Hmm. It appears I was being thick, I have managed to find the right layout. Just clicking on the radio button list in the design tab got me to the layout I needed.

          However it appears that I'm using the wrong variable, it won't let me use that one in the radio button list layout. Or PermutationChoice. Which is rather frustrating.

          Comment


            #6
            Click a products radio button in the Design tab, upper pane. Look in the lower pane for the code used. Use the variables that you see there.
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              Originally posted by NormanRouxel View Post
              Click a products radio button in the Design tab, upper pane. Look in the lower pane for the code used. Use the variables that you see there.
              Also, consider your logic. When the page loads the first radio button will be preset. There will be no onclick or onchange event for that button.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Yeah, thats how I found the ChoiceDisplayLabel variable, but when I try and put it in the appropriate layout, Actinic pops up an angry red Click Here to See Errors and tells me I can't put it there.

                Luckily I don't need the first selection to have an onClick or onChange event as it doesn't need to do anything!

                Comment


                  #9
                  when I try and put it in the appropriate layout
                  Too vague. Only you know what layout that is and you're not telling.

                  You have to use ChoiceDisplayLabel inside the Radio Button Choice layout. It's not valid anywhere else.

                  E.g.
                  Code:
                  <input type="radio" onclick="alert('<Actinic:Variable Name="ChoiceDisplayLabel" encoding="perl" selectable="false" />');" name="<Actinic:Variable Name="UIWidgetName"/>" value="<Actinic:Variable Name="ChoiceSelectedValue"/>" <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201">checked="checked"</actinic:block> />
                  <Actinic:Variable Name="ChoiceDisplayLabel"/>
                  &nbsp;&nbsp;
                  Works fine for me.

                  Try the above and you'll see what Actinic is using for the display label. Sometimes Actinic puts !!< and >!! around the value you've entered for said label.
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    Ah, sorry, thought I'd made it more obvious.

                    The layout I had been attempting previously with no success was the Radio Button Choice Layout located in the design library.

                    The one I was referencing there was found by clicking on the radio button in the design tab. This is Radio Button Permutation Entry. This is the one that didn't like making use of the variable I was talking about in it. Looking at it further this would appear to be the wrong layout, I need to make use of Radio Button Choice, the one you mention in your post.

                    Thank for your help Norman!

                    Right, so I've just gone in and copied your code into the Radio Button Choice layout to see what happens. And I cannot get it to work. I have no idea why. I've backed up the original code and just copy/pasted your bit over it. It looks absolutely fine to me and should work. I can see nothing wrong with it. But it doesn't work.

                    Which is odd. Makes me wonder whether there's something wrong elsewhere on our website thats getting in the way. I shall test it on a brand new website and see what happens.

                    Well, thanks for everything so far. I shall continue to poke away at it over Christmas and see if I can get it to work.

                    Comment


                      #11
                      Suggestions: Preview a page with Firefox. Use FF's Tools / Error console to see if there are JavaScript errors. Do view source to see if your code is actually there.
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #12
                        Right. Managed to get through all this over the holidays.

                        By trying it in a completely new website I was able to get it all to work. The code is all finished and works a charm.

                        Unfortunately it doesn't work back on the original website and after a bit of testing I have it figured out.

                        Turns out it all works fine as long as the radio buttons are just an Attribute. But it doesn't work when you put them within a Component. Unfortunately we have to use Components for pricing things and so on.

                        It would appear that when radio buttons are put within a component instead of an attribute, it doesn't make use of the Radio Button Choices Layout. It uses instead the Radio Button Permutation Entry layout. However it of course then has to use a different variable instead of ChoiceDisplayLabel. Currently trying to figure out which variable to use. Anybody have any suggestions?

                        When I have the right variable figured out I'll post the relevant code up in case its useful for anyone else.

                        Thanks for your help so far Norman.

                        Comment


                          #13
                          Instead of a simple:
                          Code:
                          <Actinic:Variable Name="ChoiceDisplayLabel" encoding="perl" selectable="false" />
                          You need:
                          Code:
                             <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e%20%3d%3d%20FALSE">
                                <actinic:variable name="PermutationChoiceList" value="Permutation Choice Name List" encoding="perl" selectable="false" />
                             </actinic:block>
                             <actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e">
                                <actinic:variable name="AssociatedProduct::ProductName" encoding="perl" selectable="false" />
                             </actinic:block>
                          And if you intend to use it in JavaScript, it will all have to be on one long line. E.g.
                          Code:
                          var x = '<actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e%20%3d%3d%20FALSE"><actinic:variable name="PermutationChoiceList" value="Permutation Choice Name List" encoding="perl" selectable="false" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22PermutationAssociatedNameIsUsed%22%20%2f%3e"><actinic:variable name="AssociatedProduct::ProductName" encoding="perl" selectable="false" /></actinic:block>';
                          Norman - www.drillpine.biz
                          Edinburgh, U K / Bitez, Turkey

                          Comment


                            #14
                            Ah excellent, thanks Norman. That works perfectly.

                            Comment

                            Working...
                            X