3 Replies Latest reply: Sep 11, 2013 7:56 PM by ShaneB RSS

    dependent LOVs within a jQuery dialog not dependent after first instantiation of pop-up dialog

    ShaneB

      Greetings...

       

      I am running ApEx 4.2.1.  I have three dependent select list items in a region (we'll call REGION_A) on a page.  The first one (SELECT_A) is a filter to the second (SELECT_B) and third (SELECT_C) and the second one is a filter to the third, so they are cascading.  The region is initially hidden on the page.  I am creating a jQuery pop-up dialog upon page load.  When a user clicks an "Add" button on the page, I have some javascript to grab the contents of the REGION_A, place it in the jQuery dialog, and then display the pop-up dialog.  The user will then either close the dialog with the "close X" in the top right corner of the dialog pop-up or actually select values in the select boxes and click the "Submit" button.  This all works great; I've done this a hundred times and it works very well.

       

      The problem is that now when the user clicks the "Add" button on the page a second time (without reloading the page), the dialog is displayed with all three select list items in it, but they are no longer dependent on each other.  When I select a value in the first select list, the second and third select lists do not automatically refresh.  They are set up properly to be dependent LOVs of each other.  "Optimize Refresh" setting is "Yes" on all of them because there are no null values allowed.  My gut feeling is that the native AJAX calls are not firing the second time around because I've dynamically moved the select list items around in the DOM -- something akin to the "Event Scope" feature in the Advanced section of a dynamic action.

       

      Any help or guidance on this would be greatly appreciated.  I'm happy to provide some source code if it would help, but it's pretty standard code that I've used lots of previous times and have seen as examples online.

       

      Shane.

        • 1. Re: dependent LOVs within a jQuery dialog not dependent after first instantiation of pop-up dialog
          Tom Petrus

          From the way you describe it I'd say that opening up a second dialog is not a good idea. If the items in the dialog are actual page items which are submitted (since from how I understand it, you open the dialog, choose something, and submit) then having a second set of them open will cause you harm either way. There can only be one page item (names are unique, because bind variables). If that is how it works then you need to block opening a second dialog.

          • 2. Re: dependent LOVs within a jQuery dialog not dependent after first instantiation of pop-up dialog
            ShaneB

            I am not actually submitting the page after the user selects values in the select list items.  I am closing the dialog pop-up and then calling an application-level on-demand process via AJAX to save the values to the database.

            • 3. Re: dependent LOVs within a jQuery dialog not dependent after first instantiation of pop-up dialog
              ShaneB

              I figured out my problem.

               

              By manipulating the DOM to grab the hidden region of these three select list items and shove that region into the jQuery dialog, those items somehow get "disconnected" somewhere in the process from the internal AJAX definitions which control the cascading affect.  It seems to be a "scope" issue.

               

              My solution was to first create a container DIV around the hidden region which contains the content for the dialog.  Following the same naming examples as in my original post above, here are the specifics:

               

              Static ID of "REGION_A" : REGION_A_CONTAINER_DIV

              Header of "REGION_A" : <div id="REGION_A_DIV">

              Footer of "REGION_A" : </div>

               

               

              When I create the jQuery dialog, I pick up the "inside" DIV leaving the container in the original place of the DOM.  When the pop-up dialog closes, I put the "inside" DIV that I picked up back where it was.  I do this by placing the following command just after the creation of the jQuery dialog pop-up.

               

              <code>

              $('#ID_OF_JQUERY_DIALOG').bind('dialogclose', function(event) {

                  $('#REGION_A_CONTAINER_DIV').html($('#REGION_A_DIV'));

              </code>

               

              If there is a better solution, I'm all ears.

               

              Shane.