Implement jQuery modal form

Hello
For a long time I'm trying to find that everything related to the implementation of the windows popup modal in the Apex and so far without success.
Here is a link:
[http://jqueryui.com/demos/dialog/#modal-form]

and it's close to everything I want to get. I have a page with lots of buttons and points, by clicking one of the buttons I want modal popup window and the Parent Page (stored in item hiden) value passed to the modal window. I want to enter some data in the modal window and clicking on 'submit' data will go to the table and window must be closed after that. At the same time, I need... Parent page to get the data just entered of modal (or simply be refreshed), it's all the stuff at base of pop-up windows and modals... but I can't get this to work.
Someone's done it before? No results?

Thank you very much

Hi Yasen,

Here's a demo run (in FF and IE):

http://Apex.Oracle.com/pls/OTN/f?p=22110:1

Use demo/demo under the user name and password.

To see what I did then connection to the hosted site:

http://Apex.Oracle.com/pls/OTN/f?p=4550:1

and its called PAULSANDBOX workspace and use the same details as stated above. Then the application is called dialog app.

If there is just no problem, then gives US just a scream.

See you soon,.
Paul.

Published by: la_grominette on February 22, 2010 11:24

Published by: la_grominette on February 22, 2010 11:27

Tags: Database

Similar Questions

  • value of ajax in the text [in jquery modal box] box

    Hello
    In my page, I have an interactive report with 2 button Add and edit, I used box modal j-query for the add and edit button. Add the data through the modal box works very well.
    When trying to change the existing data I can not set the data in the corresponding text box in the apex.

    Please find my modal box script:

    < link rel = "stylesheet" href = "" #APP_IMAGES #modal-jquery - ui.css "type =" text/css">"
    < script src = #APP_IMAGES #modal - jquery.js type = "text/javascript" > < / script >
    < script src = #APP_IMAGES #modal-jquery - ui.js type = "text/javascript" > < / script >
    < script type = "text/javascript" >
    $(function() {})
    $('#ModalForm').dialog ({}
    modal: true,
    Width: 550,
    height: 300,.
    autoOpen: false,
    Resizable: false,
    buttons: {}
    Cancel: function() {}
    closeForm();
    } ,
    Add: function() {}
    addPerson();
    }
    }
    });
    $('#ModalForm1').dialog ({}
    modal: true,
    Width: 550,
    height: 300,.
    autoOpen: false,
    Resizable: false,
    buttons: {}
    Cancel: function() {}
    closeForm1();
    } ,
    Update: function() {}
    UpdatePerson();
    }
    }
    });
    });
    function openForm() {}
    $('#ModalForm').dialog ('open');
    }
    function openFormclose() {}
    $('#ModalForm1').dialog ('open');
    Alert ('opened');
    var updateval = document.getElementById('P37_UPDATEID').value;
    get var = new htmldb_Get (null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS is updateperson', 0);
    Get.Add ('P37_UPDATEID', updateval);
    var gReturn = get.get ();
    Alert (gReturn);
    document.getElementById('P37_UPADATEPRONAME').value = gReturn;
    }
    function closeForm1() {}
    $('#ModalForm1_input[type="text"]').val (»);
    $('#ModalForm1').dialog ('close');
    }
    function closeForm() {}
    $('#ModalForm_input[type="text"]').val (»);
    $('#ModalForm').dialog ('close');
    }
    function addPerson() {}
    If (document.getElementById('P37_ADDSOFTDETAILS').value == "") {}
    Alert ('Please enter Software Details.');
    Returns false;
    }
    If (document.getElementById('P37_ADDSOFTVERSION').value == "") {}
    Alert ("' Please enter software Version.");
    Returns false;
    }
    If (document.getElementById('P37_STANDARD').value == "") {}
    Alert ("' Please enter software Standard.");
    Returns false;
    }
    var ajaxRequest = new htmldb_Get (null, & APP_ID., 'APPLICATION_PROCESS is addPerson', 0);
    ajaxRequest.add ('P37_ADDSOFTDETAILS', $v ('P37_ADDSOFTDETAILS'));
    ajaxRequest.add ('P37_ADDSOFTVERSION', $v ('P37_ADDSOFTVERSION'));
    ajaxRequest.add ('P37_STANDARD', $v ('P37_STANDARD'));
    ajaxRequest.get ();
    ajaxRequest = null;
    closeForm();
    gReport.search ('SEARCH');
    }
    < /script >


    and find the correspondent on the below application process:
    addPerson:
    DECLARE
    BEGIN
    INSERT INTO xxxxxx.yyyyyyyyyy)
    INT_PRODUCT_SEQ,
    INT_PRODUCT_NAME,
    INT_PRODUCT_VERSION,
    INT_PRODUCT_VERSION_DEFINE,
    CREATED_BY,
    CREATED_DATE
    )
    VALUES (xxxxxx.INT_ADD_SOFTDETAILS_SEQ. NEXTVAL,
    : P37_ADDSOFTDETAILS,.
    : P37_ADDSOFTVERSION,.
    : P37_STANDARD,.
    V ("APP_USER'),
    SYSDATE);

    COMMIT;

    apex_application.g_print_success_message: = 'Record inserted with succΦs.';
    EXCEPTION
    WHILE OTHERS
    THEN
    apex_application.g_print_success_message: = "Falied to insert data.";
    END;


    and updateperson: is
    DECLARE
    v_product_name varchar2 (240);
    v_product_version varchar2 (240);
    v_product_version_standard varchar2 (240);
    v_update varchar2 (240);
    BEGIN
    BEGIN
    SELECT INT_PRODUCT_NAME,
    INT_PRODUCT_VERSION,
    INT_PRODUCT_VERSION_DEFINE
    IN v_product_name, v_product_version, v_product_version_standard
    OF xxxxxxx.yyyyyyyyy
    WHERE INT_PRODUCT_SEQ =: P37_UPDATEID;

    HTP.prn (v_product_name);
    EXCEPTION
    WHILE OTHERS
    THEN
    HTP.prn ("an error has occurred -"
    || SQLCODE
    || "- ERROR -"
    || SQLERRM);
    END;
    END;

    Hello

    First of all:
    I can't find any definition of the function updateperson(); called by $('#ModalForm1').dialog - Update button.
    It has alert ('opened'); only. There should be the updateperson() function declaration.

    There is no adjustment of any matches at the opening of the modal form updated.

    I use it this way.

    function openForm(v_add_details, v_add_softv, v_stand)
    {
        $('#ModalForm').dialog('open');
        $s('P37_ADDSOFTDETAILS', v_add_details);
        $s('P37_ADDSOFTVERSION',  v_add_softv);
        $s('P37_STANDAR', v_stand));
    }
    

    where the P12_X are... modal form elements. and the v_... parameters are the parameters of the corresponding columns of the report. (you got something like: redirect URL: javascript: openFormclose();)
    It should be replaced by something like openFormclose (' #P37_ADDSOFTDETAILS # "," #P37_ADDSOFTVERSION #',' #P37_STANDARD #');

    Maybe this example will guide to you a little :D
    Otherwise try to reproduce your solution on apex.oracle.com. there I can modify your code to make it work.

    EDIT: I use the PLUGIN post by Dene. It works well too. I used above solution until the plugin has been released.

    concerning
    J :D

    Published by: jozef_SVK on 10.5.2013 04:07

  • using a sub vi in a modal form in one and one non-modal form in another

    I try to use a subvi in 2 places. However in one place, I want that it open in a modal form and in the other I just that it runs the code and generate results without the façade appears.

    How can I do this?

    Arjun

    1. Uncheck the display front panel when it is called in VI properties (Ctrl + I in the diagram of the VI > appearance of window > customize...)
    2. In the diagram, click on the occurrence of the VI to open up > Installation of the Subvi node > check Show façade when it is called
    3. Repeat for the other instance of the VI to uncheck this option if needed.
  • APEX 5.0EA2 - Modal form does not close properly

    I have a master/detail form (detail lines are in a table). The part of the details pane, in turn, calls a modal form that allows you to edit the detail data. The modal form launches correctly and I can see the information it contains, with the right number of areas. The problem is when I use the buttons on the modal form to cancel or apply changes. It is supposed to go back to my original master/detail page. The weird part is that when I press one of the buttons in the modal window... all content in the window disappears... but the modal window itself remains visible on the screen. I have to press 'X' to close the modal window to return to my master-detail form. If this is supposed to be how it works, I find the very strange feature. You would think that if I am applying changes and/or cancellations out of the window that should clearly not only the content in this form, but it should also get rid of the window entirely. I don't think you should have to use the button cancel then turn around and press the "X" to close the modal window.

    I realize that some people would want to perform different functions within these modal windows, but it seems to me that when you perform an action such as the application of the amendments or by using the Cancel button, that you would like to close the window completely and take you from you. There may be a way to physically close the window (IE via javascript) so if anyone has any good ideas on how to do this, please let me know.

    After doing some reading, it turns out be the guy behind the keyboard. Apparently, there is a process of dialogue that should be used and this will be what I was looking for. For anyone else who is curious, see http://blog.iadvise.eu/2014/02/10/apex-5-0-modal-dialogs-have-never-been-so-easy/#comment-29067http://blog.iadvise.eu/2014/02/10/apex-5-0-modal-dialogs-have-never-been-so-easy/#comment-29067.

  • How to pass the PHP variable to menu jQuery Modal popup

    Hello

    Need help to find how to pass a variable in php (which is recovered in a while loop) in a modal window.

    There is a list of users on the page (shown with a while loop), with buttons Remove next to each of them.

    When the administrator clicks the button Delete for that specific user, a modal window appears confirming their action.

    I can't find a simple way to communicate the id of the user to be removed the modal (where the query is performed, once 'Yes to confirm deletion' is clicked).

    I deleted the jQuery, seeing as how this could change how the modal opens and closes.

    This is the modal:

    < div class = "modal" >

    < div class = "modal_wrapper" >

    < div class = "modal_title" > are you sure you want to delete this user? < / div >

    < div class = "modal_content" >

    < div class = "modal_button_no" > n < / div >

    < div class = "modal_button_yes" > Yes, delete it < / div >

    < / div >

    < / div >

    < / div >

    < div class = "delete_btn" > delete user < / div >

    The variable with the user name is:

    $user_id

    Any help would be much appreciated!

    Thank you

    It is a fairly simple procedure. Personally I'm not sure that its worth the effort for a box of administration but good we all have different opinions - there is no wrong or it.

    Suppose that your buttons delete on your page are anchor tags and you have locked down your database of names to create anchor tags. The value of dir below has been inserted via php through loop and is your RegID.

    Delete

    Delete

    Delete

    Delete

    When you click the anchor tag (that class name "delete") opens a lightbox. You also have to collect the value of "dir" at the time the lightbox opens - happening of value to a hidden in the lighbox code entry field.

    The value of the "dir" command is passed to the light table in a hidden form field:

    "You have a delete button in the light table with the class of ' delete_record ':

    Delete the record

    When the user clicks on the button Delete in the light table the value of hidden form field is harvested and forwarded to your page of delete_record.php via the jquery/ajax script below, were also on the same page.

    Your delete_record.php would look like below, assuming that you use mysqli or if you are using mysql then you would follow the same delete procedure as usual.

    <>

    $conn = new mysqli ('localhost', 'root', 'root', 'name');

    {if ($conn-> connect_errno)}

    echo $conn-> connect_error;

    Die (' sorry, can not connect to the moment, try again later ');

    }

    ?>

    <>

    delete the record

    $record_id = $conn-> real_escape_string (stripslashes (trim($_POST['record_id'])));

    $conn-> query ("' DELETE FROM names WHERE record_id = ' $record_id ' '");

    $record_deleted = "true";

    ?>

    An alert box will appear at the end, confirming that the record has been deleted. You do not have to deploy an ugly alert box - you sends the data to the device of light therapy from the delete_record.php page in a few nice melted in

    If you want to be more subtle about it.

  • jQuery modal dialog box

    Hello
    I want to create a modal jquery dialog.
    I followed Dene Kuniceks example (http://apex.oracle.com/pls/otn/f?p=31517:257:2686314880885355:RP, ::))

    It works very well.
    With one exception: I have also start with a report, but the report contains a parameter that is passed from another page.
    The request is something like

    Select ename
    sal
    comm
    WCP
    where empno =: p23_empno
    ;

    After the execution of the application process on this setting is disabled so that the report returns no rows.

    How can I prevent the clear setting?

    Sincere friendships Erik

    I want to just go back to my original report page.

    Can remove the 'doSubmit ('SEARCH');"line of the function 'addPerson()' (or the equivalent function, you have created). If the form closes without doing anything to the home.

    Since you're on apex 4, you don't need to use an ondemand for this process (there is even a component on specific request called callback for specific ajax calls to this page), but simply to define a dynamic action that fires when the button is clicked (delete button action and add an id of HTML that you can use in D.A. to select the button or you can even use a region key to) This).
    Choose run PLSL block, use the same code for the dynamic action and all of these adds option «Items to submit»
    If you want to refresh the report, it would be as simple as adding another real action in the region of refresh type and choose the report area.

  • JQuery modal model Theme26

    Hi all

    4.2.5 apex...  XE 11.2 theme 26...

    I saw that theme26 has a pattern of modal region of JQuery, but I can find no documentation or sources online that explain how to actually run...   If I put a region to it, its just empty...

    Can someone point me in the right direction, or the documentation to find out how to use it?

    Thank you very much

    Richard

    CTRL-U ;-)

    It's pretty simple and there are a dozen ways to make it happen.

    Link in the report button opens this URL

    JavaScript: $s('P8_EMPNO', #EMPNO#);

    On change DA works this JS

    openModal ('EMP');

    Cancel button closed modal

    closeModal();

  • try to implement jQuery clock and I have some doubts...

    First of all should I install the jquery library in apex 4...
    I thought that the library jquery already present in the apex 4...
    What are the new features of jquery in apex 4... I am comparing it with apex 3...
    I thought that jquery is integrated in the apex 4...


    See the example in the following link
    http://Apex-notes.blogspot.in/2008/11/timepicker-and-apex.html

    I did everything mentioned above... the link above apex-notes...
    But I can't seem to get the time clock...
    Do not know where this part of the code should be added... It's the last activiity mentioned in the above link... http://Apex-notes.blogspot.in/2008/11/timepicker-and-apex.html
    script type = "text/javascript" >
    {$(document) .ready (function ()}
    cback function (time) {}
    var c is $("< div style =' couleur: rouge" > heure d'entrée: "+ temps +" </div > ");.
    c
    . Hide()
    .insertAfter (this)
    .fadeIn (1000)
    .fadeOut (1000);
    }


    $("#P9_TIME").unbind (.clockpick({))
    StartHour: 8,
    EndHour: 20,
    ({showminutes: true}, cback);


    });

    < /script >

    Published by: susf on 19 June 2012 02:35

    Why all expect you a clock? It won't show a Visual clock just because javascript library name is clock.

    First of all know what he does and then put implementation.

    Learn jQuery and try some of these plugins

    http://www.ajaxupdates.com/jclock-jQuery-clock-plugin/

    http://joaquinnunez.CL/jQuery-clock-plugin/

    http://www.Google.co.UK/search?AQ=0&OQ=jQuery+clock+&sugexp=chrome, mod = 0 & sourceid = chrome & ie = UTF - 8 & q = jquery + clock + plugin

  • JQuery - CFML - form submit example

    I searched for a complete example on how to use JQuery and CFML to submit the form.

    So how to submit a form has form the values in the data page and return to the page where the form is on.

    I found all kinds of different code snippets but no complete example, can someone help me, provide such?

    Thank you!

    Does that help?

    http://www.coldfusionjedi.com/index.cfm/2010/5/8/simple-jQueryColdFusion-form-example

  • JQuery modal dialog on the application does not - help?

    Hello. I have a page where I want a region that must appear in a JQuery dialog box. I have this in the page header:
    <script src="/i/UI/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="/i/UI/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="/i/UI/js/jquery.pstrength-min.1.2.js" type="text/javascript"></script>
    <script src="/i/UI/development-bundle/ui/ui.dialog.js" type="text/javascript"></script>
    <script src="/i/UI/development-bundle/ui/ui.core.js" type="text/javascript"></script>
    <script src="/i/UI/development-bundle/ui/ui.draggable.js" type="text/javascript"></script>
    <script src="/i/UI/development-bundle/ui/ui.resizable.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/i/UI/css/custom-theme/jquery-ui-1.7.2.custom.css" />
    
    <script type="text/javascript"> 
    $(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
     
    });
     
    });
    function f_show_dialog()
    {
    $("#dialog").dialog('open');
     
    }
    </script>
    And a region called "forgotten password?" That contains this in the header of the region:

    {code}
    < div id = "dialogue" title = "Password forgotten?" >
    {code}

    and this, in the footer:

    {code}
    < / div >
    {code}


    When I click on a link, I want a modal to open dialog box that shows the region.

    When I try to launch it, firebug returns an error and the same error recurs whenever I click on the link. It is said

    * "$("#dialog")".dialog is not a function - modal: true "*."

    Anyone know what I am doing wrong? Help, please... I tried the continuation of aid on this thread http://forums.oracle.com/forums/thread.jspa?threadID=1031046 & start = 30 & tstart = 0 but nothing helped.

    Hello

    If you try this

    
    
    
    
    
    
    

    Dialog box opens when you run the page?

    BR, Jari

  • How to implement a modal busy indicator

    Hello

    I have a dynamic Action that performs certain calculations of pl/sql and to display a modal busy indicator so that the calculations are performed.

    I know there is an indicator to 'See the transformation' and it works very well, but this cannot be used with the action type "submit Page".

    Can anyone provide info on how this is possible?

    Thank you

    You can keep this simple by reusing the built in "see the indicator transformation."

    At the beginning of your treatment, run (javascript):

    apex.widget.waitPopup()
    

    And once finished, just remove the elements (once again, javascript):

    $("#apex_wait_popup,#apex_wait_overlay").remove()
    
  • Implement the Contact form on a picture in slideshow fullscreen

    Hey community,.

    is there a way to implement widgets in simple images in a slide show full-screen?

    Or are there alternatives?

    Thanks for help

    see you soon

    Cedric

    We cannot insert items in the show, but as a replacement, you can use compositions and insert the other widgets in containers.

    Thank you

    Sanjit

  • Need to implement jQuery in webcenter 11g (UCM or Stellent)

    Where we can add jquery file in 11g, then we can access file jquery on every page as layout.js (default ucm file).
    Now, I would like to introduce jquery file in ucm for global use. But I just couldn't get it by default on all pages.
    Basically we never used jquery in stellent and now we add some robot on a different page using jquery but now I will introduce each page on each page which is the reason why I want to load the jquery file.

    I have replacements that include and include this solved my purpose.
    std_js_load_layout_manager_resources
    Thank you

    Published by: 967110 on January 28, 2013 23:34

  • Modify a form online in the backend effect implementations of this form on the site?

    I need to modify a form of payment secure area that already exists and accept payments. We have now potentially reap the coordinates of the user

    -My boss want to divide then test two versions of the form (the existing and that changed).

    -I can't just create a new form that we have customized API work that references the ID of this form

    If I add the required fields for the form online that will affect my current implemtation of this form?

    The current shape is inserted as html

    I'm sure that it will not, but don't think it would hurt to double check.

    See you soon

    Pat

    Hi Pat, you can't test splits a form as with additional data because there as additional data.

    So if you add fields to a web form you must add them to the form in the admin.

    (Other payment then that is server-side) fields are only required based on javascript code, if you add in the admin, you must add them to a web form and also to include in the validation javascript at the bototm of the form.

    With regard to the appearance of the shape it appear differently on different A B testing pages to see then the conversion rate, the only kind of split testing would be based on designs.

  • Implementation of the forms of Contact on AS3, Flash CS5?

    Does anyone have an answer for me please, I've been through training in Trani on HD and also with the package of Lynda.com, I was trying to make the second contact form - the program tells me that there is a function repitition so what I should cause I do more than 1 contact form for my website?

    Does anyone have an easy solution for me to go to cause its been like a week and I'm tired of this stupid question, my site is done and now waiting to publish again this error doesn't help any. Thanks for all the help...

    If you understand what I'm saying, I don't see the challenge you are talking about. You can rename the functions you want, just not the same name as another function.  The only thing I can imagine is that you do not understand you see functions defined in the code are named by the person who wrote the code.  So, if you see a function like...

    function someWords() {}

    code

    }

    This is a feature that you can rename as you please...

    function someOtherWords() {}

    another code

    }

    as long as you change everything that invites who work as well.

    But if the code inside the functions will not change, then you don't need to have two functions defined to do the same thing anyway... just share the same for the two forms

Maybe you are looking for

  • I rented a movie and he will not play in its entirety.  How can I fix it?

    I rented 'The Martian' and it will not play.  How can I solve this problem?

  • Data recorder for excel for NI 9213

    I am interested in an application that will flow all 16 thermocouples directly on an excel spreadsheet with time that reading has been taken. Reading example 1 minute for 48 hours.

  • Sostituzione batteria R710 RAID controller

    Buongiorno. Sono a take UN preventivo relative alla batteria da auswechseln al PowerEdge R710 quanto sul display compare the written relative alla batteria del controller download. The batteria che ho trovato nel sito: e compatibile? Speaking saluti

  • PowerEdge 1800 Server

    I have a Dell PowerEdge 1800, which has worked very well for 10 years, and I intend to replace it in the fall.  Last night, something happened and the motherboard got a little warm, and the system is dead. I found a replacing MB and was looking for a

  • Start of message - job has not completed

    After starting my computer (Windows 7), he ends by showing a gray screen with the following message box: Work was not completed __ Error in action 3: file or Application: C:\ATSCallingCard\install\ATSHotKey.exe not found _____________________________