1 Reply Latest reply: Apr 3, 2014 8:42 AM by jrimblas 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

       

      Workspace: TEST2244

      Username:  sayyedibrahim19@gmail.com

      Password: ibrahim

       

      and jquery user for popup page

       

       

      <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.