8 Replies Latest reply: Jun 27, 2014 6:19 PM by zoomok RSS

    Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing

    zoomok

      Hi, I spent long hours to solve this issue and expect expert's answer.

       

      I created a form with text boxes and one of them, I just created small image button to invoke tree modal region.

      Everything is OK, tree appear and disappear after passing the code value to text item in parent form.

       

      But it refreshed and initialized all other text boxes to blanks as well....^^;;

       

      I think, it because of link in Tree SQL. Anybody help me?

       

      select case when connect_by_isleaf = 1 then 0

                  when level = 1             then 1

                  else                           -1

             end as status,

             level,

             "CAT_NM" as title,

             null as icon,

             "CAT_CD" as value,

             null as tooltip,

             'f?p=&APP_ID.:112:'||:APP_SESSION||'::::P112_CAT_CD:'||"CAT_CD" as link    --> How to avoid parent page refreshing and just pass the CAT_CD to called page?

      from "CATEGORY"

      start with "PARENT_CAT_CD" is null

      connect by prior "CAT_CD" = "PARENT_CAT_CD"

      order siblings by "CAT_CD"

        • 1. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
          Tom Petrus

          - what sort of modal region are we talking about? A jQuery modal dialog, or a modal page such as the skillbuilders modal dialog?

          - what do you want to do with the selected value from the tree? Refresh a region or anything? Just store it in a page item?

           

          The link column in a tree is a redirected, so yes, the page is rerendered as a whole.

          • 2. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
            zoomok

            Hi Tom,

             

            Thanks for your comment.

             

            I am just using "Modal Region" Template.

            What I want is just store in a page item without refresh.

            • 3. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
              Tom Petrus

              I described a how-to on this in a blogpost I made some time ago, and also have this in a demo page: working with the tree . In short though: you can not define this sort of behaviour by means of the apex component. NULL the link column, and then use javascript to handle the onselect event of the tree. Since the value for a node in your tree is the CAT_CD code, and you want to get this value when a node is selected, you don't have to do all that much.

               

              Give your tree region a static ID. Change "emptree" in my sample code to the id you gave to your region: l$Tree = $("#emptree div.tree");

               

              page -> javascript:

              var l$Tree;
              function treeOnload(){
              l$Tree = $("#emptree div.tree");
              
              $.tree.reference(l$Tree).settings.callback.onselect = function(NODE, TREE_OBJ){
                $("#P38_SELECTED_EMP").val($(NODE).attr('id')); // sample of how to set an item with value of a node (VALUE in select = ID of element)
                $("#report_emp").trigger("apexrefresh"); // refresh a region
              };
              };
              

              And in the on page load:

              treeOnload();
              

               

              Though I advise playing around a bit with the code so you at least understand it!

              • 4. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
                zoomok

                Hi Tom,

                 

                var l$Tree; 

                function treeOnload(){ 

                l$Tree = $("tree_modal div.tree");  --> My Region ID

                $.tree.reference(l$Tree).settings.callback.onselect = function(NODE, TREE_OBJ){ 

                  $("#P112_CAT_CD").val($(NODE).attr('CAT_CD'));  --> P112_CAT_CD is Return Value on parent page, CAT_CD is the tree "value"

                  $("#PRODUCT").trigger("apexrefresh");   --> PRODUCT is the modal region name

                }; 

                };

                 

                But it doesn't work at all and how to close modal region?

                • 5. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
                  Tom Petrus

                  - You need to adapt the code of course. It might be you do not need the region refresh - I included it as example code you could perform on a node select.

                  - $("#P112_CAT_CD").val($(NODE).attr('CAT_CD'));

                  You changed the .attr("id") to .attr("CAT_CD") . Don't do this. What I meant with my comment is that CAT_CD is the value you select into the VALUE column in the tree select. This column is translated to the ID attribute of the tree node in the html. You're now trying to retrieve the value of attribute CAT_CD from a node - which it will not have. Hence, the value will be nothing.

                  - You put "-->" in the code above - I hope this is only because you wanted to provide some more info here and is not in the actual code? // is how to comment a single line, much like -- in plsql

                  - do you run treeOnload() on page load, or trying from the console? Without running it nothing will happen since nothing will be initialized.


                  - what do you call to start the modal? $("regionselector").dialog() ? In that case .dialog("close")

                  • 6. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
                    zoomok

                    Hi Tom,

                     

                    I have tried all the scripts but it didn't work..^^

                     

                    So, I created sample on apex.oracle.com as follows

                    https://apex.oracle.com/pls/apex/f?p=71702:1:0::NO

                     

                    Once I inserted "Test01" on Product Code and click tree button then tree modal show.

                    After I selected any category, the category code is returned main table. but the product code that I have inserted becomes blanks.

                     

                    Workspace : zoomok

                    User name : zoomok@gmail.com

                    Password : Dkagh0318!

                     

                    Sorry to bother you

                    • 7. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
                      Tom Petrus

                      Hey "zoomok",

                       

                      Great - an example would've been my next request anyway I've taken a look and changed your demo page to work as you'd want.

                      Things of note:

                      - Tree SQL source: NO link value! A link value will generate some apex code which will redirect you to the link. That will always be a page redirect, hence a page rerender, and not what you want! Leaving it NULL allows us to interact with the tree interactively through javascript

                      - Following code in the page - javascript - global functions and variables:

                      function treeOnload(){
                        var l$Tree = $("#tree_modal div.tree"); // get the tree instance
                        // handle the onselect event of the tree
                        $.tree.reference(l$Tree).settings.callback.onselect = function(NODE, TREE_OBJ){
                          $s( "P112_CAT_CD", $(NODE).attr('id') ); // get the VALUE of the node and put it in item P112_CAT_CD
                          closeModal(); // close the active modal region
                        };
                      };
                      
                      

                       

                      - In the javascript - on load section I added a call to this procedure:

                      treeOnload(); // initialize the tree with our settings
                      
                      

                       

                      And that's it! I was not aware you were using "openModal". There are various ways to implement modal regions, so it is important to know how one did it for us to know what to do with it.

                       

                      FYI - you should change your credentials now. And mark the answer(s) that helped you or are correct, please.

                      • 8. Re: Tree modal region as a popup....After click the value in tree...how to avoid parent page is refreshing
                        zoomok

                        Hi Tom,

                         

                        Thanks for your time and code really. It works perfectly ^^

                         

                        Have a nice weekend.

                         

                        Nicholas