Modal Form in APEX

http://apex.oracle.com/pls/apex/f?p=20411:1:888811517916461


Database :-

Create a table with following columns :-
id
sex
first_name
Last_name


1)Create a HTML Region (NAME : modal FOrm )

---ADD this in Region Header of it


2) Now create the following on the above region (MODAL FORM )


10 P1_ID Hidden
20 P1_FIRST_NAME Text Field
30 P1_LAST_NAME Text Field
40 P1_SEX Radio Group


3) Create a sql report as

select * from Persons;


4) Create a button calles "ADD Person " on this report region "

Redirect to URL
Javascript:OpenModalForm();


5) Add the following code for onload event of page :-

Page -> make the cursor on first field as disable , and add this following code for 3.2 , else for 4.0 add it directly to onload region of the page .

$('#ModalForm').dialog({
autoOpen : false ,
modal : true ,
buttons : { dummy : function(){} } ,
width : 400
});

---> this makes a created html region as the nonvisible and makes it modal and craetes a jquery button on it.


Copy paste the following in the header part of the page .


function openModalForm(pID)
{
$('#ModalForm input[type="text"]').removeClass('ui-state-error');
$('#msg').html('');
var btns ={};
btns['Cancel'] = function(){ closeForm() };
if( pID )
{
$('#ModalForm').dialog({title : 'Update' });
btns['Save Changes'] = function(){ addUpdate(pID) };
initilizeForm(pID);
}
else
{
$('#ModalForm').dialog({ title : 'Add'});
btns['Add'] = function(){ addUpdate() };
}
$('#ModalForm').dialog('option', 'buttons', btns);
$('#ModalForm').dialog('open');
}


function initilizeForm( pID )
{
var ajaxRequest = new htmldb_Get( null , &APP_ID. ,'APPLICATION_PROCESS=getPerson' , 0);
ajaxRequest.addParam( 'x01' , pID);
ajaxResult = ajaxRequest.get().split(',');

$s('P1_FIRST_NAME' , ajaxResult[0]);
$s('P1_LAST_NAME' , ajaxResult[1]);
$s('P1_SEX' , ajaxResult[2]);

}



function closeForm()
{
$('#ModalForm input[type="text"]').each( function() {
$(this).val('');
});
$('#ModalForm').dialog('close');
}

function addUpdate( pID )
{
if( !valid() )
return;
if(!pID)
{
var ajaxRequest = new htmldb_Get( null , &APP_ID. , 'APPLICATION_PROCESS=addPerson' , 0);
}
else
{
var ajaxRequest = new htmldb_Get( null , &APP_ID. , 'APPLICATION_PROCESS=updatePerson' , 0);
ajaxRequest.addParam('x04', pID);

}
alert($v('P1_FIRST_NAME'));
ajaxRequest.addParam('x01', $v('P1_FIRST_NAME'));
ajaxRequest.addParam('x02', $v('P1_LAST_NAME'));
ajaxRequest.addParam('x03', $v('P1_SEX'));
var ajaxResult = ajaxRequest.get();
alert( ajaxResult );
ajaxRequest = null ;
closeForm();
if( ajaxRequest !='Error')
gReport.search('SEARCH');
}


function valid()
{
$('#ModalForm input[type="text"]').removeClass('ui-state-error');
var valid = true;
var msg ='';
$('#ModalForm input[type="text"]').each( function() {
if( $(this).val().length == 0)
{
$(this).addClass('ui-state-error');
err_msg='Error : ' + $(this).attr('id').substr(3).replace('_',' ') + ' is blank'
msg = msg.length==0 ? err_msg : msg + '
' + err_msg;
valid = false;
}

});
$('#msg').html(msg);
return valid;
}



6) Create an 3 application Process ...


Go to Shared Componenets -> Application Process -> On damand application Process ..


a) Process Point on Demand
Name:getPerson
Type:PLSQL Anonymous Block .


Source :-

declare
l_id number;
l_first_name varchar2(100);
l_last_name varchar2(100);
l_sex char(1);
begin
l_id := wwv_flow.g_x01;
select FIRST_NAME , LAST_NAME , SEX into l_first_name , l_last_name , l_sex from PERSON where ID = l_id;
htp.prn(l_first_name || ',' || l_last_name || ',' || l_sex );
end;



b)Process Point on Demand
Name:addPerson
Type:PLSQL Anonymous Block .


Sorce :-

declare
l_first_name varchar2(100);
l_last_name varchar2(100);
l_sex char;
begin
l_first_name := wwv_flow.g_x01;
l_last_name := wwv_flow.g_x02;
l_sex := wwv_flow.g_x03;
insert into person( first_name , last_name ,sex)
values( l_first_name , l_last_name , l_sex);
htp.prn('Record successfully added');
EXCEPTION
when others then
htp.prn('Error');
end;


c))Process Point on Demand
Name:updatePerson
Type:PLSQL Anonymous Block .



declare
l_first_name varchar2(100);
l_last_name varchar2(100);
l_sex char(1);
l_id number;
begin
l_first_name := wwv_flow.g_x01;
l_last_name := wwv_flow.g_x02;
l_sex := wwv_flow.g_x03;
l_id := wwv_flow.g_x04;
update Person
set
FIRST_NAME = l_first_name ,
LAST_NAME = l_last_name ,
SEX = l_sex
where ID = l_id;
htp.prn('Record Successfully updated ');
EXCEPTION
when others then
htp.prn('Error');
end;


Now run the application