No Element Javascript on Page

A

achartier

Administrator
Staff member
I seem to be having some strange behaviors with my J3.2 and Fabrik 3.1RC2 upgrade. Note my issue in another post about the JSON error. Now I seem to be missing all my element javascript.

I upgraded J to 3.2, Installed Fabrik 3.1RC2, updated from Github, went through and opened and saved each element that had JavaScript actions. Using the default Protostar template when I display a form none of the element javascript is rendered. When I display the page source in my J2.5 site and compare against the same page under J3 and Fabrik 3.1RC2 I see all the javascript in J2.5 but none in the J3.

Also, when I display the J3 page in firebug I get the following console error: TypeError: this.form is null.

This site is another VM different than the one referenced in the JSON error as I wanted to preserve the condition of the original VM for Rob/Hugh to look at. Once the JSON error is resolved I can set this one up for remote access if required. In the mean time if there are any ideas/suggestions prior to that I will be happy to try them. Thanks.
 
No, just the Typerror. When I get the routing fixed for the JSON error you can access the page at the dnsalias domain
/joomla/index.php?option=com_fabrik&view=form&formid=4
 
Also, you can see the J2.5 version at the FIM production site (in mysites) using the same URL as posted above (drop the joomla prefix in the URL)
 
In the J3 site, where the JS isn't loading (with the old 'bluesky' form template), if I switch to Protostar then the form/element JS loads. So whatever is preventing our JS from loading in the old Fabrik templates is related to that Joostrap template.

However, you really can't use those old templates in J3 / Fabrik 2.x. So ... if I switch the form to use our new 'bootstrap' template, with Protostar, it looks and works fine.

If I switch back to the Joostrap J! template, then the formatting of our bootstrap gets messed up. I'm asuming because Joostrap is overriding J!'s bootstrap CSS.

Anyway ... whichever way you cut it, the issue(s) are with the Joostrap template and it's bootstrap CS/JS.

-- hugh
 
Per further discussion with Hugh on Skype, correcting the template has enabled the JS to be included on the page but some of it is not working. I have JS on some yes/no elements that show/hide other elements on the same form. These JS actions are not firing. An example on the form is the alergy element which hides a textbox when NO and shows it when YES. The textbox is to insert allergy information.

Hugh had started to investigate but was interrupted.
 
Update, per comment from Hugh, the onload events are firing when the page is loaded but the change events are not. I confirmed this by changing the default for the alergy element to Yes and the textbox now shows on load (it was hidden on load when the default was NO), but changing the yes/no does not show/hide the textbox.
 
achartier said:
Hugh had started to investigate but was interrupted.
Click to expand...

Well, not really "interrupted", as we were discussing and working on this stuff after business hours on Fri, and over the weekend. It's now Monday, I've just started my working day, and I'll be picking this up again later in the day.

-- hugh
 
Didn't mean anything by it, just noting for anyone else reading that the troubleshooting was temporarily suspended and would pick up later. Your help is greatly appreciated.
 
I'm just feeling guilty. :)

Looks like this is a Bootstrap vs Mootools issue. We are using event delegation to attach the change event to the individual sub-selements (radio buttons), but because Bootstrap hides the "real" radio butons and replaces them with the pretty green and red boxes ... the events aren't getting attached, because apparently Mootools won't bind a delegated event to a DOM element which is hidden.

Working on it.

-- hugh
 
Well, I guess the event is getting bound to the radio, but the change event on the radio button isn't firing, because it's hidden, and apparent Bootstrap doesn't fire it when it gets the click for the icon that replaces it.

-- hugh
 
OK, can you change that Yes/No element to a radio button? Labels Yes and No, values 1 and 0.

That should work, while we work out how to get the events firing with the Bootstrap thingies.

-- hugh
 
Ah hah. Seems that this is actually a Protostar template issue, not a Bootstrap one. It's the Protostar CSS which hides the radio buttons, rather than offsetting them out of the viewport.

And it looks like 'click' events will still work. So try using the YesNo element, but trigger on 'click' rather than 'change'.

-- hugh
 
I can confirm that changing the event to a click event instead of a change event does work. Thanks for your assistance on this.

I am not tied to Protostar, is there another template (hopefully free) that you or Rob would recommend as working well with Fabrik?
 
We haven't yet found a template which doesn't have some issues. The whole move of J! to Bootstrap is still in flux, with J! running an older version than the rest of the world, newer templates overriding the J! Boostrap libraries, etc. Hopefully in another release or two of J! everything will settle down a bit, but for now, it's all a bit of a moving goalpost.

If you aren't fussy, I'd say stick with Protostar, as at least it's a known quantity, and it's what Rob and I use to develop against.

-- hugh
 
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

    No members online now.
    Total: 146 (members: 1, guests: 145)
    Back
    Top