Field dependencies not working correctly v4.31.0

Danyaal

Vote:

I have a text field set up which has a dependency of Shown on all if a selection field above is set to option 2 which doesn't render if i go and select option 2. If i go into the CMS and set option 2 to be enabled by default i can see the text field shown but selecting another option doesn't hide the text area. This is most likely a javascript issue but i can't figure out what needs to be done to make sure opti forms javascript is loaded.

Current Steps done

@Html.RequiredClientResources("Header") set in <head> _Layout.cshtml
@Html.RequiredClientResources("Footer") set at the end of _Layout.cshtml
Not sure how to validate that javascript is enabled within opti forms but looking at the documentation it should be enabled if workInNonJSMode=false is set which in my Forms.config it is set.
No console errors related to episerver or forms show in the console.

I have a FormsContainerBlock which i import opti forms using this snippet.

Using Episerver 11 with v4.31.0 Optimizely.Forms

#323561

Jun 14, 2024 11:31

Paul Gruffydd

Vote:

Hi,

There are a few things you can check. I'd start by loading up the page with the form in your browser and taking a look in dev tools. First, check which JavaScript files have been loaded with the page. You should see successful requests for "GetFormInitScript" and a couple of "WebResources.axd" requests. The first of the "WebResources.axd" requests will contain jQuery (unless you've configured forms to use your own version) and the second will contain the forms JavaScript. Assuming all's well there, in the JavaScript console in dev tools, try entering epi.EPiServer.Forms.__Initialized. This should return true if your form has been successfully initialised.

If you've created your own form container, I'd also check that you've set the ID on the form element to have the value of Model.Form.FormGuid. I think you may also need to include a data attribute of data-f-type="form" and possibly a css class of "EPiServerForms" on your form element too as those all seem to be used in the forms JS.

#323681

Jun 17, 2024 10:11

Danyaal

Vote:

Thank you for the response i've checked and can see that GetFormInitScript, WebResources.axd and epi.EpiServer.Forms.__Initialized is true. I updated optimizely forms to the latest version supported by CMS 11 and i'm not getting this error and downgrading to the previous version shows the same error message.

Uncaught SyntaxError: Unexpected token '<' (at GetFormInitScript?formGuid=500b40ac-e991-43ce-a9cc-512059474d74&formLanguage=en:2:1)

a few console logs below this is another error message. I have seen that this error message can be caused by adding or removing the async keyword from the episerver script. In my case their was no async attribute but adding or removing it does not fix this error. In terms of the order of WebResource.axd requests i can see that my network tab is requesting the files in the incorrect order that you stated. The first resource being loaded is the EpiserverForms CSS and afterwards webResources for Jquery followed by EpiServerForms are requested. I do have injectFormOwnJQuery set to true setting this to false and running still shows the same errors and resources are loaded in the same order with the exception of Jquery not being loaded.

Uncaught TypeError: Cannot set properties of undefined (setting '$workingForm')

This is the response from GetFormInitScript

#323899

Edited, Jun 21, 2024 10:33