Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

"ReferenceError: epi is not defined" AtHeader not working Episerver Forms



Forms 3.0.0, CMS 9.12, Commerce 9.20

I have followed other threads pointing out the importance of having
@Html.RequiredClientResources("Header") and @Html.RequiredClientResources("Footer") and RenderBody()


We have just converted our site from Webform to MVC. Trying to run the Forms in our MVC template

The @Html.RequiredClientResources("Footer") is populated with forms javascript, but not the @Html.RequiredClientResources("Header")

When i reflected FormContainerBlockController.Index(FormContainerBlock currentBlock)

And pasting the code in my page controller, Header is working, and the forms are working.

It seems to be a bug in the AtHeader implementation? Or is it reseted? Is it just me not working?


Reflecting EPiServer.Forms.FormsClientResourceRegister is showing that an empty RegisterResources, strange, is n't it?

protected override void RegisterResources(IRequiredClientResourceList requiredResources, HttpContextBase context, PageData pageData)

Aug 19, 2016 9:01

Hi Gosso,

Could you please take a look at this thread? We filed a bug for it, but CMS team cannot reproduce.

Tested and works without RenderBody but of course you need to call @Html.RequiredClientResources("Header") somewhere.

I used this code to test:

internal class HelloWorldScriptInjection : IClientResourceRegister
public void RegisterResources(IRequiredClientResourceList requiredResources, HttpContextBase context)
requiredResources.RequireScriptInline("alert('alert hello world')").AtHeader();

In Forms, we register to the page header with a simple inline script to init the variable epi, and some configuration for detecting/injecting jQuery

// save original jQuery object to revert after we register jQuery lib ourselve
var saveOriginalJQuery = @"var epi = epi||{}; epi.EPiServer = epi.EPiServer||{}; epi.EPiServer.Forms = epi.EPiServer.Forms||{};
epi.EPiServer.Forms.InjectFormOwnJQuery = " + _formConfig.Service.InjectFormOwnJQuery.ToString().ToLowerInvariant() +
@";epi.EPiServer.Forms.OriginalJQuery = typeof jQuery !== 'undefined' ? jQuery : undefined;";
requiredResources.RequireScriptInline(saveOriginalJQuery, "EPiServerForms_saveOriginalJQuery.js", new List<string> { }).AtHeader();

I don't see problem with AlloyMVC (which having enough of @Html.RequiredClientResources("Header") and @Html.RequiredClientResources("Footer") in the master template.

If it is your specific case, please file a support case, so we can look into your project implementation.

Thank you.


Aug 29, 2016 5:47

Yeah, the alert example is working for me. this is strange. yes i file for a bug.

Aug 29, 2016 7:38

Got this answer from the developers:

When FORM is placed inside @RenderSection, the @Html.RequiredClientResources(RenderingTags.Header) happens before the FormContainerBlockController and it's by designed.

When the FormContainerBlockController is executed, the page already render the header, so FORM cannot add required resources to the header. In order to solve this problem, please move FORM outside @RenderSection.

Our pages was built with only RenderSections and no "Body", so i changed the cshtml to make it work.

Sep 09, 2016 9:20

check this to solve it with nested layout views!

Apr 20, 2017 14:12
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.