Initializing
The very first step to enable jQuery Calx, is to load jQuery and the jQuery Calx itself
Like any other jQuery plugin, it is easy to initialize jQuery Calx, you just need to prepare the element with configured data-cell
, and/or data-formula
, and/or data-format
attribute and call $('selector').calx()
to enable jQuery Calx.
We are using data-cell
attribute to define the cell address, optional data-formula
attribute to define the calculation formula, and optional data-format
attribute to define formatting rule, and then, let jQuery Calx do the magic.
Once jQuery Calx is initialized, it will respond to any changes occured in cell’s element, and do the calculation based on the cell value and formula, let’s see below example:
In the above sample code snippet, A4
will display whatever result of SUM(A1:A3)
, any change occured in A1
, A2
, or A3
will be represented in A4
since A4
depend on cell ranged from A1
to A3
.
If you are familiar with any spreadsheet application like Microsoft Excel or LibreOffice, you will also get familiar with jQuery Calx. We use term sheet
for wrapper element like form#sheet
where the jQuery Calx is initialized, and cell
for all element inside the form#sheet
that involved in calculation process, this mean all element that has data-cell
and/or data-formula
attribute.
In case data-formula
attribute present without data-cell
attribute, jQuery Calx will assign reserved cell address prefixed with CALX
and count the index incrementally, the resulting cell address will be like CALX1
, CALX2
,CALX3
,CALX4
Hello community,
I have a question, In this case, I have several excel sheets, I am implementing JQuery calx to be able to combine several excel sheets, the next formula the insert in a HTML table, example:
But the result is an #ERROR!
Exist other form the combinate the sheets.
Regards and thank.
This is my formula:
In the first comment the formula was not shown 🙁
Hi ikhsan,
My name is Amin, my i know how to use php file to save data in a grid to mysql database?
I need help to configure this in my project, just need to know how can i do this like to display a grid, and on change of column 1st, based on sum function or any other function like avg, i would like to update all the cells next to the 1st column + all the rows after that row using php mysql.
Waiting for your kind response.
Thanks
Hey there, so I’m trying to implement the SUMIF function but I can’t make it work.
Here’s my code:
PAYMENT
9200
DOWN PAYMENT
500
RECON
120
PAYMENT
500
DOWN PAYMENT
800
RECON
35
$('#deal_form').calx();
And this is the result:
PAYMENT 9200
DOWN PAYMENT 500
RECON 120
PAYMENT 500
DOWN PAYMENT 800
RECON 35
11155 #ERROR!
Any advise?
Thanks!
Sorry, code:
PAYMENT
9200
DOWN PAYMENT
500
RECON
120
PAYMENT
500
DOWN PAYMENT
800
RECON
35
$(‘#deal_form’).calx();
Oh, I noticed the B7 formula had the closing parentheses ‘)’ after the quotation ” and switch them. Still didn’t work.
I´m having this error message when focus on input: “VM58516:9750 Uncaught TypeError: Cannot read property ‘getValue’ of undefined”. And this others when blur: “VM58516:9770 Uncaught TypeError: Cannot read property ‘renderComputedValue’ of undefined” and “VM58516:9844 Uncaught TypeError: Cannot read property ‘isAffected’ of undefined”. My code is this:
Do you have any idea what is happening? Thank you very much!
Sorry, the code is here!
Hi Sergio,
it seems because your cell addresses are using lowercase char instead of uppercase, try changing Cf1 into CF1
regards,
Ikhsan
Hi Ikhsan,
thanks for your answer to my previous question, I have got two questions 😉
1. The app I am working on requires several sheets to be made available in tabs. That’s not a problem as I assume that one can call several times calcx on different element. Is there a way to write formulas using data from another calcx object ? something along the lines of what Excel does with it’s sheet1! prefix ?
2. My ‘sheets’ are forms containing a table and each td cell has an input field. I tried to use simple divs with a contenteditable flag. in my context this is much lighter to use; unfortunately if does not seem that calcx knows how to pick up the html content of a div: so my question are there any restrictions to the type of html element usable ? A span is not really the answer as they are difficult to align properly (nor are they meant to be)
Thans for your time
Didier
Hi Didier,
1. You can simply write something like
A1+SUM(#sheet_id!B1:C10)*#sheet2_id!D5
2. Yes, calx also support div, but not support content editable property yet, I will try to implement it if it possible. For now, you may use css to make the input field blend seamlessly into your table
Best regards,
Ikhsan
First of all great work – I have been in this business for longer than I care remember and your library belongs to the very few ones which made me pause and think ‘Well done to this guy’
My only question so far is that I am confused has to what uses and when is required between moment.js; numeral.js/numeric.js jstat and flot and I could not find a document on that
Hi Didier,
Thanks 🙂
moment.js is only required when you are using date related formula
ref: https://github.com/xsanisty/jquery-calx/blob/master/jquery-calx-2.2.4.js#L2560
numeral.js is only required if you want to format your number using data-format attribute, e.g 34948.94849383 become $ 34.948,95
jstat.js is only required when you are using statistical formula
ref: https://github.com/xsanisty/jquery-calx/blob/master/jquery-calx-2.2.4.js#L4632
flot.js is only required when you are using the
GRAPH
formularef: http://prototype.xsanisty.com/calx2/chart.html
it is ok to not include them all, just jquery, calx, and numeral, when specific formula that need jstat or moment library is executed, but you forgot to include them, calx will inform you that specified library is required
Hi Ikhsan, great work for calx =). I would like to ask if this support named variable for data-cell, for example
$(‘#calx_form’).calx();
thank you!
Hi Fred,
Thanks!
It currently doesn’t support direct cell variable, but you can define a variable that return cell value
$('#calx').calx(); //initialization //registering variable $('#calx').calx('registerVariable', { 'range_name' : function(){ //'this' variable will refer to the current sheet object return this.getCellRangeValue('A1', 'D10'); }, 'cell_name' : function(){ return this.getCell('E1').getValue(); } });but this trick currently has some limitation when autoCalculate is enabled, which the target cell’s value will not get updated when ‘E1’ and ‘A1:D10’ value is modified, so you need to call the calculate method manually
Good afternoon Ikhsan,
Everything has been going well until I had test against IE8 on XP (we have customers still running this; it’s my minium supported browser). IE8 is throwing the following error:
LOG: cell[#OrderTable!PKGQTY01] : Initializing the cell
Object doesn’t support this property or method jquery-calx-2.2.2.js, line 8443 character 5.
Here is the related markup.
I suspect this is related to IE8’s limited support for the data-* tag. Of course, I did take some liberties with the format of the calx data-* based on our last communication, but since my liberties worked across other browsers, I assume that they are within spec.
Note that I am dynamically replacing data-formula once the table is loaded and being used and using a few other API calls. I mention this in case dropping to 1.9 or light is called for.
Do you have any suggestions?
Hi Mike,
It seems that because IE lack of trim method in string object, try put this under the IE Hack section around line 23
I don’t have IE 8 for testing here, maybe there will be another error
Just push a hotfix 2.2.3, replace the string.trim with $.trim should works fine
Pulling 2.2.3 now. Will update you shortly.
That did the trick! Thank you for the quick fix. Enjoy your weekend.
Glad that resolved.
But it seems I will not be able to enjoy this weekend
iksahn,
I’d appreciate any help you might provide in determining why I am having the following problem implementing calx 2.2.2 (also tried with 2.2.0 sample).in my code. The samples ran fine (after i updated the src to refer to 2.2.2 and not 2.2.0; you may want to update).
FireBug is showing calx throwing the following error at line 9682, col 11 in jquery-calx-2.2.2.js under jquery 1.9.1 and 1.11.2.
TypeError: currentCell is undefined
oldVal = currentCell.getValue(),
I am initializing Calx in (document).ready using $(‘.Item01’).calx(); as it does not otherwise fire.
Here is the table markup.
Thank you.
Let’s give Crayon a chance.
Hi Mike,
first, the cell address should have ALPHA+NUMERIC format, like A1, AB2, ZZ56.
second, your selector
.Item01
will select entire input field, and calx will found nothing in this element since input element doesn’t have children, you should select the parent container instead,table.Item01
e.g
Thank you, ikhsan. Back to the drawing board.
All is working now, ikhsan. Thank you. The key was using alpha+numeric format. I had tried higher level selectors previously.
Since technically I was using alpha+numeric (e.g. PkgQty01), what is the template for naming cells and what are the ranges? Can I use 0n in the numeric or should there be no 0 padding? Do you match Excel 2007+ and max out at column XFD or Excel 2003 and max out at IV? Do you anticipate adding “named range” support?
Since numeral.js seems to be orphaned, will you be integrating support – optional or otherwise – for numbro or equivalent?
Thank you again, both for your reply and calx. If calx proves itself as expect it will, I will happily make a donation.
Best regards,
Mike
Glad to hear that,
I mean the alpha numeric should be in uppercase letter, the 0 padding maybe will cause some problem since calx parse the cell address based on alpha and numeric part, so it will be ambiguous when A1 and A01 present together.
Regarding to cell addressing, there is no known limitation as far as I know, you can use ZZZ105 if you need.
For named range support, you can utilize the
registerVariable
method, you can give name to cell or cell rangee.g
$('#calx').calx(); //initialization //registering variable $('#calx').calx('registerVariable', { 'range_name' : function(){ //'this' variable will refer to the current sheet object return this.getCellRangeValue('A1', 'D10'); }, 'cell_name' : function(){ return this.getCell('E1').getValue(); } });Here is the markup.
Hi, ikhsan. Please, help in this situation:
I have such code
and in js is:
so, #A4 depends from js. How can I force to do calculations on changing attribute ?
Hi Simon,
instead of setting the formula via data-formula attribute, you should change it via the cell api
btw, you can use “crayon” button to add some pretty formatted code.
regards
Ikhsan
Thank You very much! This solution is great.
May I ask You one more question?
If formula such like this
2*A6*1,05*((0,01+2*A4+A2*TAN(RADIANS(A5/2))+A3/TAN(RADIANS(A5)))*(0,01+A2+A3)+(0,01+2*A4+A2*TAN(RADIANS(A5/2))+A3/SIN(RADIANS(A5)))*(A1+0,06))
i catch error: Uncaught RangeError: Maximum call stack size exceeded at jquery-calx-2.2.1.js:8683
Maybe You khow any solution?
I solved this by myself. Thanks.
Great,
you can also read this if it works for you 🙂
http://www.xsanisty.com/handling-maximum-call-stack-size-exceeded-in-jquery-calx/
regards
Ikhsan
Hi Ikhsan,
Thank you for this plugin.
I have values stored in a database.
I am filling a form input fields with these values inside a while loop.
Can you please show me how to use it to calculate the form values coming from a database? I tried and tried but nothing worked.
My form looks like this:
On each row, Balance equals debit minus credit.
Debit and credit need to come from the DB.
Thank you,
Mohamed
Hi Mohamed,
You can just put the value inside value attribute of the input field, or just put it inside html tag, example below use the table tag
Regards,
Ikhsan
Hi Ikhsan and thank you for your answer.
Unfortunately I tried your advice but it is not working. I put the values inside the HTML tag but I don’t have the result.
Also, when I inspect the page with firebug the form is greyed.
When I am using a form to calculate, does it make a problem if I have other forms inside it?
Hi Ikhsan,
Can you please show me how to use your plugin with a PHP while loop?
Thank you,
Mohamed
How can we replace the value=”15.00″ with the total amount calculated using calx 2 formula.
This is for Paypal form so we can tell Paypal the total amount.
Usman,
you can use data-formula attribute, it will update the value as the formula is calculated
regards,
Ikhsan
I discovered that the form element also works with calx2 along with .
I assume that data-formula and data-format have no meaning when used with . Is that the case?
Hi Tone,
Yes, calx should works fine with all kind of form element, in you example, A3 display any value of A2.
but, since the A2 value is all ‘string’ text, when combined with data-format, it will not give the expected result, since data-format only works with number.
if you want a styling of text, you can use the setConditionalStyle method
Hi !
I’d like to launch calculation through a button but I face 2 issues : a button reload the page… so I try with a link and it reset the form instead of calculate.
Here’s my code :
Thanks a lot for your help !
Hi Valentin,
could I review the page? if it is a bug on calx, I will try to reproduce it locally and push some fix
regards
Ikhsan
Hello, I’m having an issue with calx 2 not working when im using php to create the form after the page is loaded.
The process i take is: Select something from dropdown menu which then using php, creates a form and populates textboxes from data on a database. However the calx script doesnt seem to do anything with that form. If i create an exact copy of what the form is and load it with the page it seems to work just fine. It’s only when i echo html using php that I have problems.
Do you have any idea what could be wrong? If it helps i could give you login info to see it first hand. Just email me.
Hi MikeG,
try to call
$('#form').calx('update')
or$('#form').calx('refresh')
as the ajax callback.anyway, you can send me email via contact form 🙂
regards
Ikhsan
i uploaded the new one and not working what am i doing wrong? please help.
what do i need to run on my web host?
http://www.newpane.mycalidesigns.com/sample/basic.html
please help i be more than happy to make a donation
Thanks,
the sample was built to be run on localhost and prototype.xsanisty.com only, uploading it to other domain will make the sample to stop working.
You can grab the release version here https://github.com/xsanisty/jquery-calx/releases and use the jquery-calx-2.0.4.min.js instead of jquery-calx.sample.js
Best Regards,
Ikhsan
i uploaded all the necessary files and nothing works?
Hi Cesar,
could you provide the link? maybe you are using the sample version of the calx, which mean to run only on localhost?
Best regards
Ikhsan
It seems that the scope of data-cell names (A1, A2, etc…) is limited to the containing sheet. I’m not sure this is true, but if so, then two sheets on the same webpage could both have cells named A1 and they will not interfere with each other.
Is this how it works?
I’m working on a dynamic page where the user can add additional sheets (containing one or more forms). Keeping track of cell namespace is a hassle. I’d rather just have unique sheet names and the internal cells have the same naming convention regardless of which sheet contains them.
Thus… a simple page might look like this (notice than there are 3 sheets, but the cells are the same in each sheet):
Hi Tone,
Yes, its right
each sheet has its own cells registry and will not interfere with the other sheet in the page, each cell address referred in the formula will refer to the cell in the same sheet, but you can still refer to the cells in other sheet by using #sheetid!A1 in the data formula
Regards
Ikhsan
Does the syntax #sheetid!A1 rely on a selector that must be a single ID, or can it be anyUniqueSelector!A1?
And if so, how does calx2 handle selectors containing a space?
Sorry… I can’t figure out how to insert code in comments. My bad.
yep, its rely on the id attribute of the sheet
to add code to the comment, just press the crayon button above the comment box
regards
Ikhsan
Is it possible to use data-cell in other elements that are not input?
May I use data-cell names that are not Excel cells? Ex: data-cell=”sales1″?
Hi Torimpo,
First, yes, you can use data-cell attribute in all kind of html element,
Second, basically, all cell should has A1-like cell address, but you can register variable which can point to this cell
and then you can use the variable in the data-formula
Ikhsan, thank you very much for your help.
I’ve been trying to migrate from calx 1.x to 2.x but I couldn’t.
Could you please tell me what is wrong with this statement?
$900
Thank in advance for your help.
Hi Torimpo,
seems some code is truncated, or the statement is ‘$900’ ?
To insert some code, maybe you can try the “crayon” button
regards
Ikhsan
Sorry, this is my example
Maybe you can use something like this
if it doesn’t work, then this will be considered as bug, and I will try to fix in next quick fix release
ikhsan, it didn’t work. It seems that you always need to add the data-formula.
It works if I use this
Obviously this doesn’t make sense.
What changed between 1.x and 2.x?
This would work without any problem if I use 1.x and use id instead of data-cell.
2.x is a complete rewrite, but I will release a hotfix for sure