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

Similar Messages

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

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 ?

Onload popup modal region

Hello,
I am looking for example / how-to popup a modal region on a page load if certain condition is meet. Use case:
- on page load
- check if any of these condition is satisfy (if field has a certain value, 5 day has pass and there has been not update, etc.)
- if any of the above return true
- present a popup window to inform the user
Thanks in advance for your help!

Do you want to popup a modal region, such as a modal page plugin http://ruepprich.wordpress.com/2013/07/11/skillbuilders-modal-page-instructions/
or a modal dialog, such as this http://www.primaryobjects.com/images/modal-confirmation-dialog-cap.gif
or a simple javascript alert message such as this http://www.exforsys.com/images/js/0702.jpg
Regards,
Vincent
http://vincentdeelen.blogspot.com

Modal Region with parameter

Dears ,
i use apex 4.2 , i have 2 regions , the second region type Modal Region , i want to call the modal region with parameter
in link column i wrote this code
javascript:openModal(region_name)how can i call modal region with parameter ?
Thanks

Abo Yahya wrote:
Dears ,
i use apex 4.2 , i have 2 regions , the second region type Modal Region , i want to call the modal region with parameter
in link column i wrote this code
javascript:openModal(region_name)how can i call modal region with parameter ?
ThanksHi,
What you mean by "how can i call modal region with parameter" ? Parameters for what ?
Can you provide some example to apex.oracle.com what you have done now?
Regards,
Jari
My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
Twitter: http://www.twitter.com/jariolai

How is a JQuery Vertical Accordian Different Than A Hide-Show Region

Hello Everyone.
I an using Apex 4.0.1. I recently learned how to create a JQuery vertical accordian. I'm using the sample accordian that Patrick Wolf recently created/posted. It uses a really nice "accordian template" that he put together. It's really quite useful when it comes to saving space and all on a page.
Then I began wondering: How is this accordian different than Apex's own builtin Hide-Show Region template?
And so, I created a sample page on my workspace in apex.oracle.com. I placed a JQuery vertical accordian that consists of 3 regions: 2 reports and a chart. I added a little bit of JQuery to Patrick's template that causes all 3 accordian slices to be closed as opposed to the default behavior of having one slice always open. I also added code that allows a user to re-size the entire accordian either vertically and/or horizontally.
I then created 3 additional regions that mimic the first 3 regions above. These I placed in "column 2" on the page. For each region I assigned the "Hide-Show" template.
As far as I can tell, both the accordian and the Hide-Show regions provide the same functionality.
For the interested, here is a link to my page:
http://apex.oracle.com/pls/apex/f?p=49919
The app has open authentication assigned, and so, no login credentials are needed. Please click the "Accordian" tab.
I realize that the accordian has more flexibilty in that one may add features like choosing to collapse/not collapse all slices and re-sizing, etc. I suppose one could do similarly for the Hide-Show regions using Javascript or JQuery but it would likely be an effort.
Admittedly, such added features are cool and all. Still, it's been my experience that in the majority of business-like production environments, such "cool" features are pretty much useless. For example, I do not see how re-sizing the accordian or Hide-Show regions has much purpose. In fact, such "cool" features often get in the way of the main goal of the application.
Of course, a JQuery accordian may also be created that expands/contracts slices "horizontally". I do not know of any way to do the same thing using Hide-Show regions. If someone does know how to do this, I (and likely others) would sure appreciate you sharing how.
So, then, with respect to basic functionality (saving page real estate by encapsulating several regions), how is a JQuery vertical accordian any different than Apex's own builtin "Hide-Show" region?
Thank you all for your thoughts/adice/code.
Elie

Hello Jari.
Thank you for your help.
Yes. Now I do understand what it is you are doing in your accordian page. And also I want to thsnk you for providing the sample code on your page showing how to go about preserving the current state of the accordian when you navigate from/to the page.
You commented that this kind of state preservation is not available with the Hide/Show region. I'm thinking that you are correct, though I think I once saw something about doing this posted in this Forum. I'll search through and see if I can locate it.
In any case, have you (or anyone else reading this thread) any other differences between a JQuery vertical accordian and Apex's own Hide/Show region? Other than being able to apply Javascript to an accordian to do things like preserve it's state (like you did), what else may one do with an accordian that is not doable (or at least not easily doable) with a Hide/Show region?
Thank you for any further advice.
Elie

How to Create a Page LOV Template and a Region LOV Report Template in APEX

Hi All,
Thanks in advance ..
I am new to APEX , Currently working in APEX 3.2
Can any one please guide me How to Create a Page LOV Template and a Region LOV Report Template in APEX
So that I can create dynamic Multi column LOV in APEX
Cheers
Sachin

Sachin,
I think you are en-quiring about 'Custom pop-up page'. See this link. You will get all required info there.
Regards,
Hari

Hide / Show region template - how to make it stay visible after NEXT& PREV?

Hello,
I am using the Hide / Show region template (by the way great idea to create this template ;)
By default the region is hidden. If i want to see the region content (it is a report) I click on that icon and it becomes visible. For my report I use the pagination "ROW Ranges X to Y of Z (with pagination)".
The issue is that if I click NEXT of Previous, the region is closing (hidding).. and in order to see the next / previous page of my report I have to re-open it..
Is there any known workaround for this?
Thank you in advance
Anca

I would start at Re: Toggle all hide show regions on a page open/closed
It references the using javascript to manipulate your hide/show regions. It should get you started in the right direction. It is about the most straight-forward example I have seen for what you are trying to do<br><br>
You could trigger the javascript after your page is rendered by calling it from the page footer and reference the values of page items to determine if you are supposed to hide the region(s).<br>
Create a page item called P88_HIDESHOW_REGION1 and set it's value to Y or N depending on whether the #REQUEST# has a string in it that is part of report pagination. If you hover over a "next page" button in a report, check out the resulting URL that pops up in your browser.....it looks like ..../f?p=900:210:8352027355600111016:pg_R_241403738845262873:NO&pg_min_row=31&pg_max_rows=30&pg_rows_fetched=30
<br>
You could do an instr(:REQUEST,'pg_R_') > 0 then set P88_HIDESHOW_REGION1 = 'Y' else P88_HIDESHOW_REGION1 = 'N'. Your javascript called at the footer of the page could set the display of the region to on or off depending on the result of P88_HIDESHOW_REGION1

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

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

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

How to reference a customised report template

Hi
I've created a copy of the standard reports template and modified it so that it does conditional highlighting. I only want to reference this template in one instance in my application so I want to keep the standard template for the other reports.
How do I reference the new template without disturbing the other report templates?
Thanks
Andrew

Only works for classic reports, click on report that you want to change in the region area of the builder then Report Attributes then change the Report Template in the layout and pagination section and apply changes. for IR's you have to override the IR CSS definitions in your page template.

How to utilize JQuery modal region template in theme 24

Similar Messages

Maybe you are looking for