Jquery modal form

Hello,
Based on this thread Re: Implement jQuery modal form I have created my jquery modal sample.
It opens correctly when I select 'Create' or 'Edit' but does not update the value into the database table.
Can one help me please?
Thanks,
Bhavin

Hi,
Have you created onDemand process to update the record in the database.
Eg. make the Create code of the button similar to below
  'Create : function(){
      addRecord();
  } The create function addRecord()
function addRecord()
   var ajaxRequest = new htmldb_Get( null , &APP_ID. , 'APPLICATION_PROCESS=myApplicationProcess' , 0);
   ajaxRequest.addParam( 'x01' , $('P1_ITEM1');
   ajaxRequest.addParam( 'x01' , $('P1_ITEM2');
   ajaxRequest.addParam( 'x01' , $('P1_ITEM3');
   ajaxResult = ajaxRequest.get();
}Now create an ondemand process.. go to shared component .. click on application process and in process point select on demand the last option. now in the source enter the code to insert the record..
declare
  item1 varchar2(100);
  item2 varchar2(100);
  item3 varchar2(100);
begin
    item1 := wwv_flow.g_x01;
    item2 := wwv_flow.g_x02;
    item3 := wwv_flow.g_x03;
    insert into myTable values( item1 , item2 , item3);
    htp.prn('record successfully added');
EXCEPTION
   when other
   htp.prn('Error adding record');
end;Here is an example : http://apex.oracle.com/pls/apex/f?p=12060:3
Regards,
Shijesh

Similar Messages

  • JQuery modal form - Open another page

    Hi ,
    I have implemented a Jquery modal form in my application.
    I have a region and in the header I have the following code :
    <div id="transaction" title="Update transaction details" > . This is basically a form region and has around 35 items.
    I call this through the Jquery function
    $("transaction").dialog('open'); This works well for me.
    Now I want to move these items to a different page.
    How can I call this page as a modal dialog form ?
    I would like to do :
    $(NEW_PAGE).dialog('open') // NEW PAGE can be an URL to the new page ?
    How I can achieve this functionality ?
    Thanks,
    Dippy

    create an html no template region:
    add a html frame into source
    <frame id ="eventreg" src="f?p=&APP_ID.:your application id:&APP_SESSION.::NO:your page id:your parametere:&your parameter value." height="100%" width="100%" frameborder="0"></iframe>
    region header section
    <div id="yourdivid">
    region footer section
    </div>
    page header add the javascript
    $(document).ready(function(){
    $("#eventRegUpd").dialog({bgiframe: true,
                               width: 775,
                                     height: 525, 
                                     autoOpen: false, 
                                     modal: true                                 });
    hope this will help you
    regards

  • Implement jQuery modal form

    Hi,
    For a long time I am trying to find anything related to implementation of modal popup windows into Apex and so far no luck.
    Here is a link:
    [http://jqueryui.com/demos/dialog/#modal-form]
    and that is close to whatever I want to get. I have a page with lots of items and buttons, by clicking on one of the buttons I want modal window to popup and value from Parent Page (stored in hiden item) passed to modal window. In modal window I want to enter some data and by clicking "submit" data will go to the table and window shold be closed after that. In the same time I need Parent Page to get just entered data from modal (or just simply be refreshed)............ so it is all just basic stuff of popups and modals.....but I can not get this working.
    Anyone has done it before? Any resuls?
    Thanks a lot

    Hi All,
    I have outlined the steps to achieve the modal form below ......
    Include the below in your page template header section :
    Latest Jquery JS , ui.core.js ,ui.dialog.js,
    ui.draggable.js,ui.resizable.js // optional
    (You can download these JS files from the Jquery website)
    1) Create a Region with the items you wish to see in the modal dialog form
    2) Place the following in the region header section
    <div id="dialog" title"Create New User"> 3)In the region footer add
    </div>Add the following Javascript in your page template :
    <script>
    $(document).ready(function(){
    $("#dialog").dialog({
    bgiframe: true,
    autoOpen: false,    // hides the window by default and you will use function $("#dialog").dialog('open'); to open it
    height: 300,
    modal: true
    </script>For the Create button to open the dialog, call a javascript fucntion :
    function f_show_dialog()
    $("#dialog").dialog('open');
    }For the Modal form Submit button which inserts a row :
    function f_insert_row()
    doSubmit('SUBMIT');
    Create a Pl/sql Process that executes with the condition
    Request=expression1 where expression1 is SUBMIT
    Include a branch to the same page for this SUBMIT button.
    Phew ! Hope this was helpful.I will try to put an example on OTN soon....
    Thanks,
    Dippy
    Edited by: Dippy on Feb 19, 2010 9:45 AM                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

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

    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

    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>

  • Jquery Modal Window

    Hi,
    I founded very fine Modal and Popup Windows on Jquery Website, does anyone has a Step by Step Tutorial
    on how to integrate such thinks in Apex 3.2
    regards.
    MDK.

    Hello MDK,
    In the following link Jari & Paul nicely explained how tos on it, it has everything you need to implement.
    Re: Implement jQuery modal form
    Hope that this will help you.
    Regards,
    Bhavin

  • Jquery Modal Dialog - passing item values

    Hi Everyone,
    I know...there are a lot of information about how to implement modal dialog form.....but I cannot find an answer on how to deal with my situation.
    What I am trying to achieve is to create a form in apex page, assign items to this form , add Jquery script to the page header where I am going to call this form into modal dialog ..... fill out items in modal dialog and when click on "Create" - insert value of the items into my table.
    Yes, this is common thing to do (like here http://shijesh.wordpress.com/2010/04/10/jquery-modal-form-in-apex-4 )....but I am trying to find a way where I don't need to create function for my "Crete" button which will call OnDemand Process. Anyways, here is what and how I am trying to do this and please correct me where I am wrong.
    *1.* I do have a table called "inventory_modal", ID column has a PK and trigger/sequence is there too.
    *2.* Do have a page with Form Region with data entry based on my table and Static ID "myModalForm".
    *3.* Do have items assigned to my From Region :
    :P23_ID (hidden):P23_INVENTORY_DATE (data picker)
    :P23_ASSET_ID (number)
    :P23_CONDITION (text field)
    :P23_INVENTORY_OWNER (text field)
    :P23_STATUS (text field)
    :P23_LOCATION (text field)
    :P23_COMMENTS (text field)>
    *4.* Do have a button called "Open Modal" to open my form in dialog window with redirect to URL: javascript:openForm();*5.* Do have an On Submit - After Computations and Validations process
    insert into inventory_modal  (id, inventory_date, asset_id, condition, inventory_owner, status, location, comments)
                   values (:P23_ID, to_date(:P23_INVENTORY_DATE,'&APP_DATETIME_FORMAT.'), :P23_ASSET_ID, :P23_CONDITION,
                              :P23_INVENTORY_OWNER, :P23_STATUS, :P23_LOCATION, :P23_COMMENTS); the process is Conditional with Request = Expression1 , where Expresseion1 is set to "CREATE".
    *6.* And here is HTML Header Jquery script where I am calling "myModalForm" form to open in dialog window and by selecting "Create" button passing "CREATE" vallue back to page which should fire my process to insert data:
    <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() {
       $('#myModalForm').dialog(
            modal : true ,
            autoOpen : false ,
            buttons  : {
                Cancel : function() {$(this).dialog("close")},
                Create : function() {$(this).dialog("close");doSubmit('CREATE')}
    function openForm()
        $('#myModalForm').dialog('open');
    So, and here is my question. I don't want to use any OnDemand Process, I would like dialog window to pass values to my regular procedure in my page. I had an assumption that Create : function() {$(this).dialog("close");doSubmit('CREATE')} will do the trick but apparently it doesn't. Is there any way to do it?
    Here is my testing page : http://apex.oracle.com/pls/apex/f?p=39330:23
    If you click on Open Modal, it will open my form in modal dialog window, on create it will send "CREATE" request to my procedure which will insert data into table....but it unfortunately it will insert only NULLS into my table (only ID column will have data as it has trigger/sequence). So, click Create and then refresh the page.
    Thanks

    Hi Jari,
    Thanks for your surrestion.
    I am not exactly sure on how to set ajax item session, does this looks ok for whatever I want to do?
    <script type="text/javascript">
    $( function() {
       $('#myModalForm').dialog(
            modal : true ,
            autoOpen : false ,
            buttons  : {
                Cancel : function() {$(this).dialog("close")},
                Create : function() {
                                              ajaxRequest.add('P23_ID',html_GetElement('P23_ID').value);
                                              ajaxRequest.add('P23_INVENTORY_DATE',html_GetElement('P23_INVENTORY_DATE').value);
                                              ajaxRequest.add('P23_ASSET_ID',html_GetElement('P23_ASSET_ID').value);
                                              ajaxRequest.add('P23_CONDITION',html_GetElement('P23_CONDITION').value);
                                              ajaxRequest.add('P23_INVENTORY_OWNER ',html_GetElement('P23_INVENTORY_OWNER ').value);
                                              ajaxRequest.add('P23_STATUS',html_GetElement('P23_STATUS').value);
                                              ajaxRequest.add('P23_LOCATION',html_GetElement('P23_LOCATION').value);
                                              ajaxRequest.add('P23_COMMENTS',html_GetElement('P23_COMMENTS').value);
                                              ajaxResult = ajaxRequest.get();
                                              $(this).dialog("close");
                                              doSubmit('CREATE');}
    function openForm()
        $('#myModalForm').dialog('open');
    </script>

  • Modal Form

    Hi,
    I have created a modal form using the code
    " <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() {
    $('#ModalForm1').dialog(
    modal : true ,
    autoOpen : false ,
    buttons : {
    Cancel : function() {
    closeForm();
    Add : function() {
    addPerson();
    function openForm()
    $('#ModalForm1').dialog('open');
    function closeForm()
    $('#ModalForm1 input[type="text"]').val('');
    $('#ModalForm1').dialog('close');
    function addPerson()
    var ajaxRequest = new htmldb_Get( null , &APP_ID. ,
    'APPLICATION_PROCESS=addDepartment', 0);
    ajaxRequest.add( 'P7_DEPT_ID', $v('P7_DEPT_ID'));
    ajaxRequest.add( 'P7_DEPT_NAME', $v('P7_DEPT_NAME'));
    ajaxRequest.add( 'P7_DEPT_ISSUE', $v('P7_DEPT_ISSUE'));
    var gReturn = ajaxRequest.get();
    if(gReturn)
    { alert(gReturn) }
    else
    { ajaxRequest = null;
    closeForm();
    doSubmit('SEARCH'); }
    </script>
    Button: Template based button
    action-Redirect to url
    javascript:openForm();
    Here i want to create an another modal form with another button on same page. I tried with the button attributes but it won't work.
    so, how can i create an other modal form????

    Tulasi 1243 wrote:
    but i couldn't find how to use those plugins to create another modal form..As stated in the documentation (http://www.skillbuilders.com/download/download-resource.cfm/instructions.pdf?file=Oracle-Apex/plugins/modal_page//instructions.pdf), you can identify each Modal page with an identifier:
    Modal Page ID
    The Modal Page ID setting is used to associate an identifier, such as "create-customer-page", with the modal page that has been opened. When the modal page closes, this identifier will be passed back with the event object so that the closing of one modal page can be differentiated from another. The value can be accessed from the data object of "this" in a Dynamic Action with: this.data.modalPageId. If not all modal dialogs on a page have a Modal Page ID specified, you will first need to test if the modalPageId exists.
    You should be able to open multiple modal pages.
    Robert
    http://apexjscss.blogspot.com

  • JQuery Modal Dialog

    Hello
    I want to create a jquery modal dialog.
    I follow Denes Kuniceks example (http://apex.oracle.com/pls/otn/f?p=31517:257:2686314880885355:::RP,::)
    It works fine.
    With one exception: I also start with a report, but this report contains a parameter that is passed from another page.
    So the query is something like
    select ename
    , sal
    , comm
    from emp
    where empno = :p23_empno
    After executing the on demand process this parameter is cleared so the report returns no rows.
    How can I prevent the parameter from being cleared??
    Kind Regards Erik

    I just want to return to my original report page.Then <u>remove the "doSubmit('SEARCH'); " line from the "addPerson() " function </u> (or the equivalent function you have created). So the form closes without doing anything to main page.
    Since you are on apex 4, you dont need to use an ondemand process for this (there is even a page specific ondemand component called callback for specific ajax calls from that page) , but simply define a Dynamic action that fire when the button is clicked(remove the button action and add an HTML id that you can use in D.A to select the button Or you can even use a region button for this).
    Choose execute PLSL block, use the same Dynamic action code and add all those items to the "Items to Submit" option.
    If you want to refresh the report it would be as simple as adding another true action of type refresh region and choose the report region.

  • Making a Form as Modal Form

    Dear All,
    Please let me know how can I make a form as Modal Form ?
    Regards,
    Noor hussain

    Hi Noor,
    I think there are two possible design.
    The modal form can be mobal for the application or for a parent form.
    If you want an application modal form, you simply need to test all the events coming from a form different from the modal one and interrupts the event coming from the other forms.
    In the ItemEvent Handler you can write:
    If Not (FormUID = "YourModalFormUID") Then
        oModalForm.Select() ' oModalForm contains the reference to your Modal Form
        BubbleEvent = False ' Interrupts the events chain
    End If
    In the code above, if an event comes from a different forms, simply select the modal form and interrups the events chain
    If you would make a form modal for a parent form, you simply need to test if the event comes from the parent form:
    If FormUID = "MyParentFormUID" Then
        oModalForm.Select()
        BubbleEvent = False
    End If
    Hope this helps
    Carmine
    Edited by: Carmine Cairo on Feb 19, 2010 5:20 PM

  • How to create modal Form in SBO 2007

    Is it still no way to create a modal SBO form
    I want to create SBO Form that pause the lines of code from runing until the form is closed
    Modal property of the SBO Form still ready only.
    Sincerely yours
    Riade Asleh

    > Or you can use threading to work.
    Indeed, unless I'm mistaken, one will have to. In a common GUI API, if you open a modal form on the event thread, thereby putting it in WAIT state, another event pump is set up. But that functionality isn't available in the SBO UI API AFAIK.
    To put it differently: if you open a form in an SBO event handler and enter the WAIT state, the whole SBO application won't react anymore.
    So the way to do it is this:
    <ul>
    <li>Create a new Thread and start it. Within that Thread ...</li>
    <li>Create your window. </li>
    <li>Register a FORM_UNLOAD (or FORM_CLOSE -- I don't remember which one is deprecated) listener for that form</li>
    <li>Create a locking Object. A simple <tt>new Object()</tt> will do</li>
    <li>Show the form, and then enter a WAIT state on the lock previously created. In VB, for instance, that would be written:
        SyncLock waitObj
            Monitor.Wait(waitObj)
        End SyncLock
    </li>
    <li>When the FORM_UNLOAD handler is called (hopefully because the form was closed), notify the lock. For instance, VB again:
        SyncLock waitObj
            Monitor.Pulse(waitObj)
        End SyncLock
    </li>
    </ul>
    Mind you you might run into some trouble, as SBO suffers multi-threading somewhat less than gladly in my experience.
    But it might be worth giving it a try -- it's a fairly simple operation, so it might work without too much or indeed any hassle.
    PS: that nobr ain't none of mine

  • JQuery modal region template in theme 24

    Please provide details how to use the JQuery modal region template in theme 24.
    I want to create a modal page but I am no expert in jquery or script.
    I am sure this template should make life easy but unable to find how to use it.
    Any help greatly appreciated.
    Thanks,
    DS

    Dan has created a great plugin. http://www.skillbuilders.com/oracle-apex/Application-Express-APEX-Consulting-Training.cfm?tab=free-plugin-downloads
    It is the Modal page plugin. There is a video tutorial on the site to instruct you how to integrate it into your app.
    Edited by: svk1965 on Aug 3, 2012 3:29 PM

  • Blob column inside a modal form

    How can i display a blob from the database inside a modal form.

    Hi,
    What is your APEX version?
    Have you already created form in modal window? How?
    Regards,
    Jari
    My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai

  • How to utilize JQuery modal region template in theme 24

    Hi guys,
    I was check the templates of the theme of 24, and noticed "JQuery modal region template". Can you pls, give some pointers about how to use it ...
    Regards,
    Fateh

    Hi,
    I want to create a modal page and would also like to know how to use the jquery modal region template.
    Any help appreciated.
    Thanks,
    DS

  • No margin in WebDynPro modal forms

    Hi experts!
    I suppose this question already been answered somewhere but I coundn't find it.
    I don't get any left margins in the modal forms in WebDynpro applications. I think it looks really ugly. Should it be like this or can it be changed?
    Anyone that does understand what I mean and has an explanation to this layout behavior?
    Thanks in advance
    Fredrik

    Hi Fredrik,
    I saw the image. how are you creating the pop-up window ?Are you creating your own pop-up then calling l_window_manager->create_window_for_cmp_usage , if so then the view that constructed needs to be adjusted. Try giving WIDTH of the container ROOTUIELEMENTCONTAINER as 90%.
    if_wd_window reference where you recieve the constructed window has a method set_size however it doesnt seem to work,
    you can give it a TRY.
    Greetings
    Prashant

  • Modal Form between the Form Events

    I create a modal form which is like the message box but with a textbox in it. What i mean here is, the modal needs to hold the form event while it's adding an Sales Order record.
    I have tried the Modal Form method as shown in SDK Sample 12.ModalForm. However, i found the Sales Order is added before i click any button in the Modal Form.
    So, can anyone give me any advise how to work with it.......
    Thanks a lot~~

    Hi,
    Solution I would try is to catch FormItemEvent, EventType = et_ITEM_PRESSED, ItemUID = "1".
    With this you can catch the OK/Save button. If you use the BeforeAction you can even Cancel (bubbleEvent) adding the record if the user cancels your modal form.

Maybe you are looking for