7 Replies Latest reply: Apr 8, 2014 12:48 AM by SAYYED RSS

    Calendar with popup window

    SAYYED

      Hi,

       

      I am having an application emp calendar where calendar page 1 and popup page 2.

       

      and i have written jquery as

       

      whenever user on-mouse-over the emp name, popup page 2 appears.

       

      Here i am having the problem when after mouse over no buttons are working(< Previous,Next >...etc), to make it work i need to refresh the page.

       

      Please help me what changes needs to be done in my jquery to make all buttons work  once mouse( mouse over) removed from emp name

       

      Please check below mentioned example application for more reference.

       

      http://apex.oracle.com/pls/apex/f?p=33780:1:106987599190291

       

      and jquery user for popup page

       

      <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>

      <script type="text/javascript">

      $(function() 

        var hideDelay = 500;   

        var currentID; 

        var hideTimer = null; 

       

        var container = $('<div id="personPopupContainer">' 

            + '<table width="500" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">' 

            + '<tr>' 

            + '   <td class="corner topLeft"></td>' 

            + '   <td class="top"></td>' 

            + '   <td class="corner topRight"></td>' 

            + '</tr>' 

            + '<tr>' 

            + '   <td class="left"> </td>' 

            + '   <td><div id="personPopupContent"></div></td>' 

            + '   <td class="right"> </td>' 

            + '</tr>' 

       

            + '</table>' 

            + '</div>');

       

        $('body').append(container); 

        $('.personPopupTrigger').live('mouseover', function()  { 

            var settings = $(this).attr('rel').split(',');

            var linkid= settings[0];

            var linkpage= settings[1];

            var linkitem= settings[2];

       

            if (currentID == '') 

                return; 

            if (hideTimer) 

                clearTimeout(hideTimer); 

       

            var pos = $(this).offset(); 

            var width = $(this).width(); 

            container.css({ 

                left: (pos.left + width) + 'px', 

                top: pos.top - 5 + 'px' 

            }); 

            $('#personPopupContent').html(' ');

            $.ajax({ 

                type: 'GET', 

                url: 'f?p=&APP_ID.:'+linkpage+':&APP_SESSION.::::'+linkitem+':'+linkid, 

                dataType: 'html',

                success: function(result) 

                {               

                        $('#personPopupContent').html(result); 

                } 

            }); 

            container.css('display', 'block'); 

        }); 

       

        $('.personPopupTrigger').live('mouseout', function() 

        { 

            if (hideTimer) 

                clearTimeout(hideTimer); 

            hideTimer = setTimeout(function() 

            { 

                container.css('display', 'none'); 

            }, hideDelay); 

        }); 

       

        $('#personPopupContainer').mouseover(function() 

        { 

            if (hideTimer) 

                clearTimeout(hideTimer); 

        }); 

       

        $('#personPopupContainer').mouseout(function() 

        { 

            if (hideTimer) 

                clearTimeout(hideTimer); 

            hideTimer = setTimeout(function() 

            { 

                container.css('display', 'none'); 

            },hideDelay); 

        });

      });

       

       

      </script>

       

      <style type="text/css">

        #personPopupContainer  { 

        position:absolute;

          top:0;

          right:0;  

          display:none; 

          z-index: 20000; 

          margin-top: 0px;

          margin-left: -10px;

       

      .personPopupPopup  { 

       

      #personPopupContent  { 

          background-color: #FFF; 

          min-width: 175px; 

          min-height: 50px; 

       

      .personPopupPopup .personPopupImage  { 

          margin: 5px; 

          margin-right: 15px; 

       

      .personPopupPopup .corner   { 

          width: 19px; 

          height: 15px; 

           

      .personPopupPopup .topLeft   { 

          background: url(#APP_IMAGES#balloon_topLeft_blue.png) no-repeat; 

           

      .personPopupPopup .bottomLeft   { 

          background: url(#APP_IMAGES#balloon_bottomLeft_blue.png) no-repeat; 

           

      .personPopupPopup .left   { 

          background: url(#APP_IMAGES#balloon_left_blue.png) repeat-y; 

           

      .personPopupPopup .right   { 

          background: url(#APP_IMAGES#balloon_right_blue.png) repeat-y; 

           

      .personPopupPopup .topRight   { 

          background: url(#APP_IMAGES#balloon_topRight_blue.png) no-repeat; 

           

      .personPopupPopup .bottomRight   { 

          background: url(#APP_IMAGES#balloon_bottomRight_blue.png) no-repeat; 

       

      .personPopupPopup .top   { 

          background: url(#APP_IMAGES#balloon_top_blue.png) repeat-x; 

           

      .personPopupPopup .bottom   { 

          background: url(#APP_IMAGES#balloon_bottom_blue.png) repeat-x; 

          text-align: center; 

       

       

       

      }

       

      </style>

       

      Please help to overcome this issue.

       

      Thanks and regards,

      Ibrahim Sayyed.

        • 1. Re: Calendar with popup window
          jrimblas

          It's hard to know exactly without login in, however, I'm pretty confident that the problem is this line:

          <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>


          Remove it.  jQuery is already loaded and included with APEX.  You are loading it again.


          I can see in the console that when I click on the Next/Prev I get the following error:

          Uncaught TypeError: Cannot call method 'ajax_calendar' of undefined

          I think the ajax_calendar function is being lost when the new jQuery is added.  It seems you're adding it as part of the popup.


          At any rate, start with that.


          Thanks

          -Jorge




          • 2. Re: Calendar with popup window
            SAYYED

            Hi Jorge,

             

            Thank you so much for your replay.

             

            I fallowed as you said but still i am facing that problem.

             

            Please use below mentioned login details for more references.

            https://apex.oraclecorp.com/

            Workspace: TEST2244

            Username:  sayyedibrahim19@gmail.com

            Password: ibrahim

             

             

            Thanks and regards,

            Ibrahim Sayyed.

            • 3. Re: Calendar with popup window
              jrimblas

              The issue was that you were including ALL of page 2 into page 1.  Effectively overriding the content and confusing APEX.

               

              Ok, here's what I did.

              I added empReport to the Static ID field of the EMP report on p2.

              This way I can just grab the report from the whole page.

               

              Then in your success AJAX call I changed from

              $('#personPopupContent').html(result);

              to

              $('#personPopupContent').html($(result).find("#empReport"));

              This way, you don't include the WHOLE page inside your personPopupContent div, only the report.

               

              If you have the need to include a whole page as modal, then there's a plugin for that ( - Dynamic Action Plugin - SkillBuilders Modal Page).  Or you could do it yourself by placing that extra content into an iframe.

               

              Thanks

              -Jorge

              • 4. Re: Calendar with popup window
                SAYYED

                Hi Jorge,

                 

                Thank you so much.

                 

                your wonderful support really appreciated.

                 

                Thanks a lot.

                 

                Thanks and regards,

                Ibrahim Sayyed.

                • 5. Re: Calendar with popup window
                  jrimblas

                  You're very welcome.  Glad I could help.

                  Thanks

                  -Jorge

                  • 6. Re: Calendar with popup window
                    SAYYED

                    Hi Jorge,

                     

                    In the above query i need one more help.

                     

                    the popup box needs to be display left and right dynamically.

                     

                    Ex:-
                    If user select on event 5th-APR-2014 the popup box displaying out of the screen(margin), but in this case popup should display left side of the mouse point(with in the margin).

                     

                    Please let me know what changes needs to done to achieve this.

                     

                    Thanks and regards,

                    Ibrahim Sayyed.

                    • 7. Re: Calendar with popup window
                      jrimblas

                      Hmmm, that starts getting complex really quick. What I would do is use a plugin that does tool tips. Check this one out qTip2 - Pretty powerful tooltips

                      I think it will be a lot easier and the results will be better.

                       

                      Thanks

                      Jorge