Fabrik4 Epsilon - location of form_1.js file

[ontarget]

Hi,
I upgraded a joomla3 site to joomla4 / Fabrik4
In Joomla3 I had the following:
/components/com_fabrik/js/form_1.js

I noticed in Joomla 4 the js directory was missing.
Is there another location for loading js code in Fabrik 4?
Thanks

 

[achartier]

Don't think anything has changed. Create the js folder and place your form_1.js into it.

 

[achartier]

Did the file exist in this location prior to the F4 upgrade? The Upgrade should not cause these files to be deleted, if it is we need to fix it.

 

[troester]

Maybe we should add one (with an index.html as in F3).

@ontarget
You say you upgraded an existing site with existing /components/com_fabrik/js/form_1.js

Was this directory + file(s) deleted during the upgrade?

 

[ontarget]

Yes when i upgraded the js directory was completely gone.
I thought it was strange as my js function calls were saying undefined e.g
tutorParticipant(this);
I manually recreated the js directory, then uploaded my form_1.js file
My validations don't seem to work however in j4 and i get the "Validating" spinny icon.
YES / NO greaterthan 0 validation
Participant in the DD (inline JS) tutorParticipant(this);
See screen shot

 

[troester]

I just tested and I can't replicate.

My folder /components/com_fabrik/js/ wasn't touched while installing Epsilon.

For the ajax validation not working:
Set "Allow Fabrik debug" to debug JS in Fabrik Options/Debugging to get meaningful line numbers.
Disable J! System debug (if you have it on), it may break JSON responses.
Check your custom JS code if it's J!4/F4 compatible

 

[ontarget]

Thanks for the reply
I turned on Debug JS

danger
An error has occurred with a eval'd field - please inform the web-site owner. Debug: Eval exception : paid_status (id 370)::_getV() : $rowid = ''; $db = JFactory::getDbo(); $queryPaid = $db->getQuery(true); $queryPaid ->select('paid') ->from('aaa_participant_claim') ->where('id = ' . $db->quote($rowid)); $db->setQuery($queryPaid); $paid = $db->loadResult(); //approved = 2 $queryApproved = $db->getQuery(true); $queryApproved ->select('approve_claim') ->from('aaa_participant_claim') ->where('id = ' . $db->quote($rowid)); $db->setQuery($queryApproved); $approved = $db->loadResult(); if ($paid == 1 or $approved == 2) { return 1; } else{ return 0; } : Joomla\CMS\Factory::getDbo() is deprecated. Load the database from the dependency injection container.
An error has occurred with a eval'd field - please inform the web-site owner. Debug: Eval exception : school_details (id 208)::_getV() : $id = ''; //added this if else to allow NCSE ETB schools to claim $category = 'Arts in Education'; if ($id[0] == 7 && $category != 'NCSE') { echo "Sorry this is an ETB School Roll Number. You cannot claim using this system"; return false; } else { $db = JFactory::getDbo(); $query = $db->getQuery(true); $query //->select(array('schoolName', 'address1', 'address2', 'county' ,'eircode')) ->select(array('schoolName', 'address2', 'county' ,'eircode')) ->from('aaa_schools') ->where('schoolRoll = ' . $db->quote($id)); $db->setQuery($query); $rows = $db->loadObjectList(); $list = array(); foreach ($rows as $row) { $list[] = "

• School: " . $row->schoolName . "

" . "

• Address: " . $row->address2 . "

" ."

• County: " . $row->county . "

" . "

• Eircode: " . $row->eircode . "

"; } return "

• 
  " . implode($list) . "

"; } //see http://fabrikar.com/forums/index.php?threads/solved-calc-element-to-return-multiple-results.41128/ : Joomla\CMS\Factory::getDbo() is deprecated. Load the database from the dependency injection container.
An error has occurred with a eval'd field - please inform the web-site owner. Debug: Eval exception : school_eircode (id 210)::_getV() : $homeec = ''; $id = ''; if ($id == "No School"){ return $homeec; } else { $db = JFactory::getDbo(); $query = $db->getQuery(true); $query ->select('eircode') ->from('aaa_schools') ->where('schoolRoll = ' . $db->quote($id)); $db->setQuery($query); return $db->loadResult(); } //This is a fall back for School Eircodes that dont work //else { //$db = JFactory::getDbo(); //$query = $db->getQuery(true); //$query // ->select(array('address2', 'county','eircode')) // ->from('aaa_schools') // ->where('schoolRoll = ' . $db->quote($id)); //$db->setQuery($query); //$rows = $db->loadObjectList(); //$list = array(); //foreach ($rows as $row) //{ // $list[] = "" . $row->address2 ."+" . $row->county . "+" . $row->eircode . "" ; //} //return "" . implode($list) . ""; //} ////////This shows county + eircode only //else { //$db = JFactory::getDbo(); //$query = $db->getQuery(true); //$query // ->select(array('county','eircode')) // ->from('aaa_schools') //->where('schoolRoll = ' . $db->quote($id)); //$db->setQuery($query); //$rows = $db->loadObjectList(); //$list = array(); //foreach ($rows as $row) //{ // $list[] = "" . $row->county . "+" . $row->eircode . "" ; //} //return "" . implode($list) . ""; //} : Joomla\CMS\Factory::getDbo() is deprecated. Load the database from the dependency injection container.

Also see screenshot for console errors - for some reason its not picking up the value of tutorParticipant element
form_1.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'form')
at tutorParticipant (form_1.js:19:33)

Here is my form_1.js file: https://joomla4.edcentretravelclaim.ie/components/com_fabrik/js/form_1.js
Any help with getting these errors sorted would be really appreciated

 

[troester]

Did you change your .hide() code flowing the other thread?

 

[ontarget]

Hi yes i converted all items to jquery:
https://joomla4.edcentretravelclaim.ie/components/com_fabrik/js/form_1.js
Unfortunately its still not validating
The error is different however:

Fabrik form::addElementFX: Element "aaa_participant_claim___adjust_claim" does not exist.
form.js:3 Uncaught TypeError: Cannot read properties of null (reading 'addAjaxValidation')
at Object.watchValidation (form.js:3:15425)
at s.extend.$owner (mootools-core.js:3:17367)
at index.php?option=com_fabrik&view=form&formid=1&aaa_participant_claim___uniqueclaim_id=963-04-10-23-sT8FY&aaa_participant_claim___category=Arts+in+Education&aaa_participant_claim___course_title=ICT+Fis+Course&aaa_participant_claim___course_code=PHP8&aaa_participant_claim___applysess=%7B___apply_sess%7D&aaa_participant_claim___allow_overnight=0&aaa_participant_claim___venue=Athlone+Education+Centre&aaa_participant_claim___course_start_date=2023-10-05+00%3A00%3A00&aaa_participant_claim___course_hours=2&aaa_participant_claim___tutor_preparation_hours=2&aaa_participant_claim___course_during_school=1&aaa_participant_claim___claim_process=info%40ontargetwebdesign.net&aaa_participant_claim___edcentre_id=963&aaa_participant_claim___edcentre_process=Administrator&aaa_participant_claim___venue_ec=N37+H043:2360:9
at Object.execCb (<anonymous>:29:311)
at $.check (<anonymous>:18:423)
at $.<anonymous> (<anonymous>:23:9)
at <anonymous>:8:102
at <anonymous>:23:369
at v (<anonymous>:7:173)
at $.emit (<anonymous>:23:340)

and

Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at Object._completeValidaton (form.js:3:16729)
at s.extend.$owner (mootools-core.js:3:17367)
at Object.<anonymous> (form.js:3:16615)
at Object.<anonymous> (mootools-core.js:3:18507)
at Array.forEach (<anonymous>)
at Function.forEach (mootools-core.js:3:2508)
at Array.each (mootools-core.js:3:4427)
at Object.fireEvent (mootools-core.js:3:18468)
at s.extend.$owner (mootools-core.js:3:17367)

Here is a link to the form I am trying to fill

 

[troester]

Obviously you don't have "Debug JS" enabled.
Try with Ajax validation off, disable your validations one by one etc.

 

[ontarget]

Thanks
Debug JS is on - i turned it off as it only seemed to show deprecated stuff related to calc elements.
I disabled Form > Form Processing >Ajax Validation
all validations in the first form group are off - it still loads a validating icon.
I wonder is the issue related to the tool tips as there is a load of mootools errors?

 

[troester]

If you get deprecated messages lower your J! error reporting level.

Such messages will break JSON responses, i.e. any ajax validation or validation on multipage forms, list ajax updates, popup forms etc.

 

[ontarget]

Thanks for the update however my J! Errors have been set to none throughout. The deprecated error was only showing when fabrik Debug JS was turned on.
The Next button in the form is trying to validate something even though I have turned off all validations in the first group of elements.

 

[troester]

Network response is showing

So enable J! system debug and check the network response in your browser, it should show the error stack.
The console also says ..._adjust_claim does not exist. Is this element published, accessible...

 

[ontarget]

Thanks i turned on error reporting to maximum.
I can see the following errors

Deprecated: DateTime::__construct(): Passing null to parameter #1 ($datetime) of type string is deprecated in /home/esc1/joomla4.edcentretravelclaim.ie/libraries/src/Date/Date.php on line 126
Deprecated: mb_strtolower(): Passing null to parameter #1 ($string) of type string is deprecated in /home/esc1/joomla4.edcentretravelclaim.ie/libraries/vendor/joomla/string/src/phputf8/mbstring/core.php on line 114

utils.js:13 Fabrik form::addElementFX: Element "aaa_participant_claim___adjust_claim" does not exist. -
This element is definitely published but the access level is registered (as it should be)
I changed it to public for now to see if it makes a difference.

I used the cassiopea template in case yootheme was causing a conflict.
The console now shows

jquery.js?3.6.3:10219 POST https://joomla4.edcentretravelclaim...&format=raw&task=form.ajax_validate&form_id=1 500 (Internal Server Error)
send @ jquery.js?3.6.3:10219
ajax @ jquery.js?3.6.3:9800
_doPageNav @ form.js:716
e.extend.$owner @ mootools-core.js:787
(anonymous) @ form.js:670
dispatch @ jquery.js?3.6.3:5494
elemData.handle @ jquery.js?3.6.3:5298

I have to go out for a couple of hours so I will leave the errors on max. I will be trying to resolve these issues today. Thank you for your support

 

[troester]

To get rid of the "dbo ...deprecated" messages change your $db = JFactory::getDbo();
https://github.com/trobfab/fabrik/wiki/Upgrading-from-fabrik3.10-to-fabrik4#code-examples

For testing I would in a first step use the form without pagebreaks.
And set J! error reporting level not to max.

Testing with JS and ajax is often a back and forth with J! system debug off and on: On may show you errors in the network response but this will break JSON etc.