1 Reply Latest reply: Feb 4, 2013 4:51 PM by Joe Upshaw RSS

    How to Get the Clicked Option in A Shuttle Control

    Joe Upshaw
      Yes, I have reviewed previous threads on this but, none seem to address my issue. :-)

      I have a shuttle control on a page. When the user clicks (single) on an item in the right hand side, I want to capture the option that was clicked. I can not find a way to do this.

      I have a page item named P8_TERMS. I can create a Dynamic Action based on a jQuery selector of:
      >
      select#P8_TERMS_RIGHT
      >
      This works and traps the clicked event. However, this gives me a reference to the entire right hand select object, I only want a reference to the option that was actually clicked. I can see that it is just a select DOM object. However, this:
      select#P8_TERMS_RIGHT option
      does not trap the clicked event. I seem to be unable to capture the clicked event on the option itself.

      The oddest part is that I can see that the background color changes for the option that I click upon, however; inspecting the elements does not show any difference for the selected option, e.g. no new class, no new css, etc.

      I had an idea to set the onclicked attribute of the items in the right hand side but, this is only possible if you can trap the change event for select#P8_TERMS_RIGHT, which you can't! The clicked event will work for that selector but, not the change event...Why???

      How can I find out what option was clicked?

      -Joe

      Edited by: Joe Upshaw on Feb 4, 2013 4:12 PM
        • 1. Re: How to Get the Clicked Option in A Shuttle Control
          Joe Upshaw
          Answered my own question. Here's how I got it to work:

          On the shuttle control item, on the Form Element Option Attributes setting, I set the onclick event attribute to call a function named setSelectedTermID and to pass in the Term ID like this:
          onclick="setSelectedTermID($(this).val())"
          Then, I added a function to set the value into page item, P8_SELECTED_TERM, and into the session. This is the code that gets called by the onclick above.
          function setSelectedTermID(selectedTermID) 
          {
            var ajaxRequest = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=dummy', 0);
            
            ajaxRequest.add('P8_SELECTED_TERM', selectedTermID);
            
            var ignoredReturn = ajaxRequest.get();
          
            ajaxRequest = null;  
          
            $s('P8_SELECTED_TERM', selectedTermID);
          }
          A minor bit is that I only want to do this when the item is clicked in the right-hand, i.e. selected box but, all that is needed for this is to add a check based on the ID of closest select element.

          -Joe