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,
Dippycreate 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 -
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 lotHi 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
MartinThe 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> -
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.
ThanksHi 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> -
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 -
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 ErikI 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. -
Dear All,
Please let me know how can I make a form as Modal Form ?
Regards,
Noor hussainHi 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,
DSDan 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,
FatehHi,
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
FredrikHi 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
-
Vendor payment advice with down payment
Hi, A down payment was made to a vendor, without having the invoice yet. On the vendor payment advice, this down payment is shown as "invoice". I think it should be shown as "advance payment". The down payment is listed as a noted item in the vendor
-
Programatically Creating User in wls 12.1.2 embedded LDAP
Is it possible to programmatically create users in WLS emdebbed LDAP? Can you please point me to any API or examples in documentation that does something similar? I am using WLS 12.1.2.0.0 Thanks
-
My iPhone 4 worked fine last night. When I woke up this morning, it had shut off and will not turn back on. I looked up the HOME+SLEEP key solutions, but my home button does not work. Any suggestions?
-
Formatting a External Hard Drive
How do you format a External Hardive to use on a Mac? Any Help would be appreciated. Thanks G
-
Import a PSE or manipulate the validity date
Hello everybody, we want to try a scenario, in which the public key certificate gets invalid. For this reason we want to have a public key certificate which is only valid for one day. When creating or replacing the application PSE the "valid to"-date