1

In addition to the question "Forms with conditional logic don't work" we encountered a problem.

Moving the form's scripts into the header solves the problem of conditional logic only for the first page.

Our form contains two form pages. The second page contains also some conditional logic.

If we submit page1 to page2, the function

$formEl.init_fxbConditions

is no longer available.

The reason is, the SXA destroys the window object for the use of forms.

The left part shows the window object at the

if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {
}

javascript breakpoint for the first page. The right part shows the window object at the same breakpoint for the second page.

enter image description here

Does anyone have a solution for this problem? It's Sitecore 9.2 with SXA 1.9

Thanks a lot

Uwe

  • 1
    Are you sure its SXA? Have you tried this on a clean 9.2 instance without SXA? – Richard Seal Mar 23 at 13:17
  • No I'm not, but it works in 9.1 without SXA – uwe e Mar 23 at 13:33
  • I'd be surprised if this is SXA specific. You should try this on 9.2 and make sure. – Richard Seal Mar 23 at 15:02
  • Might be a jquery.noConflict() problem. We moved all form scripts to the head element. Forms has its own jQuery version 2.1.3. and extends this jQuery version with the conditional logic within the form.conditions.js. Than the SXA overrides the jQuery version to 3.3.1.This removes all jQuery extensions that foms has created. Tomorrow I would like to try to map the forms jQuery to specific variable, as described in "api.jquery.com/jquery.noconflict". – uwe e Mar 23 at 17:50
1

We solved the problem. As expected, it's a jQuery conflict.

Here're the steps for to solve the conflict.

We mapped the jQuery used by "Sitecore Forms" into a specific version. For this we created the file jquery.noconflict.js which contains only this single line of code.

$jq213 = jQuery.noConflict();

We placed the file source to the 2nd position, directly after the jquery-2.1.3.min.js source reference, as described in Forms with conditional logic don't work

<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery-2.1.3.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.noconflict.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.validate.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.tracking.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.conditions.js"></script>

Then we changed the document.ready event within following js sources

  • form.validate.js
  • form.tracking.js
  • form.conditions.js

from

$(document).ready((function($jq)...)(jQuery));

to our mapping

$jq213(document).ready((function($jq)...)(jQuery));

Now much of work was done. But we raised a new jQuery exception. enter image description here

The form contained a data attribute with wrong jQuery mappings

data-ajax-success="$.validator.unobtrusive.parse('#fxb_4ed74ed4-f922-49ef-aa93-fff69c187d32_b9973387-fa7c-47c9-b1a0-dbe1c2e89e08');$.fxbFormTracker.parse('#fxb_4ed74ed4-f922-49ef-aa93-fff69c187d32_b9973387-fa7c-47c9-b1a0-dbe1c2e89e08');"

These AjaxOptions will be created with the

Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions

processor in the forms.renderForm pipeline. For adjusting of these assignments, we copied the code into our own InitializeAjaxOptions processor and changed the mapping as follows.

this will be changed

ajaxOptions.OnSuccess = FormattableString.Invariant($"$.validator.unobtrusive.parse('#{args.FormHtmlId}');$.fxbFormTracker.parse('#{args.FormHtmlId}');");

into that

ajaxOptions.OnSuccess = FormattableString.Invariant($"{_jQueryMapping}.validator.unobtrusive.parse('#{args.FormHtmlId}');{_jQueryMapping}.fxbFormTracker.parse('#{args.FormHtmlId}');");

_jQueryMapping is the variable for "$jq213"

We registered the processor as follows

<pipelines>
  <forms.renderForm>
    <processor type="MCH.Feature.Forms.Pipelines.RenderForm.InitializeAjaxOptions, MCH.Feature.Forms" patch:instead="*[@type='Sitecore.ExperienceForms.Mvc.Pipelines.RenderForm.InitializeAjaxOptions, Sitecore.ExperienceForms.Mvc']" resolve="true"/>
  </forms.renderForm>
</pipelines>

After that, all forms conditions in all form pages worked without any errors. Unfortunately, the form designer has now stopped working correctly.

The reason was a missing jQuery.noConflict mapping in the form designer. Because of we don't need the condition script, we switched it off.

For that, we created a sitecorehelper extension similar to How to check if page mode is Experience Forms. With this test we use the inline script only if we need it.

if (!Html.Sitecore().IsExperienceForms())
{
  <script type="text/javascript">
    (function ($) {

      var $formEl = $("form[data-sc-fxb='@Model.ItemId']");
      if ($formEl.length && typeof $formEl.init_fxbConditions === 'function') {
        var options = @Html.RenderConditions(Model);
        $formEl.init_fxbConditions(options);
      }
    })($jq213);
  </script>
}

For the moment, everything seems to be working fine!

Addendum

Sitecore could reproduce that described behaviour and registered it as a bug with the reference number 331041.

This is sitecore's workaround

To work around the issue, could you please add the line from the attached “Script.txt” file to the “\Views\SxaLayout\SxaLayout.cshtml” file below the following lines?

@foreach (string script in assetLinks.Scripts)
{
    @Html.Raw(script)
}
<!-- /#wrapper -->

Then clear the browser cache or try to use the new incognito window to make sure that the solution is applied correctly.

This is the content of “Script.txt”.

<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.conditions.js"></script>

I don't know if it works. I haven't tested it.

Thanks Uwe

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.