AEM Forms template jquery error on radio button click

[daleschimpf]

Hi:

Hoping someone can shed some light on why I'm getting a javascript error when I click on a radio button on my xfa based AEM Forms template. The knock on effect is that the radio button is not being shown as selected. Through some javascript debugging I've been able to determine that what appears to be happening is that the radio button is being checked and then immediately unckecked.

Here are some details on the javascript error:

location: /etc/clientlibs/fd/af/guideRuntimeWithXFA.js

error on line 35332: this.commitValue(jqwidgettochange.option("value"));

error: TypeError: jqwidgettochange is undefined

Here's some back story to put some context around this:

• adaptive form demo being built on AEM6 SP1, AEM Forms SP1, AEM Forms FP1
• XFA based adaptive form
• form template located at /apps/geometrixx-gov/components/page/tabbed-enrollment-page copied into a new project
• I've created 2 virtually identical form demo's so far, both based on the same XFA form (although uploaded in 2 different areas of the repository)
• Demo 1 was created within the Geomettrix web site and was my initial attempt at the demo
• Demo 2 was created on a new AEM site I created which is based on a copy of the potential client's actual web site which I imported into AEM using the AEM Site Importer tool
• both demos are created using the same above mentioned AEM Forms template, although demo 2 is of course using the copied instance of the form template
• radio buttons on demo 1 work fine
• I know that the state of the radio buttons is being captured in demo2 because when I render the XFA (PDF) form for the Echosign piece, all the radio button selections are shown correctly

At a high level you may of course say that I made some sort of error when copying the template. That may be true but I am quite new to AEM and have followed the relatively simple training I have received to date to the best of my current capabilities. The understanding I have been given from training is you often start projects by copying and pasting nodes in the repository and then modifying them as needed, which I have done. 99.9% of the form template is working in both demos. As you can see the error is pretty deep in some javascript code so it's a bit beyond me right now to try and troubleshoot this too much more.

Hope someone can help. Thanks in advance.

Dale

[varundua]

Hi Dale,

Thanks for providing the information, it will be difficult to debug this issue without reproducing the issue that you are facing . Will it be possible for you to tell the steps that might help us reproduce the issue at our end ?

Apart from that I would like to know few extra things from you

1. Whether you have written any scripts on the change event of radiobutton in xfa ?

2. Whether there is any difference in the properties of radio button in demo1 and radio button in demo2 ? Mainly, Bind Reference property in the script tab of the edit dialog or default value.

3. Is the client's website using jQuery ? If yes what is the version ? 

[daleschimpf]

Hi:

Steps to reproduce. Yes, that could be difficult. I assume you mean how did I come to be in this situation as opposed to me just saying well, just click on the radio button and look, it doesn't highlight :-)

Here is the general progression I followed:

1. developed the xfa based adaptive form inside the Geometrixx-gov website, just as a sort of first step.

2. created a new client branded website using the Site Importer tool.

3. I copied the template my adaptive form was based on and got it working inside my new website.

4. I actually managed to copy the adaptive form I first created in the Geometrixx-gov website to my new website. I then repointed the template the adaptive form was based on to the template I copied into my new website.

Re your questions:

1. No scripts are attached to the radio buttons in the XFA form.

2. No, as mentioned, I was able to literally copy the adaptive form from one website to the other and reconfigure the underlying form template it was based on. The Bind Reference property is populated for each radio button as I have the XFA form bound to a schema.

3. Yes, it looks like it was/is using jquery. Appears to be version 2.0.3.

Dale

[daleschimpf]

Hi:

Further to my previous reply, your question about whether the website I imported used jquery got me thinking about a possible version conflict. I commented out the reference to the website's instance of jquery and the radio button's are now working as expected. For the purposes of this demo I think I can get away without the page needing it's jquery reference.

Thanks for asking the right questions!

Dale

[varundua · Accepted solution]

Hi Dale,

Yes it is a known issue, adding jQuery in Templates brings in some weird problems. And FYI, we bundle jQuery 1.8.0 in our Adaptive Form.

Regards

Varun Dua