9 Replies Latest reply on May 3, 2007 7:33 AM by Denes Kubicek

    Changing Icon in a Report using javascript

    Denes Kubicek
      I have a report with several columns. One of them is an image link (URL) using javascript, to set some page items to a value. The functionality is:

      - klicking on the image will set a value of an item to the corresponding ID
      (concatenated string of values - I can choose multiple rows (ID's) and

      - klicking it again, will delete the ID from the concatenated string in the page item

      The problem is, when I click the image, I can not see any difference to the rows I haven't
      selected. Is there a possibility to change the image for that row, without refreshing the
      page.

      Thanks in advance,

      Denes Kubicek
        • 1. Re: Changing Icon in a Report using javascript
          ATD
          Hi Denes,

          This can be done with javascript.

          Would it be better to hide the icon for the rows that have been selected?

          Andy
          • 2. Re: Changing Icon in a Report using javascript
            Denes Kubicek
            Andy,

            Javascript is calling an application process. It does the following:

            1. Checks if the id is contained in the concatenated string and if no, it adds it,

            2. If it is there, it takes it out

            So, my idea is to have a different symbol once you click on it and to get the original one
            if you pick it again. Something like a checkbox.

            Denes Kubicek
            • 3. Re: Changing Icon in a Report using javascript
              ATD
              Hi Denes,

              Without knowing the actual items/images involved, I can only supply a generalised example to show what's needed:

              <img src="unselected.gif" onclick="javascript:toggleImage(this);">
              <script type="text/javascript">
              function toggleImage(x)
              {
              x.src = (x.src.indexOf("unselected.gif") > -1)?"selected.gif":"unselected.gif";
              }
              </script>

              I hope this helps?!?!?!

              Andy
              • 4. Re: Changing Icon in a Report using javascript
                Denes Kubicek
                Andy,

                Thanks. This is exactly what I wanted. You can see it working here:

                http://htmldb.oracle.com/pls/otn/f?p=31517:133

                Now, the only thing is to keep the value after paginating. However, I am updating an
                application item with the single id's and can include that value into the query.

                Denes Kubicek
                • 5. Re: Changing Icon in a Report using javascript
                  Arie Geller
                  Hello Denes,

                  Usually, when I see the arrow pointer, I don't always understand what that means, and whether I should click the item/image or not. However, most of us understand that the hand pointer can lead us to something else, and pressing it, IMHO, it more intuitive.

                  All that is to remind you that you can change the pointer of your report image, by adding style="cursor: pointer;" (or any other shape you choose) to the image source.

                  Regards,
                  Arie.
                  • 6. Re: Changing Icon in a Report using javascript
                    Dimitri Gielis
                    Waaw I like that implementation. (something for my weekly forum wrap-up!)
                    Denes, why do you use an application item instead of a page item?

                    Doing this in reports/tab forms would be cool ;)

                    Dimitri
                    • 7. Re: Changing Icon in a Report using javascript
                      Denes Kubicek
                      O.K.

                      This is what I'm currently working on:

                      http://htmldb.oracle.com/pls/otn/f?p=31517:126

                      an application, which will give you a possibility to download multiple files at once. In this
                      example it is comming from a table but in real life this should be from different network
                      sources. For that, I needed javascript, changing the content of an item and plus changing
                      the symbol on clicked. Also in the oposite direction - unselecting the row and changing
                      the symbol back. The chalange was also to persist the symbols on pagination. Have a look.
                      It is working now. Except, of course, the download itself.

                      Arie, the items/images are only random - whatever I have in my workspace. In a real
                      world, it of course, needs to tell you something and needs to be explained.

                      Can you explain this a bit more in detail:

                      "...you can change the pointer of your report image, by adding style="cursor: pointer;"..."

                      I do not quite understand what you mean by that.

                      Denes Kubicek
                      • 8. Re: Changing Icon in a Report using javascript
                        ATD
                        Hi Denes,

                        The app is looking good!

                        Re Arie's comment about the pointer - you will notice when you hover over a button or a link, the cursor changes from an arrow to a hand. This is done using styles. I agree with Arie that it helps the user to see that an item "does something" if the cursor changes from a normal arrow to something else - normally "hand" (but "pointer" works as well from IE6).

                        Regards

                        Andy
                        • 9. Re: Changing Icon in a Report using javascript
                          Denes Kubicek
                          O.K.

                          Andy, Arie,

                          I got that. Thank you for the tipp. It is included in the code.

                          Denes Kubicek