4 Replies Latest reply on May 19, 2015 7:19 AM by ujwala1234

    How to fetch values inside jquery modal dialog rigion item's

    ujwala1234

      Hello Everyone,

       

      My  requeriment is

      Click on  report edit link open jquey modal dialog region and display all values with respective Id values.

      1.I used page HTML Header Below 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() {

         $('#ModalForm').dialog(

         {

              modal : true ,

              autoOpen : false ,

              width: 600,

              buttons  : {

                  Back : function() {

                      closeForm();

                  } ,

                  Approve : function() {

                           addPerson();

                      },

                  Return_For_Correction : function() {

                           addPerson();

                      },

                  Reject : function() {

                           addPerson();

                      }

                  }

       

       

         });

      });

       

       

      function openForm(TrxId)

      {

      alert(TrxId);

      $s('P3_x_trx_id',TrxId);

          $('#ModalForm').dialog('open');

       

       

      }

       

       

      function closeForm()

      {

          $('#ModalForm input[type="text"]').val('');

          $('#ModalForm').dialog('close');

      }

       

       

      function addPerson()

      {

         var ajaxRequest = new htmldb_Get( null , &APP_ID. , 'APPLICATION_PROCESS=updateStatus', 0);

         ajaxRequest.add( 'P3_status', $v('P3_status'));

         var gReturn = ajaxRequest.get();

       

       

          if(gReturn)

          {  alert(gReturn) }

          else

          {  ajaxRequest = null;

             closeForm();

             doSubmit('SEARCH'); }

      }

      </script>

       

      2.Html region static Id - ModalForm

       

      3.Html region Header -

      <div id="ModalForm" title="View Details" style="display:none">

      4.footer-

      </div>

       

      5.In same page created  "auotomatic row fetch" process useing PK key value P3_trx_id

       

      6.Jquery modal region is created but values not showing.

        • 1. Re: How to fetch values inside jquery modal dialog rigion item's
          Jitendra

          Hi Ujwala,

           

          You have to create separate page for your modal dialog,

          and call that dialog from the parent page and pass value to the modal page in some hidden item and use the value of that item to fetch the details on modal dialog.

           

          1. Edit your Report Page-> under HTML header

          <script type="text/javascript"> 
          var modalDialog; 
              //function to show modal dialogs
          function showJQueryDialog(width, height, url, title) {
                  modalDialog = $('<iframe id="modalID" name="modalName" src="'+ url +'"  width ="+ width + "px" height = " + height + "px" frameborder="no" style ="overflow: hidden;"></iframe>');
                  $(modalDialog).dialog({
                      open: function(event, ui){$("a.ui-dialog-titlebar-close");},
                      modal: true ,
                      dialogClass: 'noTitle',
                      title: title,
                      width : width,
                      height: height,
                      closeOnEscape: true }).width(width).height(height);
              }
             
          // show dialogs
          function f_modalDetails(p_id) {
                   var url = 'f?p=&APP_ID.:2:&SESSION.::NO:2,RIR:P2_ID:' + p_id  ;   //in place of P2_ID put the Item name of modal dialog which holds the value passed from report page.
                   var title = 'Details';
                   showJQueryDialog(950,650, url, title);
              }
          
          // function to
          // close Details modal dialog
          function closeModalDialog() {
              modalDialog.dialog("close");
          }
          </script>
          
          
          

           

          2.Edit the Link column from where you want to call modal dialog.

          Target : URL

          URL : javascript:f_modalDetails(#ID#);

          //in place ID pass the value which you want to pass to modal dialog which shows you the data related to selected row.

           

          3. Go to Form page(Modal Dialog)

          Edit your close button that close the modal dialog.

          Action : Redirect to URL

          URL Target : javascript:window.parent.closeModalDialog();

           

          close model dialog using press of submit button

          4. Create one Branch on Page Processing section of Modal dialog page

            Branch Point : After Processing(After computation , validation and Processing)

             Target Type : Page in this Application

             Page : Redirect to the same page

             Request : CLOSE_MODAL

             When Button Pressed : Select the submit button

          NOTE : Branch should be before all the unconditional branch on that page

           

          5. Create Dynamic Action on Modal dialog Page

            Event : Page Load

              Action : Execute JavaScript Code

              Code : javascript:window.parent.closeModalDialog();

          Regards,

          Jitendra

          1 person found this helpful
          • 2. Re: How to fetch values inside jquery modal dialog rigion item's
            ujwala1234

            Hi jiten,

             

            I followed  all the steps.

            I got this error Click on report edit link.

             

             

            Load denied by X-Frame-Options: http://appsdev.kpcl.net:7777/apex/f?p=2216:7:2975796463649::NO:7:P7_X_TRX_ID:14 does not permit framing.

            • 3. Re: How to fetch values inside jquery modal dialog rigion item's
              Kiran Pawar

              Hi ujwala1234,

              ujwala1234 wrote:


              I followed  all the steps.

              I got this error Click on report edit link.

              Load denied by X-Frame-Options: http://appsdev.kpcl.net:7777/apex/f?p=2216:7:2975796463649::NO:7:P7_X_TRX_ID:14 does not permit framing.

                   You have to change the iframe options for your application (set to "Allow" or "Allow from same origin"):

               

                   Hope this helps!

               

              Regards,

              Kiran

              1 person found this helpful
              • 4. Re: How to fetch values inside jquery modal dialog rigion item's
                ujwala1234

                Hello Jiten and Kiran,

                 

                Thanks, It's working properly.

                Issue Solved...

                 

                Regards,

                ujwala.