Posted by: shijesh | April 10, 2010

JQuery Modal Form in APEX

Today I’m going to document the process to create a JQuery Modal Form in Oracle Application Express.
First lets see an example : JQuery Modal Form

Now heres the step to create a page similar to the one show in the above link.

  1. Create a simple interactive report (in the example the report is based in table called PERSON with ID , FIRST_NAME , LAST_NAME and SEX as its field
  2. Create a button in the interactive report region. Edit this button -> Go to URL Redirect tab.
    In Target is dropdown select URL.
    In URL Text area enter the below code

     javascript:openForm();
  3. Next create a HTML Region with 2 Textfield (P3_FIRST_NAME and P3_LAST_NAME and radio group P3_SEX).
    Edit this HTML Region -> Go to Header and Footer tab
    In the Region Header enter the below code

    <div id="ModalForm" title="Add Person" style="display:none">
    <p class="msg">All the fields are mandatory</p>

    In the Region Footer enter the below code

    </div>

    The key to create Modal Form in APEX using JQuery is to create a HTML region with different items ( do not add any button) , then adding DIV tag with an ID to the Region Header.

  4. Next step would be to add javascript and JQuery code in the HTML Header of the page. Note: In my example I have used validation which does not allow to save the data if the fields are blank. For simplicity, I’m not adding any validation here , but if you want to do validation view the source code of my page.
    <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 ,
            buttons  : {
                Cancel : function() {
                    closeForm();
                } ,
                Add : function() {
                         addPerson();
                    }
                }
    
       });
    });
    
    function openForm()
    {
        $('#ModalForm').dialog('open');
    }
    
    function closeForm()
    {
        $('#ModalForm input[type="text"]').val('');
        $('#ModalForm').dialog('close');
    }
    
    function addPerson()
    {
       var radio_value = $x('P3_SEX_0').checked ? 'M' : 'F';
       var ajaxRequest = new htmldb_Get( null , &APP_ID. , 'APPLICATION_PROCESS=addPerson', 0);
       ajaxRequest.add( 'P3_FIRST_NAME', $v('P3_FIRST_NAME'));
       ajaxRequest.add( 'P3_LAST_NAME', $v('P3_LAST_NAME'));
       ajaxRequest.add( 'P3_SEX', radio_value);
       ajaxRequest.get();
       ajaxRequest = null;
       closeForm();
       gReport.search('SEARCH');
    }
    </script>
    
  5. Final step would be to create an OnDemand Process – addPerson. For this Go to Shared Compnent -> Click on Application and Create and OnDemand Porcess. For my example I have used the below code
    declare
       fname varchar2(100);
       lname varchar2(100);
       male_female char(1);
    begin
       fname := :P3_FIRST_NAME;
       lname := :P3_LAST_NAME;
       male_female := :P3_SEX;
       insert into person( first_name , last_name , sex )
       values( fname , lname , male_female);
       htp.prn('Record added successfully');
    EXCEPTION
    when others then
       htp.prn('Error adding record');
    end;
    
Advertisements

Responses

  1. Shijesh,

    Many thanks for your blogging about the JQuery Modal Form. It is nicely blogged.

    It is not working properly in IE8, it is fine in FF v3.6.

    Further to this, can you please also add functionality for the “Update/Edit Person” (either clicking Image or First Name). This is what actually we want at work.

    Your help would appreciated.

    Thanks,
    Bhavin

    • Hi Bhavin,

      I created a new page in my application.
      http://apex.oracle.com/pls/apex/f?p=12060:13. It has got Edit functionality.

      Check the View Source for the code.

      Regards,
      Shijesh

      • Shijesh,

        I have the edit functionality working I just have a one question? How are you passing in the pID to the javascript function from the interactive report?

        Thanks,
        Austin

      • Shijesh,

        Just to clarify my question above. I have:

        javascript:openForm(#EMPNO#);

        in the column link for my id and if I look at the source of my page I am seeing the correct code. However, if I look at pID inside my javascript function it is null.

        Thanks,

        Austin

      • Hi Austin,

        When you place cursor on the link what you see in the status bar.

        Regards,
        Shijesh

      • Shijesh,

        When I hover over the link I see:

        javascript:openForm(9000);

        The number changes based on what row I am hovering over. The function is being called it just seems the id doesn’t get passed in. When I try to use an alert to see what is in the pID it is null.

        Thanks,
        Austin

      • hai shijesh,
        how to update new data recorded if using jquery with groovy? do have any idea?

    • Hi,

      Can create a sample in apex.oracle.com , so that i can see your javascript code.
      I’m sure there is something missing in the javascript code.

      Regards,
      Shijesh

  2. Great example – why can I not have any buttons in the HTML region? I need some!

    • Hi Phil,

      If you are talking about Button in the Region Position then the reason is below:-
      1) HTML Region with No Template is divided into following part – a) Top to add Region buttons b) middle part which consist of actual region with region header and region footer and c) bottom part to add Region buttons. Now, we add JQuery in the middle part, so anything in the top and bottom part will not come in JQuery Dialog, it will be visible as normal page button. You can try this by adding a Button in the Region position.
      2) JQuery Dialog provide the option to add buttons, the why you want to add a Region button.

      If you are talking about Button among the Item then you can add them there is no issue. In my post my intention was to tell not to add BUTTON IN REGION POSITION.

      Regards,
      Shijesh

  3. This actually looks perfect (I have it all working) however, one small point – it is not modal, i.e. I can still alter values on the main form while the popup one is visible?

    Phil

  4. Opps, I missed one line in the code…
    In point 4 line # 10 , add

    modal : true ,

    Also, under point 3 in line # 1 , i added
    style=”display:none”
    Thanks for bringing it to my notice.

    Regards,
    Shijesh

    • I’ve got an similar thing all working fine now thanks!
      A couple of (final) questions for you if you have a moment:

      # If I wished to have the buttons spaced differently or have one on a separate line (for example the cancel) how would this be possible using the buttons : section of the code?

      # I’d quite like to have a checkbox and refer to that in the jquery event. Is this fairly simple to do?

      Thanks in advance

      Phil

      • 1) Regarding position button i don’t think there is any direct solution. I need to check on this.
        2) You can refer checkbox in JQuery link any other HTML object using its id , class , attribute value etc . eg. suppose you want to access checkbox with id P1_MYCHECBOX_0 then use $(‘#P1_MYCHECKBOX_0’).click( function(){ alert(‘You click me’) });

        Regards,
        Shijesh

  5. Can I have access to your application…… Thanks

  6. Hi,

    It is Nice. I have one issue. I am getting the modal window without any borders. I am using IE6. Any change/addition to be done in JS code?

    • Hi Mohan,

      There is some issue displaying JQuery dialog in IE6. Check whether border is displayed in modal dialog in my demo application. If it appear then you might have some type somewhere in the code. If it does not , then its IE6 issue , trying adding bgiframe: true

      Regards,
      Shijesh

      • Hi,

        Border is coming once I change the theme (changing CSS in first line of 4th step).

        Regards
        Mohan

  7. I want to thank you for your help with this website. I have sucessfully implement modal windows for inserting and updating data using your example. I do have one question I hope you can answer. I was wondering have you any suggestions on how I can go about implementing a modal window to upload files using a file browse item?

    • Actually disregard my last post I figured out a way to implement what I was suggesting. It isn’t the cleanest way to implment it but it is working.

    • Gr8 you got the solution.

      Regards,
      Shijesh

  8. Hi Shijesh,

    How can I view the code at http://apex.oracle.com/pls/apex/f?p=12060:13

    Thanks

  9. Hi,
    first of all – great example. This is what I was looking for 🙂
    Could you please show code for ‘getPerson’?

    • Here you go

      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;
      

      Regards,
      Shijesh

  10. […] APEX 4.0 and jQuery Modal Dialog Couple of months back I posted how to create jQuery Modal Form in APEX 3.2 Here is the link for the same : jQuery Modal Form […]

  11. Thanks, works great. One more question – how to hide region with edit fields?

    • Hi,

      Sent you a mail regarding this.

      Regards,
      Shijesh

  12. can u please help me …………

    I have a requirement as follow :-

    Main page with Search button and serach text field .
    when i click the serach button a popup window shud open and list all the employees with that search criteria.

    Now in the popup window i will select few employees and click on selected .

    when i click on selected button , it returns to main page and displays the selected item by creating the corresponded text fileds dynamically .

    Ex:-

    Search text search button

    if(searchbutton=clicked)
    then
    POPup windowof results that matches the criteria.

    if(select of any employee details by checking the check box )
    {
    return to main page and create the text fields dynamically depending on the no of employees selected and assign popup window’s values to the main page
    }

    else
    {
    if(cancel=clicked)
    just return to main page ;
    }

    }

    • Send it to your mail.

      Regards,
      Shijesh

  13. I like this a lot. Much better than the ugly pop ups that I had in my previous application. One question, how to I refresh (partially or wholly) the page when I close the dialog box so that the insert / update is automatically updated on the page without having to refresh in manually. I see that on your 4.0 demo it does this but it’s not the default behaviour on my implementation

    Thanks

    Simon

    • Hi,

      Send details to your mail.

      Regards,
      Shijesh

  14. i am having same doubt as nandini thakur where i want custom popup LOV to display in Modal window

  15. Hi Shijesh,

    I have develop a modal form with add and edit button now I have added 2 more button which calls different pages. I want them to open in modal window. if I name all the button create then they all work. but I want to name them differently like Create, Create Product, Update Item etc. Is there a way I can achieve this.

    • Hi,

      Yes it possible. Once such way to do is as shown below.

      $(function() {
          $("#dialog-form").dialog({
              buttons: {
      	'Button 1': function() {   // your function  when button 1 is clicked },
          'Button 2': function() {   // your function  when button 2 is clicked },
      	'Button 3': function() {   // your function when button 3 is clicked  }
           }
          }); // end $('#dialog-form')
      });
      
  16. Hi Shijesh,
    Is it possible to apply this technique to an existing APEX page. I would like to open page 1 in App B as a jQuery modal window, calling it from page 1 in App A. Do I need a different approach for this, or can I apply similar logic?

    Thanks,

    Mike

    • Hi Mike,

      In my example the DIV which is used to display modal window is on the same page. So, I’m using $(‘#DIV’).dialog() to display the modal window. In your case, its a page.
      I am assuming that you want the entire page X from another Application B to be displayed in Application A.
      To achive this create a region with Static ID “Page X App B Content”
      Now your jquery query code should be

      $( function() {
         var pageToDisplay = "http://127.0.0.1:8080/apex/f?p=application_id:page_number:session_id" ; // replace this with the URL of page to be loaded
         $('Page X App B Content').load( pageToDisplay );
         $('Page X App B Content').dialog();
      });
      

      Regards,
      Shijesh

  17. Could you please provide me details of how to add a jQuery model form in Apex 4.0. with ADD and EDIT functionality. I have also sent you an email.

    I have a tabular form and on click of one of the column value I am opening another page as a popup window as follows:

    function modalWin(emp_id,user_name)
    {
    if (window.showModalDialog){
    window.showModalDialog(“f?p=&APP_ID.:11:&SESSION.:POP:NO::P11_EMP_ID:”+emp_id+”::P11_USER_NAME:”+user_name+”:”,”name”,”dialogWidth:600px;dialogHeight:400px”);
    }
    else {
    window.open(“f?p=&APP_ID.:11.:&SESSION.:POP:NO::P11_EMP_ID:”+emp_id+”::P11_USER_NAME:”+user_name+”:”,”name”,”height=400,width=600,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no ,modal=yes”);
    }
    }

    I want to open this like the one you showed with Jquery Modal form in apex 4.0 demo.

    Is it possible to have another page as a jquery dialog; if yes how do I pass values from parent page record value to the child page

    Thanks,
    Amol_Nilesh

  18. hye,
    how i am suppose to do if using jquery in groovy.
    i want to update my data,but the new data not shown except using the refresh button.i want the data to come out in the table right after i click the save button.

  19. Maybe you could change the post name title JQuery Modal Form in APEX Shijesh Kumar's Blog to something more generic for your blog post you write. I liked the the writing still.

  20. Hi, you solution rocks!!! Thanks a lot.
    Just a quick question, how would I add checkbox and popup lov into this modal form?
    Thanks

    • ….update, figured out how to do the checkbox thing, but still not sure about Popup LOV

      • Hi,

        Create the Popup lov exactly the same way you created the checkbox i.e. create an item of type Popup LOV in the modal window region.

        Regards,
        Shijesh

      • OK. Thanks. ….and how about select list?

      • Well, create a form in APEX with select list or any other item type and give it an ID eg. myForm … then in jQuery add $(‘#myForm’).dialog() … whatever item you have create in the form will be displayed in modal window….

        Regards,
        Shijesh

      • Hi, Thanks for your reply. I did try that but is doesnt work the way I want it to be. So, I did create a page with report just to monitor my data insert, did create a for with id and did put jquery into page header (with form Id as you said) so the form will be hidden when page loads. When clicking on “Open Modal” my form comes up, i have to fill out my fields and by clicking on Creare button (on the buttom of modal window) data should be inserted into table….I am inserting useing regular DML process….but it is not inserting any data from my form……
        Here is a link to my app: http://apex.oracle.com/pls/apex/f?p=39330:23 and in the page source you can see my simple script.
        Could you please let me know if you will have any ideas?
        Thanks

      • …as far as I understand, my JQuery dialog not passing any values back to page when I click CREATE? Any ideas

  21. Good job. BTW, I did try your validation as well – works perfectly! It does validate all form items but how about individual items (not all of them)?

    • For individual item validation say .. you want to validate an item P1_SALARY should be greater than 0 then we will use a code similar to the below one

      if ($('#P1_SALARY').val() < 0  )
      {
                 $(this).addClass('ui-state-error');
                  err_msg='Error : ' + $(this).attr('id').substr(3).replace('_',' ') + ' is less than 0'
                  valid = false;
      }
      $('#msg').html(err_msg);
      return (valid);
      
      Regards,
      Shijesh
      
      
  22. inside function openForm(empId) i am calling initilizeForm(empID). If empID is null, its a new record so it makes all the field blank. If empId is not null then it call ondemand process passing empId to ondemand process. The result of ondemand process is then assigned to the field on the form…

    BR,
    SK

  23. Hi,

    To refresh whole page refresh all the region within the page…
    I would suggest to reload the page if you want to refresh the entire page.

    Regards,
    Shijesh

  24. Not clear what the requirement is .. however if you want to run the page process and refresh the parent page..
    The best way would be to first set the session state of items using htmldb_Get() and then issue doSubmit();

    Regards,
    Shijesh

    • Are you looking for something like this……
      http://apex.oracle.com/pls/apex/f?p=62171:9

      Here, in report like i have something like
      javascript:openForm(#col1# , #col2#, #col3# .. etc);

      and Displaying all the value in form.

      Regards,
      Shijesh

  25. Hi Shijesh

    Can I ask if you had to do anything specific to get the cursor to focus on the 1st item of the pop up dialog? I’m on Apex 3.2 and am really struggling to focus cursors on these JQUERY dialog boxes

    Thanks

    Simon

    • Hi,

      You can use jQuery ” .focus() ” to focus the first item in the popup.

      eg.

      $(‘#P11_NAME’).focus();

      Regards,
      Shijesh

  26. Hi Shijesh,
    I saw somebody else ask the same question above but couldn’t see a reply….how do I pickup the id that is passed through. I am calling the popup dialog from a report link, so openform looks like javascript:openform(1234), from the dialog popup window, how do I pickup the id of the row that has been clicked on?

    Thanks,

    Mike

  27. I think this is one of the most important information for me.
    And i’m glad reading your article. But should remark on few general things, The site style is perfect, the articles is really great : D. Good job, cheers

  28. Hi Shijesh, First of all excellent work you have done appreciate it.Can you please send me the code which also has validation in modal page.

  29. This post provides clear idea in favor of the new viewers of blogging, that truly how to do running a blog.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: