我在我的SP上使用的JSLINK有一个奇怪的行为。如果我更改了JSLINK正在转换的字段的值,那么表单的保存按钮不能与IE一起使用,但Chrome也没关系。
该字段是Multiline纯文本的类型。我正在使用它来保存一些JSON。
以下是代码:
(function() {
var loaded = false;
var repeaterFormArr = [
"<input type='text' id='nameInput' placeholder='Nom complet' class='ms-long ms-spellcheck-true intervenantsBox' required>",
"<input type='text' id='addressInput' placeholder='Adresse' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<input type='text' id='phoneInput' placeholder='Telephone' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<input type='text' id='emailInput' placeholder='Email' pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$\" title='xxx@yyy.zzz' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<select name='typeActor' id='typeActor' class='ms-long intervenantsBox'><option value='plaignant'>Plaignant</option><option value='avocat'>Avocat</option><option value='DPO'>DPO</option><option value='demandeur'>Demandeur</option></select>",
];
var ControlRenderModeIntervenant;
var repeaterFormValues = [];
function includeCss() {
if (loaded) return;
loaded = true;
var link = document.createElement('link');
link.href = _spPageContextInfo.siteAbsoluteUrl + '/Style%20Library/CSS/intervenantsEditCustom.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
// This function provides the rendering logic
function IntervenantsRepeaterFiledViewTemplate(ctx) {
ControlRenderModeIntervenant = ctx.ControlMode;
if (ctx.CurrentItem[ctx.CurrentFieldSchema.Name] && ctx.CurrentItem[ctx.CurrentFieldSchema.Name] != '[]') {
var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name].replace(/"/g, "\"").replace(/(<([^>]+)>)/g, "");
repeaterFormValues = JSON.parse(fieldValue);
}
return GetRenderHtmlRepeaterValuesIntervenants();
}
// This function provides the rendering logic
function IntervenantsRepeaterFiledEditFTemplate(ctx) {
var field = ctx.CurrentFieldSchema,
encodedName = field.Name + '_' + field.Id + '_$NumberField';
ControlRenderModeIntervenant = ctx.ControlMode;
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
if (formCtx.fieldValue) {
repeaterFormValues = JSON.parse(formCtx.fieldValue);
}
// Register a callback just before submit.
ctx.FormContext.registerGetValueCallback(field.Name, function() {
return JSON.stringify(repeaterFormValues);
});
ctx.FormContext.registerInitCallback(field.Name, function() {
document.getElementById('innerFormIntervenants').addEventListener('submit', function(evt) {
evt.preventDefault();
AddIntervenant();
return false;
});
var deleteLinks = document.getElementsByClassName('delete-link');
if (deleteLinks.length > 0) {
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener("onclick", function(evt) {
evt.preventDefault();
DeleteItem(deleteLinks[i].getAttribute('data-myAttri'));
return false;
});
}
}
});
// formCtx.registerGetValueCallback(formCtx.fieldName, function() {
// return JSON.stringify(repeaterFormValues);
// });
var HTMLViewTemplate = "<form id='innerFormIntervenants'>{Controls}<div><input type='submit' value='Add' style='margin-left:0'></div><br/><div id='divRepeaterValues'>{RepeaterValues}</div><br/></form>";
var returnHTML = "";
for (index = 0; index < repeaterFormArr.length; ++index) {
returnHTML += repeaterFormArr[index];
}
returnHTML = HTMLViewTemplate.replace(/{Controls}/g, returnHTML);
returnHTML = returnHTML.replace(/{RepeaterValues}/g, GetRenderHtmlRepeaterValuesIntervenants());
return returnHTML;
}
function GetRenderHtmlRepeaterValuesIntervenants() {
var index;
var innerindex;
var HTMLItemsTemplate = "<table width='600px' style='border:1px solid #ababab;'>{Items}</table>";
var HTMLItemTemplate = "<tr>{Item}</tr>";
var HTMLValueTemplate = "<td>{Value}</td>";
if (ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.EditForm || ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.NewForm) {
HTMLItemTemplate = "<tr>{Item}<td><a class='delete-link' data-myAttri='{Index}' href='#'><img src='/SiteAssets/IMG/user-delete.png' class='deleteUserButton'/></a></td></tr>";
}
var returnHTML = "";
var tempValueHtml;
for (index = 0; index < repeaterFormValues.length; ++index) {
tempValueHtml = "";
for (innerindex = 0; innerindex < repeaterFormValues[index]["Intervenant"].length; ++innerindex) {
tempValueHtml += HTMLValueTemplate.replace(/{Value}/g, repeaterFormValues[index]["Intervenant"][innerindex]["Value"]);
}
returnHTML += HTMLItemTemplate.replace(/{Item}/g, tempValueHtml);
returnHTML = returnHTML.replace(/{Index}/g, index);
}
if (repeaterFormValues.length) {
returnHTML = HTMLItemsTemplate.replace(/{Items}/g, returnHTML);
}
return returnHTML;
}
function AddIntervenant() {
var innerFormIntervenants = document.getElementById('innerFormIntervenants');
if (innerFormIntervenants.checkValidity()) {
var index;
var tempRepeaterValue = [];
for (index = 0; index < innerFormIntervenants.length; index++) {
if (innerFormIntervenants[index].type != "submit" && innerFormIntervenants[index].type != "button" && innerFormIntervenants[index].type != "reset") {
tempRepeaterValue.push({
"ID": innerFormIntervenants[index].id,
"Value": innerFormIntervenants[index].value
});
innerFormIntervenants[index].value = "";
}
}
repeaterFormValues.push({ "Intervenant": tempRepeaterValue });
document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
}
}
function DeleteItem(index) {
repeaterFormValues.splice(index, 1);
document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
}
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.OnPreRender = includeCss;
overrideCtx.Templates.Fields = {
myCustomField: {
View: IntervenantsRepeaterFiledViewTemplate,
DisplayForm: IntervenantsRepeaterFiledViewTemplate,
NewForm: IntervenantsRepeaterFiledEditFTemplate,
EditForm: IntervenantsRepeaterFiledEditFTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
在Debug中,我可以看到调用了回调函数。然后它进入JS的SharePoint内部以保存项目。但保存按钮只是灰色,然后没有任何附加。