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

Similar Messages

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

Skillbuilders_super_lov plugin with Modal region template

Hi ,
I am using Report and form (IR) , i called form when i press in create button by this code
javascript:openModal('region id')and make the form region as modal region template , in the form i use skillbuilders_super_lov plugin .
when i open the LOV plugin it appear like this image
http://s13.postimage.org/k2zqekwzb/LOV.png
i need help
Ahmed,

Dears ,
if the problem with template or any thing related css file .. can any one help me ?

Theme 25 Modal Region - not displaying correctly in IE8

I have an application I have developed, which makes use of the modal regions which display a small form in a modal region when the user clicks a button.
I am having problems with how it is displayed in IE8. I have many users in my organisation who still use IE8 so I need to find a fix.
I have installed one of the 'packaged applications' on apex.oracle.com and converted the theme from 101 to Theme 25 to demonstrate the issue (ignore the fact that the buttons have had a different template to the "+" and ">").
http://apex.oracle.com/pls/apex/f?p=65955:14
Login as: matt/matt
Click on any of the "Add xx" buttons, e.g. "Add Update".
You will see that the colour of the region is black and you can't see the modal box. This makes the text very hard to read, and not really useable.
I have been trying to figure out which css style controls the background (to potentially put a fix in the HTML header of my page) but I cannot figure out how to fix it.
Any guidance would be appreciated!
Amanda.

Hi Amanda,
This may be a bug in Theme 25 for IE8, and I will investigate this issue further. However, for now, it seems like there are two issues. First, being that the background of the page becomes completely black wh en the modal is loaded when it should really be somewhat transparent. To fix this, you can add the following CSS:
div#modalBackground {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
The second issue is that the modal appears to be behind the background, so you are unable to see it. Try adding the following styles and see if it can fix the issue:
section.uModalRegion {
z-index: 1000;
Unfortunately, I was unable to reproduce the second issue on my VM (IE9 running in IE8 mode).
Best,
Shakeeb

Tabs and Regions to match the Login, Alternative 1 template in Theme 2.

All,
In Theme 2 - Blue and Tan, there is a Template called 'Login, Alternative 2'. I would like to use this Template. I was wondering are there any Report Region and Tab Templates that have this same look to them. In particular the blue background with the white lettering. I used the Report Region templates but they have a different color background and blue letters. I would also like to have the tabs have this same look. Is this available anywhere?
Thanks,
Kim

Earl,
To answer your question, I was wondering if there was a theme built around this template. It has square corners with white writing on a blue title for the region. What I did was copy that template and rename it so I was able to reuse my new template for other regions. But now the region template that I created does not look right with the tabs that went with Theme 2. I looked at the style sheets but could not figure out what needed changing.
For instance, I use Theme 2 which has blue and tan tabs and labels for the text items being tan also. It also has curved edges to the tabs as opposed to the straight edges that were on the Login, Alternative 2 region. Would I have to know how to design my own tabs to create tabs that have that same look to them. I was wondering if there is a Theme that someone may have created to go with that Login Region that I used?
I think this really has more to do with the images that were used to make the tabs than with the style sheets. But thanks for giving it a try. It reassures me that I was on the right track by looking at the style sheets.
Kim

Apex theme 23 no region id in some region templates?

When using the Theme 23 (Crimson), I noticed simple dynamic actions such as hide, don't work on certain regions. After investigating the region template I noticed the section tag of those regions did not contain id's. An example is the "Region without Buttons and Titles".
When I added the code: id="#REGION_STATIC_ID#" in the section tag the problem was solved.
Is there a reason Apex chose not to include an ID in certain region themes of theme 23?
Joni

Joni Vandenberghe wrote:
When using the Theme 23 (Crimson), I noticed simple dynamic actions such as hide, don't work on certain regions. After investigating the region template I noticed the section tag of those regions did not contain id's. An example is the "Region without Buttons and Titles".
When I added the code: id="#REGION_STATIC_ID#" in the section tag the problem was solved.
Is there a reason Apex chose not to include an ID in certain region themes of theme 23?
JoniNo valid reason, you can amend them to add the desired substitution strings.
Thanks

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 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>

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

Classic Report with Hide and Show Region Template does not show report

Hello,
I created a "No Template" region on a page with a Classic Report. When I change it to a "Hide and Show" region template, the report does not show up when I click to Show the region...is there an additional step i'm missing to make the report show up. Its a very simple query.
Thanks in advance,
John

How about posting some relevant information like Apex version, RDBMS version, Theme you are using, etc.?
Regards,

4.2 Early Adapter 2 Numeric Region Template Name

I think it is a stupid question. But as I am new to this I should clear my doubt.
In 4.2 early adapter 2 there is a packaged application called Incident Tracking. In this application page number 50 is having a region called Tickets. It has a template which is numeric.
I could not find the template under the application theme. Even if I try to create a page with the same page template but when I try to create a region in the region template LOV the numeric template is not displayed.
Any idea??????
Mehabub

Mehabub Sheikh wrote:
I think it is a stupid question. But as I am new to this I should clear my doubt.
In 4.2 early adapter 2 there is a packaged application called Incident Tracking. In this application page number 50 is having a region called Tickets. It has a template which is numeric.
I could not find the template under the application theme. Even if I try to create a page with the same page template but when I try to create a region in the region template LOV the numeric template is not displayed.
Any idea??????
MehabubYou are seeing the numeric value because the select list is set to display extra values > Yes and the selected value does not exist in the lov.
It could be a bug! in that app.
Once you are logged in to your app go to > SQL Commands > try the below sql
select *
from apex_application_templates
where application_id =11366
and template_type='Region'
and template_id =195391130200971512 -- numeric value appearing in the template name lovIt will return no data found because the template does not exist in your app (I mean it is missing in the application install script)

Make a new region template

Hi all,
I am using Two Level Tabs Page Template in my application, and have used all the region templates (from 01 to 08) in my page. I still need a space for 1 more region template. Can i make a new region template of my own??If so how can it be done?
With Regards,
Neha Sharma

Region #'s 1 thru 8 are not really the equivalent of region templates. Those are placeholders for different display areas on the various pages.
Each one displays in a specific area of the page depending on the theme and page template that you're using. These region numbers are used for things like sidebars, tabs, main report or form regions, etc...
You are also able to include many report or form regions (or other regions) in a single display region.
In my 5 or so years of using Apex I have never had the need to try to create a new display region. And I don't think there's a way you can actually do it.
Why don't you let us know what you want to accomplish and you're sure to get some suggestions.
Earl

Region Template in ContentPresenter - JDeveloper

Hello together,
is it possible to use a SiteStudio Region Template in the Content Presenter, when I add the Content Presenter in JDeveloper to a jspx page.
Here is a screen shot from the properties:
http://s14.directupload.net/images/140122/fxmb3mog.jpg
The senario:
I use a query to select a Contributor Data File from the Content Server and now I want to select a suitable template from the Content Server as well.
What do I have to do? Is this senario actually possible?
Thanks for your answers.
Lukas

Hi.
In official documentation Creating Content Presenter Display Templates - 11g Release 1 (11.1.1.8.0) you'll find following:
Oracle recommends that you use Content Presenter ADF templates to integrate Site Studio and WebCenter Portal instead of Site Studio region templates. The recommended flow is:
Develop region definitions in Site Studio
Develop ADF templates referencing region definitions using JDeveloper
Publish the templates and import them into Portal Server
Use Content Presenter to render the content and to enable users to contribute content
Why recommends this way?.
Performance and caching.
Site Studio will be deprecated in the future.
Integrates perfectly with ADF / Portal in terms of Framework, access and allows you to pass parameters / variables.
When to use Region Template?.
When you have do internal or use complex functions of UCM.
As backward compatibility with old Region Templates built in Site Studio.
I hope it helps.
Regards.

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.

IF statement for navigation in a Region Template

I have a region template where I display links to nodes in the current level.
Example:
level 0 nodes: About Us, Employees, Contact Us, Investors
level 1 nodes of About Us: Fun Stuff, Photos, History
level 2 nodes of History: 1910, 1920,1930
So if I was in the section/level About Us>History my region template would display links to 1910,1920,1930. I know there is a fragment that does this for me but what I need is a little more custom.
What I want to do is is write an if statement in the region template that says something like:
If (currentlevel has children)
display childrenlevelNodes
else
display parentlevelNodes
endif
Any ideas? I am a beginner when it comes to Idoc.

Actually I got it working. Someone before me was using some code but it wasn't working exactly how I wanted. So I incorporated their code back in after your help with the childNodeId thing and now it works!!





<ul>
     <li>

     


          
     
     
     
          
               
               
               
               
          
     
     
     
     
          
                    
                    
                    
               
          
     
     </li>
</ul>

JQuery modal region template in theme 24

Similar Messages

Maybe you are looking for