Sitecore WFFM Ajax MVC call is duplicating the content

Sitecore WFFM Ajax MVC call is duplicating the content

For one of our Sitecore 8.1 rev 151217 based project we had a requirement of AJAX call in WFFM form. We were creating a form and marking “Is Ajax MVC Form” as checked and doing appropriate change for using MVC Form rendering to fire a AJAX call.

The forms are rendering and visible on the page, but when we were trying to submit the form its injecting full page again including thank you message instead of only showing thank you message. Therefore, it was showing duplicate content on page.

First I was thinking this error may due to some missing configuration or something else because the project I am working on is not a new one and its was previously upgraded to Sitecore 8.1 rev 151217 but to make sure, I installed a vanilla instance with WFFM only and add the sample forms coming with WFFM module on single page with MVC form rendering but I was facing same problem here as well. For using MVC form rendering I was using the WFFM installation guide as reference by Sitecore. However, it was not reproducible on Sitecore 8.1 rev. 160519 (8.1 Update-3) + WFFM 8.1 rev. 160523 (Update-3) and higher. So defiantly it was a problem in Sitecore 8.1 151217.

Now there were two solutions to resolve this problem –

  1. Upgrade our current solution to the higher version of Sitecore.
  2. Update or apply some patch in current version so it resolves the problem.

With First solution it was not possible to upgrade the current version because it was not in my territory. So I have decided to resolve this problem by apply some patch or code update. Meanwhile I also log a support ticket to the Sitecore. At the end I got following two solutions one was by me and second was provide by Sitecore support.

Solution1 – update the wffm.js file for the response

When we hit the submit button of mvc ajax wffm form it calls form.submit method written in \sitecore modules\Web\Web Forms for Marketers\mvc\wffm.js file. This method fire a ajax call to the server and get the result based on the sumittion success or fail. We can filter the result for success return of the ajax in the js file so it will clean the duplicate file

success: function (res) {self.formSubmitSuccess(form, res);}

All we need to perform functions on res (data) in above js code.

Solution 2 – This solution was provided by Sitecore where we need to update the FormViewModel.cshtml file with below code. You can open following file in any editor and can paste the below code.

-Website\Views\Form\EditorTemplates\FormViewModel.cshtml

@using Sitecore.Forms.Mvc

@using Sitecore.Forms.Mvc.Html

@using Sitecore.Globalization

@model Sitecore.Forms.Mvc.ViewModels.FormViewModel

@{

var attributes = new RouteValueDictionary()

{

{ “enctype”, “multipart/form-data” },

{ “class”, @Model.CssClass },

{ “id”, Model.ClientId },

{ “role”, “form” },

{ Constants.Wffm, Model.Item.ID }

};

var queryString = new RouteValueDictionary(Request.QueryString.AllKeys.ToDictionary(key => key, key => (object)Request.QueryString[key]));

if (Model.IsAjaxForm)

{

attributes.Add(“data-wffm-ajax”, true);

if (!string.IsNullOrEmpty(Model.RedirectUrl))

{

attributes.Add(“data-wffm-redirect”,  UrlHelper.GenerateContentUrl(Model.RedirectUrl, Context));

}

if (!IsPost)

{

queryString.Add(“wffm.” + Constants.FormItemId, Model.Item.ID.ToGuid());

queryString.Add(“wffm.” + Constants.Id, Model.UniqueId);

}

Html.BeginRouteForm(“Form”, queryString, FormMethod.Post, attributes);

}

else

{

Html.BeginRouteForm(Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName, queryString, FormMethod.Post, attributes);

}

var uniqueId = Model.UniqueId.ToString();

Html.EnableClientValidation(true);

Html.EnableUnobtrusiveJavaScript(true);

@Html.AntiForgeryToken()

@Html.Hidden(Constants.Id, uniqueId)

@Html.Hidden(Constants.FormItemId, Model.Item.ID)

if (Model.ShowTitle)

{

var headerText = Html.BootstrapText(“Title”);

@Html.BootstrapHeader(headerText.ToString(), Model.TitleTag)

}

if (Model.SuccessSubmit)

{

@Html.Encode(!string.IsNullOrEmpty(Model.SuccessMessage) ? Model.SuccessMessage : Translate.Text(“Default success message.”))

return;

}

if (Model.Errors.Any())

{

@Html.BootstrapWarningsList(Model.Errors)

}

if (Model.ShowInformation)

{

@Html.BootstrapText(“Information”)

}

@Html.BootstrapValidationSammary(false)

@Html.EditorFor(x => Model.Sections)

if (Model.ShowFooter)

{

@Html.BootstrapText(“Footer”)

}

@Html.BootstrapSubmit()

Html.EndForm();

}

And that’s it. Thank you!

Advertisements