How To Show Html Report By Ajax Callback In Oracle Apex

<span style="font-size:22px"><h2>How To Show Html Report By Ajax Callback In Oracle Apex</h2></span>

How To Show Html Report By Ajax Callback In Oracle Apex

We Typically Create HTML Reports With Pl / SQL Dynamic Content For Any Region. But To Preview HTML Report By Pl / SQL Dynamic Content, You Have To Give Page Subteam Or Reload Every Time. In Today's Post / Video I Will Try To Show You How To Create HTML Report Using Pl / SQL Dynamic Content Using Ajax Callback And The HTML Report Will Be Refreshed As The Data Of The Item Changes. After Watching The Entire Post / Video, Hopefully You Will Be Able To Create And Refresh HTML Report Using Pl / SQL Dynamic Content Using Ajax Callback. To Refresh The HTML Report In The Pl/SQL Dynamic Content Region, We Will Go Directly To A Page That Has the HTML Report In The Pl/SQL Dynamic Content Region To Submit Or Reload The Page Directly. How To Show Html Report By Ajax Callback In Oracle Apex, Html Report By Ajax Callback.

Steps On How To Display Html Report By Ajax Callback On Oracle Apex

1. First We Will Create An Ajax Callback Process Using The Pl/Sql Code Of Pl/Sql Dynamic Content.
Name - Product_details
You Can Modify It As Per Your Requirement Using The Pl/Sql Code Provided By Me, Copy And Paste The Code.

	                         BEGIN
       htp.p('<!DOCTYPE html>');
       htp.p('<html lang="en">');
       htp.p('<meta charset="UTF-8">');
       htp.p('<TITLE>My Shop, Feni</TITLE>');
       htp.p('<style type="text/css">
             body{
                 width: auto;
             }
             /*header table 1 css*/
             #table_1 h3{
                 font-size: 30px;
                 margin:0px;
             }
             #table_1 tr td{
                 font-size: 20px;
                 margin:0px;
             }
             #table_3,
             #table_3 tr td{
                 font-size: 15px;
                 margin:0px;
             }
             #table_3 th,
             #table_3 td{
               border: 0px;
             }
       th {
         padding-top: 2px;
         padding-bottom: 0px;
         text-align: center;
         background-color: #4CAF50;
         color: white;
       }
           </style>');
                          htp.p('</head>');     
       htp.p('<body>');
       for u in (select a.PRODUCT_ID,
                  CASE WHEN NVL(dbms_lob.getlength(a.PRODUCT_IMAGE),0) = 0
           THEN NULL 
           ELSE CASE WHEN a.MIME_TYPE like 'image%'
           THEN '<img style="max-width:250px" height="275px" width="350px" src="'||apex_util.get_blob_file_src('P26_PRODUCT_IMAGE',a.PRODUCT_ID)||'" />' 
           ELSE 
           '<a href="'||apex_util.get_blob_file_src('P26_PRODUCT_IMAGE',a.PRODUCT_ID)||'">Download</a>'
       end
           END as pic,a.PRODUCT_CODE,a.PRODUCT_NAME,a.PRODUCT_DESCRIPTION,b.SELLING_PRICE,b.DISCOUNT,b.ORIGINAL_PRICE from PRODUCT a, PRODUCT_PRICE b 
                 where a.PRODUCT_ID = b.PRODUCT_ID and a.PRODUCT_ID=apex_application.g_x01)
 
                         loop
       htp.p('<table id="table_2" width="100%" style="padding-bottom: 5px;">
             <tr><td colspan="5">'||u.pic||'</td><td colspan="5" style="text-align:left;padding-left:50px;font-size:17px;line-height:1.4em">Product Code : '||u.PRODUCT_CODE||',    
             <br>Product Name : '||u.PRODUCT_NAME||', 
             <br><br>Product Description : '||u.PRODUCT_DESCRIPTION||', 
             <br><br> Price : <b>'||u.SELLING_PRICE||'</b>,     Discount : <b>'||u.DISCOUNT||',
             <br><b>Current Price : '||u.ORIGINAL_PRICE||'
             </b></td>
                   </tr>
       </table><br>');
       end loop;
       htp.p('<table id="table_3" width="100%" cellpadding="5px" style="text-align: center;">
             <tr>
             <th width="5%"></th>
             <th width="5%"></th>
           </tr>');
       for x in (select c.COLOR,c.FABRIC,c.GENDER,STYLE,c.BRAND,c.PRODUCT_TYPE,c.OTHERS,c.PRODUCT_ID from PRODUCT_DETELS c, PRODUCT d
                 where c.PRODUCT_ID = d.PRODUCT_ID and c.PRODUCT_ID= apex_application.g_x01)
       loop
       htp.p('<tr>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Color : '||x.COLOR|| '</td>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Fabric : '||x.FABRIC|| '</td>
             </tr>
             <tr>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Gender : '||x.GENDER|| '</td>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Style : '||x.STYLE|| '</td>
             </tr>
             <tr>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Brand : '||x.BRAND|| '</td>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Product Type : '||x.PRODUCT_TYPE|| '</td>
             </tr>
             <tr>
             <td style="text-align:left;font-size:17px;line-height:1.4em;width="50%";colspan="1";>Others : '||x.OTHERS||'</td>
          </tr>');
       end loop;
       htp.p('</table>');
       END;

2. I Will Set An Id Using Pl/Sql Dynamic Content Region Span.
Pl/sql Code- Paste The Following Code

	                    
                             Htp.p('<span Id="Product_det"></span>');

3. I Will Go To The Properties Page And Create A Function In The Function And Global Variable Declaration Box.
Function And Global Variable Declaration- Paste The Following Code

	                    
                             Function Product_report(){
           Apex.server.process("Product_details", 
           {x01:apex.item('p93_select_product_list').getvalue()},
           {datatype: 'text',
           Success: Function(Pdata){
               $("#product_det").html(Pdata);
           }});
       }

Change The Name Of The Function, The Name Of The Process, The Name Of The Page Item And The Id You Used In The Pl/Sql Dynamic Content Region To Your Liking In The Javascript Code.

4. I Will Create A Dynamic Action In The Product Select List Page Item.
        Name - Product Report Refresh
       Event- Change,
       Selection Type- Item(S)
       Item(S) P93_select_product_list

Action- Set Value
Set Type- Javascript Expression
Javascript Expression- Product_report();

Affected Elements-
Selection Type- Jquery Selector
Jquery Selector- #product_det

5. Our Show HTML Report By Ajax Callback Is Almost Finished.

Now We Are Refreshing The Pl/Sql Dynamic Content Html Report Properly. I Will Try To Use It, If The Report Is Not Refreshed Properly Or If There Is Any Problem, Check The Name Of The Function, The Name Of The Report Id Page Item And Change Everything According To Your Page And Report, Thank You.

🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.