2. PHPRunner Tips and Tricks
  3. Calculating order totals on the fly
This topic is locked

Calculating order totals on the fly

 		7/30/2015 5:37:44 PM
PHPRunner Tips and Tricks
Sergey Kornilov

Lets consider a simple order entry form where users create order and order details on the same screen. It will be handy to calculate order totals on the fly to save them in 'total' field of 'Orders' table. Here is how it's going to look in generated application.


This is how this can be done in your project. Note that this approach is purely Javascript-based and will work exactly the same way in ASPRunner.NET/ASPRunnerPro applications.
[size="4"]1. Database structure[/size]


[size="4"]2. Javascript code that calculates totals[/size]
Create a text file named totals.js and save it in <output>/include folder. Paste the following code there:



function calcTotals() {

var total=0;

$("tr[id*=gridRow]").each(function() {

var id=$(this).attr('id');

id = id.substring(7);

t=+($("#value_price_"+id).val() * $("#value_quantity_"+id).val());

if (t>0) total+= t;

});
$("#value_total_1").val(total);

};


In this code we go through all details table rows, calculate total for each item and add it all together. Once done we assign the totals value to "total" field of master table.
If your database structure is different make sure to update field names like "price", "quantity" and "total".
[size="4"]3. Plug-in external Javascript file[/size]
Add the following code snippet to Orders table Add and Edit page. To do so switch to HTML mode, scroll to the end of the page and add code snippet in bold.

{$footer}

{END body}

<script type="text/javascript" src="include/totals.js">

</script>

 </body>

</html>


Now we can use calcTotals() function in our code.
[size="4"]4. Make use of calcTotals function when price or quantity field changes. [/size]
To do so add the following code snippet to Javascript OnLoad event of Add and Edit pages of "Order Totals" table.

var ctrlPrice = Runner.getControl(pageid, 'price');

var ctrlQuantity = Runner.getControl(pageid, 'quantity');

ctrlPrice.on('change keyup', function(e){ calcTotals(); } );

ctrlQuantity.on('change keyup', function(e){ calcTotals(); } );
milver 2/22/2016

How to do, to cancel or delete a OrderDetails decrease the value of excluded OrderDetails the total value of the Order?



Lets consider a simple order entry form where users create order and order details on the same screen. It will be handy to calculate order totals on the fly to save them in 'total' field of 'Orders' table. Here is how it's going to look in generated application.

This is how this can be done in your project. Note that this approach is purely Javascript-based and will work exactly the same way in ASPRunner.NET/ASPRunnerPro applications.
[size="4"]1. Database structure[/size]

[size="4"]2. Javascript code that calculates totals[/size]
Create a text file named totals.js and save it in <output>/include folder. Paste the following code there:



function calcTotals() {

var total=0;

$("tr[id*=gridRow]").each(function() {

var id=$(this).attr('id');

id = id.substring(7);

t=+($("#value_price_"+id).val() * $("#value_quantity_"+id).val());

if (t>0) total+= t;

});
$("#value_total_1").val(total);

};


In this code we go through all details table rows, calculate total for each item and add it all together. Once done we assign the totals value to "total" field of master table.
If your database structure is different make sure to update field names like "price", "quantity" and "total".
[size="4"]3. Plug-in external Javascript file[/size]
Add the following code snippet to Orders table Add and Edit page. To do so switch to HTML mode, scroll to the end of the page and add code snippet in bold.
Now we can use calcTotals() function in our code.
[size="4"]4. Make use of calcTotals function when price or quantity field changes. [/size]
To do so add the following code snippet to Javascript OnLoad event of Add and Edit pages of "Order Totals" table.

var ctrlPrice = Runner.getControl(pageid, 'price');

var ctrlQuantity = Runner.getControl(pageid, 'quantity');

ctrlPrice.on('change keyup', function(e){ calcTotals(); } );

ctrlQuantity.on('change keyup', function(e){ calcTotals(); } );
jadachDevClub member 2/22/2016

Looks like all JavaScript. I assume this can be used "as is" in ASPRunner.Net?
Sergey Kornilov 2/22/2016

Jerry,
yes, it's all Javascript. Will work as is in ASPRunner.NET.
A
 		aalekizoglou 6/15/2016

Sergey,
on a similar solution I have I a trying to call CalcTotals when deleting an item. So after seeing javascript struck I was lead to onDetailsDeleted function.
Is there a way I can override this, or is there another solution to recalculate totals when deleting an order line or all of them
A
 		aalekizoglou 6/15/2016



Sergey,
on a similar solution I have I a trying to call CalcTotals when deleting an item. So after seeing javascript struck I was lead to onDetailsDeleted function.
Is there a way I can override this, or is there another solution to recalculate totals when deleting an order line or all of them


Never mind. Found that you have Events for details as well ("beforeSaveDetails", "afterSaveDetails", "afterDeleteDetails", "afterPageReady").
So adding the below code works fine.
pageObj.on('afterDeleteDetails', function(){

alert('Deleted');

});
P
 		peterp 7/26/2016



Lets consider a simple order entry form where users create order and order details on the same screen. It will be handy to calculate order totals on the fly to save them in 'total' field of 'Orders' table. Here is how it's going to look in generated application.

This is how this can be done in your project. Note that this approach is purely Javascript-based and will work exactly the same way in ASPRunner.NET/ASPRunnerPro applications.
[size="4"]1. Database structure[/size]

[size="4"]2. Javascript code that calculates totals[/size]
Create a text file named totals.js and save it in <output>/include folder. Paste the following code there:



function calcTotals() {

var total=0;

$("tr[id*=gridRow]").each(function() {

var id=$(this).attr('id');

id = id.substring(7);

t=+($("#value_price_"+id).val() * $("#value_quantity_"+id).val());

if (t>0) total+= t;

});
$("#value_total_1").val(total);

};


In this code we go through all details table rows, calculate total for each item and add it all together. Once done we assign the totals value to "total" field of master table.
If your database structure is different make sure to update field names like "price", "quantity" and "total".
[size="4"]3. Plug-in external Javascript file[/size]
Add the following code snippet to Orders table Add and Edit page. To do so switch to HTML mode, scroll to the end of the page and add code snippet in bold.
Now we can use calcTotals() function in our code.
[size="4"]4. Make use of calcTotals function when price or quantity field changes. [/size]
To do so add the following code snippet to Javascript OnLoad event of Add and Edit pages of "Order Totals" table.

var ctrlPrice = Runner.getControl(pageid, 'price');

var ctrlQuantity = Runner.getControl(pageid, 'quantity');

ctrlPrice.on('change keyup', function(e){ calcTotals(); } );

ctrlQuantity.on('change keyup', function(e){ calcTotals(); } );



Hi All,

I have been trying to replicate this demonstration of totals being calculated on the fly and it seems I have missed something because I am unable to get this to perform as shown. I have setup the database to be exactly the same and I think that I have set all of the other parameters as I get the Orders and the orders detail on the same page and when I insert data into the fields the total field in the order header does not change. There must be something I'm not setting up I need this functionality as I'm developing a system for a client. Could somebody please help me as I have spent many hours on this trying to get some result, any help will be greatly appreciated.
Best Regards,

Peterp
P
 		peterp 7/27/2016



Hi All,

I have been trying to replicate this demonstration of totals being calculated on the fly and it seems I have missed something because I am unable to get this to perform as shown. I have setup the database to be exactly the same and I think that I have set all of the other parameters as I get the Orders and the orders detail on the same page and when I insert data into the fields the total field in the order header does not change. There must be something I'm not setting up I need this functionality as I'm developing a system for a client. Could somebody please help me as I have spent many hours on this trying to get some result, any help will be greatly appreciated.
Best Regards,

Peterp



Hi All,

I have finally manage to get this working, sorry for any inconvenience I may have caused

Best Regards,

Peterp
J
 		jianwong 1/10/2020



Lets consider a simple order entry form where users create order and order details on the same screen. It will be handy to calculate order totals on the fly to save them in 'total' field of 'Orders' table. Here is how it's going to look in generated application.

This is how this can be done in your project. Note that this approach is purely Javascript-based and will work exactly the same way in ASPRunner.NET/ASPRunnerPro applications.
[size="4"]1. Database structure[/size]

[size="4"]2. Javascript code that calculates totals[/size]
Create a text file named totals.js and save it in <output>/include folder. Paste the following code there:



function calcTotals() {

var total=0;

$("tr[id*=gridRow]").each(function() {

var id=$(this).attr('id');

id = id.substring(7);

t=+($("#value_price_"+id).val() * $("#value_quantity_"+id).val());

if (t>0) total+= t;

});
$("#value_total_1").val(total);

};


In this code we go through all details table rows, calculate total for each item and add it all together. Once done we assign the totals value to "total" field of master table.
If your database structure is different make sure to update field names like "price", "quantity" and "total".
[size="4"]3. Plug-in external Javascript file[/size]
Add the following code snippet to Orders table Add and Edit page. To do so switch to HTML mode, scroll to the end of the page and add code snippet in bold.
Now we can use calcTotals() function in our code.
[size="4"]4. Make use of calcTotals function when price or quantity field changes. [/size]
To do so add the following code snippet to Javascript OnLoad event of Add and Edit pages of "Order Totals" table.

var ctrlPrice = Runner.getControl(pageid, 'price');

var ctrlQuantity = Runner.getControl(pageid, 'quantity');

ctrlPrice.on('change keyup', function(e){ calcTotals(); } );

ctrlQuantity.on('change keyup', function(e){ calcTotals(); } );



Hi Sergey
I found this useful and replicated it in my project built with version 10.3. Do the javascript codes applicable to version 10.3? Because it won't calculate Total.

Please advise. Thanks.
J
 		jianwong 1/10/2020



Hi Sergey
I found this useful and replicated it in my project built with version 10.3. Do the javascript codes applicable to version 10.3? Because it won't calculate Total.

Please advise. Thanks.


Please don't bother. It works now. Thanks.
J
 		jacktonghkDevClub member 2/14/2020



Please don't bother. It works now. Thanks.


I don't quite understand how it works for deleting detail records. Could anyone elaborate more please? Thanks.
ruzgarajans 12/25/2020

Hello to everyone,

The order details table is a good job I use frequently.(thank you very much)

I have a question;
In the example we examined, ice cream and some products were written one by one thanks to the "inline add button".
if so; I have my products table and what should I do if I want all of them to appear one under the other.

How can I define all products as default.
fhumanes 12/29/2020

Hello:
I have tried to collect the original proposal of this thread and complete it with many other aspects.

Also, have a complete and installable example on your computers so that you can carry out the tests and corrections that you consider appropriate.
It's at: https://asprunner.com/forums/topic/28006-guide-7-synchronize-update-between-master-and-detail/
Greetings,

fernando
ruzgarajans 12/30/2020

(I hope the dictionary has been translated successfully <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=93411&image=1&table=forumreplies' class='bbc_emoticon' alt=':)' />

Dear teacher,

you are doing very successful work.

you guide like a lighthouse
Thank you for your efforts.
I want to differentiate the question a little.

Question 1-) There are duplicate fields. these should not happen again

Question2-) Can't a complete product list be like an excel table? For example, how many products are in content management systems, they are all listed, so we don't need an "add inline button".

What do you think the method should be
(I'm following your website, a great resource)
Thank you


[/url][/img]