Prebinding Isn’t Applied to Elements Within a Searchbox Container

Symptoms

You have a component inside a searchbox container but a prebinding operation isn’t applied on this component. When inspecting or viewing the source of the rendered page in your browser, the component <div> tag is missing an attribute and/or an attribute value is incorrect.

EXAMPLE

In the rendered page, you inspect a component on which the fieldTranslator method should have been applied. You notice that the component <div> tag doesn’t contain data-applied-prebind="true", nor does it show a value in the Coveo for Sitecore format for the data-field attribute.

Cause

The executed method initializes the component context directly on the searchbox component rather than on the searchbox container.

Resolution

You can add the following JavaScript code at the bottom of the Coveo Searchbox.cshtml file to ensure prebinding operations are applied on all searchbox container components.

<script>
   // Workaround to initialize prebinding attributes on all the elements used in the Searchbox container.
   document.addEventListener("DOMContentLoaded", function() {
        var searchBoxContainer = document.getElementById("@(Model.Id)_container");
        CoveoForSitecore.Prebinding.applyPrebindingOnElement(searchBoxContainer);
        CoveoForSitecore.Prebinding.applyPrebindingOnChildren(searchBoxContainer);
        });
</script>

Better yet, if you know the Searchbox ID, you can replace @(Model.Id)_container with the Searchbox ID in the document.getElementById("@(Model.Id)_container") code line and place the script anywhere on the page.

What's Next for Me?