APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

open/save dialog box using javascript.

VedantJan 28 2013 — edited Jan 28 2013

Hi,
working on apex4.1
How i can display open / save dialog box when click on button or link using javascript.

Thanks & Regards
Vedant

Edited by: Vedant on Jan 27, 2013 10:20 PM

This post has been answered by Joni Vandenberghe on Jan 28 2013

Jump to Answer

Joni Vandenberghe

You can call the function from the button by setting the action to URL and using the syntax:
javascript: myFunction();

I would suggest you look into creating a dialog window with jQuery:
http://jqueryui.com/dialog/#modal-confirmation

I would suggest you add the javascript to your page (edit page), and you can place the div in a region with no template on the same page.

You can bind a function to each button of your dialog. You can use the function apex.submit(myRequest); to submit the page in Apex with your own request.

Vedant

Hi,

Thanks for reply,

can you eleborate step by step how i can do this in apex.

Thanks & Regards
Vedant

Joni Vandenberghe

Sure, what part do you have trouble with?

Vedant

Hi,

I am using model dialog box.

on page header i have copy The code as given in this http://jqueryui.com/dialog/#modal-message link

//  page header code


<!doctype html> <html lang="en"><head>  <meta charset="utf-8" />  <title>jQuery UI Dialog - Modal message</title>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  <link rel="stylesheet" href="/resources/demos/style.css" />  <script>  $(function() {    $( "#dialog-message" ).dialog({      modal: true,      buttons: {        Ok: function() {          $( this ).dialog( "close" );        }      }    });  });  </script></head><body> <div id="dialog-message" title="Download complete">  <p>    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>    Your files have downloaded successfully into the My Downloads folder.  </p>  <p>    Currently using <b>36% of your storage space</b>.  </p></div> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>  </body></html>

My Button name is "DOWNLOAD" and on button actions "REDIRECT TO URL"

on URL TARGET value is ==javascript: myFunction();

where i have to write this code to bind my apex buttons with dialog box.

apex.submit(myRequest);

the steps i have written above, am doing right or not? Please help to place the code in apex with a right way.

Thanks & Regards
Vedant

Edited by: Vedant on Jan 28, 2013 12:53 AM

Joni Vandenberghe

Ok now I understand.

Firstly you import the jQuery files and CSS files, but there is no need for that because Apex has already build those in.
Second, I suggest you start from the function "Model Confirmation", since that already contains two buttons
Third place any javascript not in the header but in the javascript tab.

So your function, that we call myFunction for now, but it's better to give a more clear name later becomes:

 function myFunction() {
    apex.jQuery( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          apex.jQuery( this ).dialog( "close" );
        },
        Cancel: function() {
          apex.jQuery( this ).dialog( "close" );
        }
      }
    });
  }

Notice how I replaced all references to $ with apex.jQuery as is recomended.
Also note that the current delete all items button and cancel button, only close the dialog atm. That's this part: "apex.jQuery( this ).dialog( "close" );" You might want to replace this with your own actions. One action could be apex.submit('SAVE'); for example.
You might also want to change the name of the buttons.

I see you also placed your div in the header but it's better to do as I suggested to place it in a region with no template.

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Remember to replace the text with your own.

Edited by: Joni Vandenberghe on 28-jan-2013 0:54

Edited by: Joni Vandenberghe on 28-jan-2013 0:54

Vedant

Hi,
I have placed code in page javascripts

function myFunction() {
    apex.jQuery( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "DOWNLOAD": function() {
          apex.submit('DOWNLOAD');    //Download is my button name
        },
        Cancel: function() {
          apex.jQuery( this ).dialog( "close" );
        }
      }
    });
  }

and on page region with no template applied code as

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Do you want ot save file</p>
</div>

it is just simply showing message on the region but not populating the dialig box when i click on "DOWNLOAD" Button.

where am doing wrong?

Thanks & Regards
Vedant

Edited by: Vedant on Jan 28, 2013 1:30 AM

Joni Vandenberghe

That your div already shows at page load is because of your template, my theme hides the regions.

You can fix this by placing this in your javascript tab at Execute on Page loads:
apex.jQuery('#dialog-confirm').hide();

As for it not working now, I just tried the code and got no problems here. I suggest you search the console for errors, and create an example on apex.oracle.com from scatch so I can have a look.

Edited by: Joni Vandenberghe on 28-jan-2013 1:49

Vedant

Hi,

I have setup examle on apex.oracle.com

workspace details are 

Workspace: DEMO APP
User ID: NISHA.GROVER84@GMAIL.COM
Password: nishaarora

application no==28835

page no==10

Joni Vandenberghe

Answer

Your button was not set to redirect to URL: javascript: myFunction();
So I added that.
It seems to work fine now.

Marked as Answer by Vedant · Sep 27 2020

Vedant

Hi,
Thanks it is working fine.

I need one more help related to this.I have created process on the download button. using procedure as "pro_create_ical". This procedure create a file which stores on server.How i can save that file to my system when i click on popup downloads button.

Could you send me any link or tutorial from where i can get help to complete this task.

i have setup example even on apex.oracle .com on same workspace which i have defined above.

workspace details are

Workspace: DEMO APP
User ID: NISHA.GROVER84@GMAIL.COM
Password: nishaarora

application no==28835

page no==10

Please help with the code.

Thanks & Regards
Vedaant.

Edited by: Vedant on Jan 28, 2013 4:13 AM

Kofi

Hi Vedaant, I think Joni's answered your question, any new questions should be new threads. Having said that, there are many links providing information on what writing blobs to files if you look.
For example; http://www.dba-oracle.com/t_writing_blob_clob_os_file.htm
Kofi

1 person found this helpful

1 - 11

Locked Post

New comments cannot be posted to this locked post.

Locked on Feb 25 2013

Added on Jan 28 2013

#apex-discussions

11 comments

4,503 views

APEX

open/save dialog box using javascript.

Comments

Post Details