Tabular Form With Ajax specially for beginners

Sometime it's necessary to use tabular in oracle application express with ajax consedering new comer who wants to explorer more as they join in this article might help them to keep it going.

Steps to follow :

1) Create a tabular form based on table and save and run you're page you can see page is properly created and do not show any errors.

2) Now if you inspect you're tabular form checkbox (or cells) it will show name="f01"and Id = "f01_0001" just have a look at it for every cell you have on you're page.

3) Edit you're page and add Page Process(pl-sql) and target point will be Ajax callback lets add some pl/sql block in it

declare

l_id  NUMBER;
l_json_str  varchar2(500);
begin
select  id
into
l_id   
from my_table where columan = apex_application.g_x01; 

--x01 is what we gonna send from js code on some event like click,change,onselect 

and many more....
l_json_str  := '{"id":"'||l_id||'"}';
sys.htp.p(l_json_str); 

--press f12 network response 

and you will see what is the response we are getting if there are some errors it will also show.

end;

If you have observed properly we are sending some values from javascript code which is used as filter in where clause. Lets assume we wanted to show those data whose id = 100 then we are sending 100 from js (x01) and based on that ajax callback function fires and show data.

Debug Lets say we wanted to check what is going on under the hood !!!
Press f12 in chrome and click on network.
Now lets say we have select list on page we changed the value of select list and get the id of value we have just selected that id will be passed as x01 to ajaxcall back.

4) Lets took a look at javascript code :
//Tabular from will have on lov cell based on change of it ajaxcall will fire. also add onchang="get_item_details(pThis)" in lov's html attribute

function get_item_details(pThis){
var item_id = pThis.value;
var row_id  = pThis.id.substr(4);
var my_id =  $('#f02_'+row_id);
apex.server.process ("ajax_callback_process_name",
{
x01:my_id
},
{
type: 'GET',
dataType: 'json',
success: function(l_json_str)
{
$(apex_item).val(l_json_str.uom_id);
}
});
}

5) We need to make sure on which action we need to fire this action that is the most important thing to remember which is already shown above.

Declaimer 
Oracle application express 5.0+
Javascript
Jquery
Oracle database 11g

Barcode lable printing using jquery with oracle apex

So lets say we wanted to print barcode layouts in our Oracle Application Express  which will print small,simple and elegant labels with information we wanted to print, First let me tell you barcode  label printing needs some define paper layout on which we can print barcode data Paper Size Information

After selecting the proper layout its time for start coding in  HTML, JAVASCRIPT and PL/SQL this part is very interresting here i have share the neccessary js file which needs to be included on page you can add this Javascript - For Barcode Layout file in workspace.

Create report in your application which will be pl/sql based so we can write some htp.p methods in that report.

As of now we have selected page layout and added js as per our need now it's time to build a page in oracle which will work with js and layout.

So we gonna add report with below code.

DECLARE

page_cnt number := 1;
row_count number := 3;
page_elements number := 24;
l_cnt number:=0;

cursor c1 is
select a.lvl,
null DUMMY_COLS,
null DUMMY_COLS2,
null DUMMY_COLS3,
null DUMMY_COLS4,
null DUMMY_COLS5,
null DUMMY_COLS6,
null DUMMY_COLS7
from
(SELECT LEVEL as lvl FROM dual CONNECT BY LEVEL <= 24) a
join
(
SELECT  LVL
FROM MY_TABLE t
and rownum < 2
) b on a.lvl < b.lvl
union all
 ( SELECT    (rownum+p_begin_no) - 1 as lvl
    FROM MY_TABLE2
    )
order by 1;

                               
BEGIN
                                                       

htp.p('<table class="mainTable">');
htp.p('<tr class="singleRow">');

-- max l_cnt will be
-- page_elements = 24 -- number of elements on a single page
-- row_count = 3 -- max number of elements in a single row
-- page_cnt -- running total of pages created, init at 1
-- l_cnt -- running total of elements printed .. init at 0
                                                       
FOR A IN c1 LOOP
 
-- increment the counter to get the current element number
l_cnt:=l_cnt+1;

-- open a new table if required
IF  ((mod(l_cnt, page_elements) = 1) AND (l_cnt > 1))  THEN
 htp.p('<table class="mainTable">');
END IF;

-- open a new row if required
IF  ((mod(l_cnt,row_count) = 1) AND (l_cnt > 1))  THEN
 htp.p('<tr class="singleRow">');
END IF;


-- add the element under an existing row...
        if a.item_id is null then
            htp.p('<td class="singleColumn"></td>');                                                
        else                                          
            htp.p('<td class="singleColumn">
                <div  name="barcode">'||A.COL1||'</div>
                <div class="singleDiv">'|| A.COL2||'</div>
                </td>');
        end if;

-- based on the l_cnt determine, if we need to close a row or not
        IF (mod(l_cnt,row_count) = 0 AND l_cnt > 1) then
            htp.p('</tr>');
        END IF;

-- based on the l_cnt determine, if we need to close a table or not
        IF (mod(l_cnt,page_elements) = 0 AND l_cnt > 1) then
          htp.p('</table>');
        END IF;
END LOOP;
     
-- Add elements to complete a row
IF mod(l_cnt, row_count) <> 0 then
    FOR i in 1..(row_count - mod(l_cnt, row_count)) loop
        htp.p('<td class="singleColumn"></td>');
    end loop;
end if;
 
    IF mod(l_cnt, row_count) <> 0 then
        htp.p('</tr>');
        htp.p('</table>');
    end if;
END;

How actually everything works ?? 

  

what i did for my task is user will select some data from lov and based on lov data Tabular result will get reflected (so far so good) i have report  on page so if user checks the checkbox and submit it will save into the database with beginning number of barcode to be printed and then after it will open a new page with barcode in it.

In pl/sql we are using what, where and how many records of  barcode we wanted to print.

So the logic is if user selects he wants to start printing from label no 3 then according to our pl/sql logic as shown above it will print data from #3.

How many formats can we print??

Different formats(on a single page): 24 label, 28 label, 30 label etc...

It will print every format no matter what layout you are working on just change the sql according to you're need and you are good to go.

Declaimer 

Oracle Application Express version 5.0
Report
Javascript