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

Member since: 2007


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()

  • http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2016/1/quotuncaught-referenceerror-epi-is-not-definedquot-when-displaying-a-form-the-new-episerver-forms/
  • http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=148419

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)

#152193 Aug 19, 2016 9:01
  • Member since: 2009

    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.


    #152672 Aug 29, 2016 5:47
  • Member since: 2007

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

    #152675 Aug 29, 2016 7:38
  • Member since: 2007

    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.

    #155108 Sep 09, 2016 9:20
  • Member since: 2007
    #177847 Apr 20, 2017 14:12