How to trigger a calc element after autofill

[mauroghiglia]

Hi,

I have to make a calculation between two fields that are being updated by a autofill plugin.

I see that if I fill the fields manually, the calc element is triggered, otherwise if they are updated by autofill the calc is not executed.

I think the work could be done both by filling the last field with the result of a calculation already done by autofill (but I don't think it's possible) or by triggering calc element after autofill completes, but it seems to not work.

Any idea?

P.S.: Fabrik 3.1 on Joomla 3.2.3 - All updates done, even from GitHub

 

[hominid4]

Hi. I hope I don't lead you in the wrong path but I believe I had the similar situation. In my below form I needed the "Interior Page Count" dropdown to trigger all the calc elements in the form:
http://www.lithoninja.com/requests/comic-print

What I did was add the below fireEvent Javascript action (event: load) to my first calc element. {f_p_comic___int_count} is the placeholder for my "Interior Page Count".

var dd = $('f_p_comic___int_count');
var evnt = {target: dd, stop: $empty};
dd.fireEvent('change', evnt)

That's for a dropdown but I believe the technique may work the same for an autofill?

var af1 = $('autofill_field1_placeholder');
var evnt1 = {target: af1, stop: $empty};
af1.fireEvent('change', evnt1)
 
var af2 = $('autofill_field2_placeholder');
var evnt2 = {target: af2, stop: $empty};
af2.fireEvent('change', evnt2)

And I'm sorry, I'm not the best at writing code, I'm sure the above can be more compressed but hopefully it'll be something to push you in the right direction.

 

[mauroghiglia]

Hi ominid4,

thanks for the interest, I'm trying to find a solution based on your code, even if I'm not a Javascript specialist. It's strange Fabrik developers didn't write anything here: it's a major Fabrik issue that's preventing many developers from writing accounting apps, just because in such an app you always need to "transfer" data froma a products table to invoice lines and then make calculations on them.

I'll keep you up to date with this, thanks again.

 

[mauroghiglia]

Hi, let me try to explain my problem:

I have a dropdown element {orders___product} in a order line form, when I change the value of the dropdown the autofill plugin of the form puts the cost price of the product in the {orders___prod_cost} element.

A third calc element {orders___prod_list} shows a simple calculation: {orders___prod_cost}*2 (just to test). This happens when I load the form.

But, if I change the value of the dropdown element {orders___product}, {orders___prod_list} remains at the old value (is not triggered).

I tried doing what says ominid4, putting the following javascript code (on load) in the {orders___prod_list} element:

var af1 = $('orders___product');
var evnt1 = {target: af1, stop: $empty};
af1.fireEvent('change', evnt1);

The only result is that autofill is not working anymore and value of the calc field does not change.

Can anyone help me?

Thanks

 

[Bauer]

In the calc element settings are the last 3 options in the 'More' tab implemented?
Ajax calculation - Yes
Ajax observe fields - {orders___product},{orders___prod_cost} (not sure which one, or if both should be included)
Calc on load - Yes

 

[mauroghiglia]

Ok, thanks Bauer. Now the 'trigger" issue is resolved, but calcs are still not done. I begin to think there's a bug...

To better understand (if someone wants to help me), I've built a test page:

http://beta1.volver-amenities.com/test-calc

The last element (Result) is a calc that does (Cost*Markup). If you manually change the value of Cost, everything works fine.
Product is a databasejoin element which picks a product from a list and, via an autofill plugin, fills the Cost field with a value.
The Result calc element is triggered by Cost (obviously, being part of the calculation) and by any changes of Product (via Observe Field option).

If you try changing product, you can see Cost is filled and calculation is made (I mean you can see page is showing graphically it's doing something), but result in the Result element doesn't change.

Can anyone help me with an idea? Months of work are being stopped by this...

 

[cheesegrits]

When did you last update form github? I made a few changes in the autofill JS recently, which don't seem to be in your autofill.js, which adds firing the change event for everything the auotfill updates. That should kick off your calc.

As of this commit:

https://github.com/Fabrik/fabrik/commit/5b211ff32bdb8a386167b9ec7b8c7661aa788a29

NOTE of it still doesn't work after updating, it's possible there may be some lingering issues concerning which event we fire. Some elements need a 'blur', some need a 'change', depending on the markup / form input type they use. We added a getBlurEvent() method a while back, so we could handle that. But I think the calc element still assumes a 'change'. So if all the elements you autofill use 'blur', then it may not fire the calc (because the calc adds it's listener on 'change').

But in principle, that commit was done explicitly to fix this issue, where a form autofill wasn't triggering change events.

Let me know.

-- hugh

 

[cheesegrits]

It's strange Fabrik developers didn't write anything here:

Because there's only two of us. We are eaten up keeping up with paid support, and developing Fabrik. We'd love to provide Community level support, but we simply don't have the time, end of story.

-- hugh

 

[mauroghiglia]

Hi, thank you very much.

I tried to pay for support, I understand you... problem is that I live in a country where credit cards are secured and I don't succeed in using them with paypal, which seems to be your only payment method. I think I'll fix this issue soon.

 

[mauroghiglia]

Nothing to do...
I just updated from Fabrik-Joomla3.zip from GitHub but nothing seems to move....
Should I think to something like making calc via JavaScript?

 

[mauroghiglia]

I just made a test putting a simple JavaScript line:

alert($('test___auto').getValue());

If I put it in the Cost element (test___auto, on change), no popup is triggered, like element was not changed (manually it works)
If I put the line in dopdown element, popup shows 0 value (code is executed before autofill)

So, no way to do the job via JavaScript. One question: Autofill plugin is able to fill a field with a calculation, instead of a simple field value?

After that, I thought it was a problem of timing, so I tried with this code in the dropbox (on change):

$value=$('test___auto').getValue();
setTimeout(function(){alert("Cost is "+$value)},3000);

Nothing, it seems that, after autofill, value is shown on screen but is not really in the element... If you play with form, you see alert shows previous value of element. Maybe you need to refresh it after autofill.... Problem is that, even if in those 3 seconds I go to Cost element and give a <return> nothing changes...

 

[mauroghiglia]

Well, I go on testing...
Trying to resolve via JavaScript. Just put this test code:

setTimeout(function(){
  $cost=$('test___auto').getValue();
  $markup=$('test___manual').getValue();
  $price=$cost*$markup;
  var $priceName = $('test___price');
  $priceName.set('50');
  alert("Cost is "+$price);
},1000);

Now, with a little delay $price is getting and showing the value of Cost, but it's not updating test___price element. Am I missing something?

P.S.: sorry if I'm going away from the subiect, but I need to fix problem asap.

 

[Bauer]

I'm pretty confused with your use of $ in variable names. And I don't think set() is a function.
If I'm reading you correctly you're trying to set the value of price with cost x markup.

Using regular javascript try...
var cost = document.getElementById("test___auto").value;
var markup = document.getElementById("test___manual").value;
document.getElementById("test___price").value = cost * markup;

Or using jQuery...
$("#test___price").val( $("#test___auto").val() * $("#test_manual").val() );

 

[mauroghiglia]

Hi, thanks for the answer.

Yes, I used $ just to remember they are strings...

Now form works with this code:

setTimeout(function(){
  var cost = $('test___auto').value;
  var markup=$('test___manual').value;
  var price = $('test___price');
  price = cost*markup;
  $('test___price').value = price;
},500);

Timing is necessary: without timing, form shows always the previous values. I really don't know which event should I wait for, I don't like this timing...

As for set() function, I found it on this wiki page:
http://fabrikar.com/forums/index.php?wiki/element-javascript-advanced/
that says:

// Update the value
name.update('new value');
 
// or since June 2013
name.set('new value')

However, as I wrote at the beginning of this post, it would be better if I could activate a calc element after an autofill...

 

[jcscheiffer]

Hello, this is the answer... put this code in the button element that fire the event change in the element os___n_da_nota:

document.getElementById('os___n_da_nota').value=12345;
var $test = $('os___n_da_nota');
$test.value = 123;
$test.fireEvent('change');

For more explanations, in examples...
http://fabrikar.com/forums/index.php?wiki/element-javascript/