This discussion is archived
11 Replies Latest reply: Jan 28, 2013 5:41 AM by Kofi RSS

open/save dialog box using javascript.

Vedant Newbie
Currently Being Moderated
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
  • 1. Re: open/save dialog box using javascript.
    Joni Vandenberghe Pro
    Currently Being Moderated
    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.
  • 2. Re: open/save dialog box using javascript.
    Vedant Newbie
    Currently Being Moderated
    Hi,

    Thanks for reply,

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





    Thanks & Regards
    Vedant
  • 3. Re: open/save dialog box using javascript.
    Joni Vandenberghe Pro
    Currently Being Moderated
    Sure, what part do you have trouble with?
  • 4. Re: open/save dialog box using javascript.
    Vedant Newbie
    Currently Being Moderated
    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
  • 5. Re: open/save dialog box using javascript.
    Joni Vandenberghe Pro
    Currently Being Moderated
    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
  • 6. Re: open/save dialog box using javascript.
    Vedant Newbie
    Currently Being Moderated
    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
  • 7. Re: open/save dialog box using javascript.
    Joni Vandenberghe Pro
    Currently Being Moderated
    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
  • 8. Re: open/save dialog box using javascript.
    Vedant Newbie
    Currently Being Moderated
    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
  • 9. Re: open/save dialog box using javascript.
    Joni Vandenberghe Pro
    Currently Being Moderated
    Your button was not set to redirect to URL: javascript: myFunction();
    So I added that.
    It seems to work fine now.
  • 10. Re: open/save dialog box using javascript.
    Vedant Newbie
    Currently Being Moderated
    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
  • 11. Re: open/save dialog box using javascript.
    Kofi Journeyer
    Currently Being Moderated
    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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points