Javascript in Elements

E

entropic

New Member
I am using Fabrik to create an app that will display 8 categories of indicators that are grouped by zip code, school district and city. Everything is working great but I am lost on two (most likely simple) issues. The first being how to utilize javascript in an element to display a calculation of other elements in the same table. I am wanting raw data to populate as a percentage. Is this done by creating an element with the appropriate javascript attached?

The second question: We have multiple years of data and need to be able to manipulate the data from each year(using the Forms) which for 1 year we have down no problem. How do we configure the application to allow for the same access to tables year over year? I am very unfamiliar with the packages aspect and wanted to see if this is where I need to set this up, or if I am completely in the wrong place...where I do go to get something like that set up.

And thanks again for creating such a great component!
 
1) Depends whether you want to display the percentage data live on the form (so when you change one of the source values on the page, the percentage value recalculates and redisplays), or if you simply want calculate it after the form is submitted so you can just store it with the rest of the table data.

2) Not sure what you mean. Do you mean something like, you have a date column in the table data, and you want to be able to filter on different years? Or that you don't have a date colum, and want to know how to create one and filter on it? You could add a hidden date element, with the 'default to current date' set to Yes, and both formats set to "Y" so it only records and displays the year, and set up a filter based on that.

-- hugh
 
Fabrik 2.0...
Part 1 - I would probably say have it calculate when form is submitted so it is stored and less overhead for server. But if its easier the other way, that would be great too!

Part 2 - I like the hidden field idea alot. That would definitely work. Let me give you a better idea of what we are working with. Can I send you a pdf of our data structure?
 
Data Structure

entropic said:
Fabrik 2.0...
Part 1 - I would probably say have it calculate when form is submitted so it is stored and less overhead for server. But if its easier the other way, that would be great too!

Part 2 - I like the hidden field idea alot. That would definitely work. Let me give you a better idea of what we are working with. Can I send you a pdf of our data structure?
Click to expand...

See attached for data structure...
 

Attachments

  • data_structure.pdf
    18.1 KB · Views: 405
1) JavaScritp would probably be slightly more work, but IMHO "better", as you get to see dynamic feedback when filling out the form. Do you have an example of one of these calculations, expressed in terms of the existing elements on the form, like ...

foo_percentage = ((some_element + some_other_element) / yet_another_element) * 100

... or whatever. I could then give you an example of how to write the JS.

2) OK, well just go ahead and create that hidden date field as described. You can then create a table pre-filter to show only "this year".

Actually, as this is 2.0, you'll have to wait till Rob commits the latest batch of changes to SVN before you can filter on the year, as it needs the 'subquery' option to pre-filters, which he added over the weekend. It's a feature we recently added to 1.x, but hadn't migrated it to 2.0 until just now.

But you can go ahead and add the new date element, so you start collecting the date info on new submissions. And thinking about it, no need to dumb it down to just a year, you can use a standard Y-m-d format (or whatever). The pre-filter query will handle extracting the year from that.

Bump this thread in a couple of days, and I'll let you know if we've commited those changes yet, and let you know how to create the pre-filter query.

-- hugh
 
cheesegrits said:
1) JavaScritp would probably be slightly more work, but IMHO "better", as you get to see dynamic feedback when filling out the form. Do you have an example of one of these calculations, expressed in terms of the existing elements on the form, like ...

foo_percentage = ((some_element + some_other_element) / yet_another_element) * 100

... or whatever. I could then give you an example of how to write the JS.

2) OK, well just go ahead and create that hidden date field as described. You can then create a table pre-filter to show only "this year".

Actually, as this is 2.0, you'll have to wait till Rob commits the latest batch of changes to SVN before you can filter on the year, as it needs the 'subquery' option to pre-filters, which he added over the weekend. It's a feature we recently added to 1.x, but hadn't migrated it to 2.0 until just now.

But you can go ahead and add the new date element, so you start collecting the date info on new submissions. And thinking about it, no need to dumb it down to just a year, you can use a standard Y-m-d format (or whatever). The pre-filter query will handle extracting the year from that.

Bump this thread in a couple of days, and I'll let you know if we've commited those changes yet, and let you know how to create the pre-filter query.

-- hugh
Click to expand...

Sounds great. That is a huge help. Will keep an eye on the SVN. Here is a sample calculation I need help creating with Javascript:

(tanf_under_18/total_under_18) x 100 = newly created percentage
 
OK ...

1) Create a 'read only' element called tanf_percent. The Read Only checkbox is bottom left of the Element page.

2) Create yourself a simple text file called X.js, where X is the numeric ID of your form (should be shown on the main list of forms in the Fabrik backend).

3) In the text file, put this, replacing table_name with your table name:

Code: 
function updateTanfPercent() {
    $('table_name___tanf_percent').value = ($('table_name___tanf_under_18').value / $('table_name___total_under_18')) / 100;
}

4) Upload the file to your components/com_fabrik/js folder.

5) In BOTH the tanf_under_18 and total_under_18 elements, add a JavaScript entry, using the 'onchange' event, and put this in both:

Code: 
updateTanfPercent();

6) Test it ... let me know if it works.

We should probably add a test to make sure total_under_18 is not 0 before dividing by it, but that's a tweak we can make when you get it going.

Once you have this working, you can add a updateFoo function to your X.js file using the same techniques, for any Foo's you need to calculate.

-- hugh
 
Hugh

Finally was able to test out the instructions. Data is not showing up so something is amiss. One question is the form ID number. I see a string on the end of the url with CID - is that the ID number? I can't find the ID number in the main list of forms. Also how does Fabrik know where the javascript is? Followed your instructions to the letter but the field for the percent still appears blank. Any ideas?
 
The ID is the number between the checkbox and the form Title, on the left of the main list of forms on the Form tab.

Fabrik knows where the form JS file is because whenever it loads a form, it looks in your ./js folder for a file with that forms ID as the name. So if it is loading form ID 12, it looks for a 12.js. Once that file is loaded, functions defined in it are then available for use from your individual element action scripts.

I did notice one booboo in the function I gave you, so try this:

Code: 
function updateTanfPercent() {
         $('table_name___tanf_percent').value = ($('table_name___tanf_under_18').getValue() / $('table_name___total_under_18').getValue()) / 100;
}

-- hugh
 
No dice...the percent field is still blank. What type of element is the 'percent'? I have it as a text field and read only. Is that correct?
 
Yes, that should do it.

I noticed I have the calculationw rong - should be "* 100" not "/ 100".

Can you point me at the page?

-- hugh
 
I'll need a login, as I'm only seeing the read only view (and obviously can't trigger an 'onchange' in read only). Might as well PM me a backend login, so I can make changes as well. Remember to include a link back to this thread in your PM.

-- hugh
 
Copy and paste this into the function:
Code: 
$('jos_fb_foodstamps___percent_stamps').value = ($('jos_fb_foodstamps___raw_stamps').getValue() / $('jos_fb_foodstamps___total_pop').getValue()) * 100;

The version you were using has getvalue() instead of getValue(), and JS function names are case sensitive. You were also missing the *.

We'll prolly need to round that down to 2 decimal places, but lets get it going first.

-- hugh
 
Uploaded the new script...my bad about the asterisk. I am still not getting anything through the percent field though.
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 84 (members: 1, guests: 83)
    Back
    Top