I have a dialog with a repeating section that can get as big as about 300 items... I know what you are thinking, "why would you ever do that?" For that answer see the background information below. AJAX callbacks on are taking over a minute to complete in some larger data sets due to the sheer size of the callback. It seems most of this time is the A5 application server parsing the callback as I wrote a test function that takes a few milliseconds to run and it still took 40 seconds to do the callback. I would like to avoid all this and just write my own callback that will only submit the needed data but am unsure about how to return data from the callback URL. If all goes well I plan to write my own submit callback too which will only submit the few editable fields on only rows that are dirty.
Background Info (can be skipped):
I will try to address why I am using such a large dialog repeating section without going into too much detail as why it is needed; people do not like to read long posts. The web app will be used by salesreps to place orders in retail stores that the company supplies (small wine distributor). Products are not laid out in retail stores in alphabetical or numerical order. The salesreps have to be able to set their own custom item sort order so they can "walk the shelves" and simply go down the list of products as they appear in the store. To do this I have created a sort placement field in the DB table that contains the items each account (store) orders; this is called a order guide. When a new record is added to the order guide table the sort number is auto assigned the value of ID field which places the item at the bottom of the order guide, the id is auto assigned and never changes. Now we get to the problem; being able to quickly move items around in a order guide has been a issue. If you use a multi-page grid you cannot move items up or down without a Ajax callback to change the sort placement value then refresh the grid. This takes a few seconds on each move and quickly gets extremely annoying on large order guides (200+ items). I have tried a ton on things and found the fastest is to just allow the user to do all the moving in a dialog repeating section with JavaScript swapping the sort values and row placements then just submit the data when they are done. Now the problem becomes the sheer size of the callback on dialog submit. There are a few cases where a callback is still needed outside of the submit that are a problem too, adding and removing items. When an item is added a callback is needed to execute code that adds an item and returns the new ID and sort placement value, this callback is submitting all the grid data which is a total waste, all I need is the account number and the new product number.
Times to process a dialog with a repeating section of 250 items:
- Initial load of dialog: 4-8 seconds
- Submit (AJAX Callback): 50 seconds
- Add item in repeating section (AJAX Callback to get id and sort placement value): ~40-50 seconds
- Delete item in repeating section (Submit AJAX callback then page refresh): ~50-60 seconds
- Simple AJAX callback, I am calling function that creates a file as a marker on the server, then the code on the server returns a basic JavaScript alert, only a few lines of code total: 42 seconds
-- Breakdown timing of above.
--- Time from AJAX callback button press to server CPU jumping to 100% (callback data submit time): 5 seconds
--- Time from server CPU at 100% to file being created: 20 seconds
--- Time from file being created until server cpu drops from 100% / JavaScript alert message appears: 17 seconds
Here is what I have so far
JavaScript on dialog to submit AJAX callback for adding a new item to the repeating section:
"AJAX_callback_order_guide_add_item.a5w" page code:
I found some info on the wiki, this page says you can use the $gvs function to grab data from the callback url page but not really sure what type of container to put the data in, etc. I am hopping someone out there has already done something similar and would be willing to share some code snippets of the callback URL page code.
Background Info (can be skipped):
I will try to address why I am using such a large dialog repeating section without going into too much detail as why it is needed; people do not like to read long posts. The web app will be used by salesreps to place orders in retail stores that the company supplies (small wine distributor). Products are not laid out in retail stores in alphabetical or numerical order. The salesreps have to be able to set their own custom item sort order so they can "walk the shelves" and simply go down the list of products as they appear in the store. To do this I have created a sort placement field in the DB table that contains the items each account (store) orders; this is called a order guide. When a new record is added to the order guide table the sort number is auto assigned the value of ID field which places the item at the bottom of the order guide, the id is auto assigned and never changes. Now we get to the problem; being able to quickly move items around in a order guide has been a issue. If you use a multi-page grid you cannot move items up or down without a Ajax callback to change the sort placement value then refresh the grid. This takes a few seconds on each move and quickly gets extremely annoying on large order guides (200+ items). I have tried a ton on things and found the fastest is to just allow the user to do all the moving in a dialog repeating section with JavaScript swapping the sort values and row placements then just submit the data when they are done. Now the problem becomes the sheer size of the callback on dialog submit. There are a few cases where a callback is still needed outside of the submit that are a problem too, adding and removing items. When an item is added a callback is needed to execute code that adds an item and returns the new ID and sort placement value, this callback is submitting all the grid data which is a total waste, all I need is the account number and the new product number.
Times to process a dialog with a repeating section of 250 items:
- Initial load of dialog: 4-8 seconds
- Submit (AJAX Callback): 50 seconds
- Add item in repeating section (AJAX Callback to get id and sort placement value): ~40-50 seconds
- Delete item in repeating section (Submit AJAX callback then page refresh): ~50-60 seconds
- Simple AJAX callback, I am calling function that creates a file as a marker on the server, then the code on the server returns a basic JavaScript alert, only a few lines of code total: 42 seconds
-- Breakdown timing of above.
--- Time from AJAX callback button press to server CPU jumping to 100% (callback data submit time): 5 seconds
--- Time from server CPU at 100% to file being created: 20 seconds
--- Time from file being created until server cpu drops from 100% / JavaScript alert message appears: 17 seconds
Here is what I have so far
JavaScript on dialog to submit AJAX callback for adding a new item to the repeating section:
Code:
function AJAXcallAddNewItem() {
var account_num;
var product_num;
account_num = {dialog.Object}.getValue('ACCOUNT_NUM');
product_num = {dialog.Object}.getValue('N_PRODUCT_NUM');
A5.ajax.callback('AJAX_callback_order_guide_add_item.a5w','account_num=' + account_nume + '&product_num=' + product_num);
}
Code:
<%a5
DIM nReturnStatusCode AS N
DIM cReturnStatus AS C
'------------------------------------------------------------
' - Check to make sure required data was passed in to page -
'------------------------------------------------------------
if (.NOT. variable_exists("request.variables.account_num")) then
nReturnStatusCode = 2
GOTO RETURN_STATUS
end if
if (.NOT. variable_exists("request.variables.product_num")) then
nReturnStatusCode = 3
GOTO RETURN_STATUS
end if
'--------------------------------------------------
' - Call function to add new item to order guide -
'--------------------------------------------------
DIM pResult AS P
pResult = GH_Add_Item_to_OrdGuide(e.dataSubmitted.ACCOUNT_NUM,e.dataSubmitted.N_PRODUCT_NUM)
nReturnStatusCode = pResult.nReturnedStatus
RETURN_STATUS:
if (nReturnStatusCode == 1) then
cReturnStatus = "addNewItem(" + nReturnStatusCode + ");"
elseif (nReturnStatusCode == 3) then
cReturnStatus = "alert('You did not enter a product number to add, no item will be added');"
elseif (nReturnStatusCode == 4) then
cReturnStatus = "alert('Item already exist on order guide, item will not be added again');"
else
cReturnStatus = "alert('Unkown error occured, item will not be added, status code: " + nReturnStatusCode + "');"
end if
'------------------------------------------------
' - Pass returned status back to AJAX callback -
'------------------------------------------------
'??? What should I do here? How do I make the callback read the value of the "cReturnStatus" var?
' Does "cReturnStatus" need to be in a div or XML container that I specify in the callback to read?
'?cReturnStatus
%>
Comment