Item not being saved when item is in a jquery modal dialog

Question

Hi all,
I followed instructions found here :
http://shijesh.wordpress.com/2010/04/10/jquery-modal-form-in-apex-4/
to create a jquery modal dialog, this is the code I added in html header :
<link rel="stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/
redmond/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>
<script type="text/javascript">
$( function() {
   $('#ModalForm').dialog(
        modal : true ,
        autoOpen : false ,
        width : 425,
        closeText : 'Close',
        stack : false,
        resizable : false,
        buttons  : {
            Cancel : function() {
                     closeForm();
            Save : function() {
                updateMEMOVELD();
function openForm()
    $('#ModalForm').dialog('open');
function closeForm()
    //$('#ModalForm input[type="textarea"]').val('');
    $('#ModalForm').dialog('close');
function updateMEMOVELD ()
   var get = new htmldb_Get(null, &APP_ID.,   
                    'APPLICATION_PROCESS=f_memo', 0);
   get.add('P9_MEMOVELD',$v('P9_MEMOVELD'));
   var gReturn= get.get();
   //alert(gReturn);
   //alert($v('P9_DATUM'));
  $s('P9_MEMOVELD',gReturn);
  alert($v('P9_MEMOVELD'));
  $s('P9_MEMOVELD_COPY',$v('P9_MEMOVELD')); 
  $('#ModalForm').dialog('close');
</script>my situation is a little different, my modal does not have to perform an sql update, just change a field
the user will then save in the main form
for some reason the field never gets updated in the db
I even created a on demand application process called f_memo :
BEGIN
  APEX_UTIL.SET_SESSION_STATE('P9_MEMOVELD',:P9_MEMOVELD);
  htp.p(:P9_MEMOVELD);
END;why is my field not send to the db ?
it works when I delete this from the region header :
< d i v id="ModalForm" title="Add Person" style=" d isplay:n one  "   >but then of course I no longer have a modal dialog
what's wrong ?
I put the code online at apex.oracle.com
workspace XONIXRS
login/password demo/demorun the application
click on lijst facturen (invoices) (in the right sidebar region)
then click on the zoeken (search) button
a report appears, click on edit on the first line (200900017)
now a form appears, click on the outright button memo
now the modal shows up, change the field and click on save
click on ok (for the alert) and then click on Save invoice
you will remain on the same page
now click on annuleren
and then click on edit on the first line (200900017) again
then click on memo again, you will see the memo has not been changed
how comes ?
Kr
Martin

Answer 1

The issue is that creating a modal of a region lifts that region from the HTML. Just have a look at the DOM when you run your page and not the source html, because that does not reflect changes to the dom made on page load. This means that your memo-field is removed from the FORM-tags, and effectively won't submit to session state. The item is not processed when you submit the page! You can track that through debugging your page. Memo is not saved and not processed.
Trying to save the value to session state is not enough, it doesn't really matter in this case. The moment you submit the page, the session state will get overwritten by the submitted values of the items.
So what i did:
<ul>
<li>move P9_MEMOVELD to region FACTUUR, together with all the other db fields</li>
<li>change the type to hidden</li>
<li>set value protected to NO</li>
<li>in the modal region create a new page item P9_MEMOVELD_POP, type textfield</li>
<li>set the source to always use a page item as source, with source P9_MEMOVELD</li>
<li>changed function updatememoveld:
function updateMEMOVELD ()
   var get = new htmldb_Get(null, &APP_ID.,   
                    'APPLICATION_PROCESS=f_memo', 0);
   get.add('P9_MEMOVELD',$v('P9_MEMOVELD'));
   var gReturn= get.get();
   //alert(gReturn);
   //alert($v('P9_DATUM'));
  $s('P9_MEMOVELD',gReturn);
  alert($v('P9_MEMOVELD'));
  $s('P9_MEMOVELD_COPY',$v('P9_MEMOVELD')); 
  $s('P9_MEMOVELD',$v('P9_MEMOVELD_POP'));
  $('#ModalForm').dialog('close');
}Whether you want or need the session state set is up to you, it depends on if you use this somewhere else dynamically on the page and thus would influence results there, but i don't think it will (it's a memo field...)</li>
</ul>
Extra remarks:
<ul>
<li>be careful with including jquery libraries! The standard libraries are included, yet you add previous versions too! (1.4.2) This might lead to issues...</li>
<li>use your templates better. Why would you wrap a region in div tags? Change or add a region template to be div tags. You can then easily assign a static id to this region, and target it. This will save you from wrapping wrapped wrappers (cause that is what the generated code looks like in the end).</li>
</ul>