How to create a popup windows

Question

Hi
I have seen in Simon Collins application http://apex.oracle.com/pls/apex/f?p=20411:1:888811517916461 a popup windows.
Can anyone help me, buil a popup windows like that or is there any tutorial where i can see how its done.
Tanks

Answer 1

Hi,
You should have three processes: addPerson, getPerson and updatePerson. All three are "On Demand" processes. This is the PL/SQL code for each:
addPerson
BEGIN
INSERT INTO EMP (ENAME, JOB, MGR, HIREDATE, SAL, COMM)
VALUES (:P1_ENAME, :P1_JOB, :P1_MGR, TO_DATE(:P1_HIREDATE, 'DD/MM/YYYY'), :P1_SAL, :P1_COMM);
END;getPerson
DECLARE
vRESULT VARCHAR2(1000);
BEGIN
SELECT ENAME || ',' || JOB || ',' || MGR || ',' || TO_CHAR(HIREDATE, 'DD/MM/YYYY') || ',' || SAL || ',' || COMM
INTO vRESULT
FROM EMP
WHERE EMPNO = :P1_EMPNO;
HTP.P(vRESULT);
END;updatePerson
BEGIN
UPDATE EMP
SET ENAME = :P1_ENAME,
JOB = :P1_JOB,
MGR = :P1_MGR,
HIREDATE = TO_DATE(:P1_HIREDATE, 'DD/MM/YYYY'),
SAL = :P1_SAL,
COMM = :P1_COMM
WHERE EMPNO = :P1_EMPNO;
END;On the page, in the page's HTML Header setting, I have:
<script type="text/javascript">
$(function() {
   $('#ModalForm').dialog(
    modal : true,
    autoOpen : false,
    buttons  : {
      Cancel : function() {
        closeForm();
      Add : function() {
        $('#ModalForm input[type="text"]').removeClass('ui-state-error');
         var valid = true;
        $('#ModalForm input[type="text"]').each(function() {
          if($(this).val().length == 0)
            $(this).addClass('ui-state-error');
            message = 'Error: ' + $(this).attr('id').substr(3).replace('_', ' ') + ' is blank';
            $('.msg').text(message);
            valid = false;
            return false;
        if(valid)
           addPerson();
function openForm(pID)
   $('#ModalForm').dialog('open');
   $('#ModalForm input[type="text"]').removeClass('ui-state-error');
   var btns = {};
   btns['Cancel'] = function() { closeForm() };
   $s('P1_ENAME','');
   $s('P1_JOB','');
   $s('P1_MGR','');
   $s('P1_HIREDATE','');
   $s('P1_SAL','');
   $s('P1_COMM','');
   if(pID)
      initilizeForm(pID);
      $('#ModalForm').dialog({ title : 'Update'});
      btns['Save Changes'] = function(){updatePerson(pID);};
   else
      $('#ModalForm').dialog({ title : 'Add'});
      btns['Add'] = function(){addPerson();};
   $('#ModalForm').dialog('option', 'buttons', btns);
function closeForm()
  $('#ModalForm input[type="text"]').val('');
  $('#ModalForm input[type="text"]').removeClass('ui-state-error');
  $('#ModalForm').dialog('close');
function initilizeForm(pID)
   var ajaxRequest = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getPerson', 0);
   ajaxRequest.add('P1_EMPNO', pID);
   var ajaxResult = ajaxRequest.get().split(',');
   $s('P1_ENAME', ajaxResult[0]);
   $s('P1_JOB', ajaxResult[1]);
   $s('P1_MGR', ajaxResult[2]);
   $s('P1_HIREDATE', ajaxResult[3]);
   $s('P1_SAL', ajaxResult[4]);
   $s('P1_COMM', ajaxResult[5]);
function addPerson(pID)
   if (pID)
     updatePerson(pID);
   else
     var ajaxRequest = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=addPerson', 0);
     ajaxRequest.add('P1_ENAME', $v('P1_ENAME'));
     ajaxRequest.add('P1_JOB', $v('P1_JOB'));
     ajaxRequest.add('P1_MGR', $v('P1_MGR'));
     ajaxRequest.add('P1_HIREDATE', $v('P1_HIREDATE'));
     ajaxRequest.add('P1_SAL', $v('P1_SAL'));
     ajaxRequest.add('P1_COMM', $v('P1_COMM'));
     ajaxRequest.get();
     ajaxRequest = null;
     closeForm();
     gReport.search('SEARCH');
function updatePerson(pID)
   if(!valid())
      return;
   var ajaxRequest = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=updatePerson', 0);
   ajaxRequest.add('P1_EMPNO', $v('P1_EMPNO'));
   ajaxRequest.add('P1_ENAME', $v('P1_ENAME'));
   ajaxRequest.add('P1_JOB', $v('P1_JOB'));
   ajaxRequest.add('P1_MGR', $v('P1_MGR'));
   ajaxRequest.add('P1_HIREDATE', $v('P1_HIREDATE'));
   ajaxRequest.add('P1_SAL', $v('P1_SAL'));
   ajaxRequest.add('P1_COMM', $v('P1_COMM'));
   ajaxRequest.get();
   ajaxRequest = null;
   closeForm();
   gReport.search('SEARCH');
function valid()
   $('#ModalForm input[type="text"]').removeClass('ui-state-error');
   var valid = true;
   $('#ModalForm input[type="text"]').each( function() {
       if( $(this).val().length == 0)
           $(this).addClass('ui-state-error');
           message = 'Error: ' + $(this).attr('id').substr(3).replace('_', ' ') + ' is blank';
           $('.msg').text( message );
           valid = false;
           return false;
   return valid;
</script>And I have an HTML region on the page with the following settings:
Region Header:
<div id="ModalForm" style="display:none; width:500px;">Region Footer:
</div>This region contains all of the page items - P1_EMPNO (hidden), P1_ENAME (text), P1_JOB (text), P1_MGR (select list), P1_HIREDATE (datepicker), P1_SAL (text) and P1_COMM (text)
Apart from a bit of styling here and there, that's it
Andy