SXA destroys the window context used by the conditional logic of forms

Question

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.

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

Thanks a lot

Uwe

Answer 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.

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