Question

我想在用户单击SharePoint功能区上的“保存”按钮时执行某些验证，如果表单无效，则取消提交表单。

我在SharePoint 2013中使用页面布局。字段来自页面布局内容类型。

按钮的ID为Ribbon.EditingTools.CPEditTab.EditAndCheckout.SaveEdit-SelectedItem

我尝试没有成功：

在按钮上添加onclick处理程序

var saveButton = function () {
    return document.getElementById("Ribbon.EditingTools.CPEditTab.EditAndCheckout.SaveEdit-SelectedItem");
}
$(saveButton()).removeAttr("onclick");
$(saveButton()).click(
    function(ev){
        ev.preventDefault();
        ev.returnvalue=false; // for IE only
        return false;
    }
);

替换表单的onsubmit属性

$("form").attr("onsubmit","javascript: return false;")

sp2013很高兴地忽略了这两个代码！

Answer 1

要取消活动，我没有定位链接，而是将链接中的img作为目标。然后在SharePoint javascript之前触发我的javascript代码。

$("#Ribbon\\.EditingTools\\.CPEditTab\\.EditAndCheckout\\.SaveEdit-SelectedItem img").click(function(){
    console.log("saveButton clicked");
    return false;
});

双重反义词是告诉jquery这不是类名，而是id中的一个点。

出现了另一个问题：保存按钮可能需要几秒钟才能加载，因此我们必须在附加点击处理程序之前等待。最后代码是这样的：

//namespace
var qp = {}
// attaching a click handler to the save button image
qp.registerSaveButtonEvent = function() {
    var b = "#Ribbon\\.EditingTools\\.CPEditTab\\.EditAndCheckout\\.SaveEdit-SelectedItem img";
    // if the button exists
    if ($(b).length > 0) {
        // we attach the click handler to it
        $(b).click(function(){
            console.log("saveButton clicked");
            return false;
        });
        // we stop the future calls of this function
        clearInterval(qp.interval);
    }
}
// Running the function every 500 ms
qp.interval = setInterval(qp.registerSaveButtonEvent, 500);

Answer 2

要覆盖功能区中的按钮，您必须确保：

按钮已加载

在此问题上，Sharepoint 2013和2010需要略有不同的代码。根据博客文章SharePoint 2013: Trigger Event With Ribbon Tab Changes，您需要触发一个事件并在您的代码中处理它。对于Sharepoint 2010，请检查Trigger an event whenever the SharePoint 2010 ribbon changes 。
拦截了附在按钮上的所有事件。

我注意到Sharepoint不仅使用click事件，而且mousedown使用了// 1) Fires 'ribbontabselected' every time the ribbon selection changes ExecuteOrDelayUntilScriptLoaded(function () { // Sometime this function is called twice on IE, don't ask why... // So better safe than sorry. if (typeof CUI.Ribbon.prototype.$1q_0_old == 'undefined') { CUI.Ribbon.prototype.$1q_0_old = CUI.Ribbon.prototype.$1q_0; } CUI.Ribbon.prototype.$1q_0 = function () { this.$1q_0_old(); $(document).trigger('ribbontabselected', [this.get_selectedTabCommand()]); }; }, 'cui.js'); // 2) Fires 'ribbontabselected' after the ribbon has been initialized after load ExecuteOrDelayUntilScriptLoaded(function () { var pm = SP.Ribbon.PageManager.get_instance(); pm.add_ribbonInited(function () { $(document).trigger('ribbontabselected', [SP.Ribbon.PageManager.get_instance().get_ribbon().get_selectedTabCommand()]); }); }, 'sp.ribbon.js'); // Identify the button (use the container as selector) // Double antislashes to tell jquery this is no class name but a dot in the id var sharepointExcelButtonHandler = 'a#Ribbon\\.List\\.Actions\\.ExportToSpreadsheet-Large'; // 3. Modify command button $(document).on('ribbontabselected', function (e, selectedTabCommand) { if (selectedTabCommand == 'ListTab' && $(sharepointExcelButtonHandler).length > 0) { if (! $(sharepointExcelButtonHandler).hasClass("DIST-excel-download-processed")) { // The only safe way to remove all previous handlers is to replece the element with a clone $(sharepointExcelButtonHandler) .replaceWith($(sharepointExcelButtonHandler).clone()); // Add new handlers $(sharepointExcelButtonHandler) .addClass("DIST-excel-download-processed") .on("mousedown click", function(e) { console.log("Do your stuff"); return false; }); } } });事件，因此最好将它们都包含在新事件处理程序中。您将添加一个类以避免连接多个处理程序。我建议使用容器，否则如果用户在周围区域单击，则会触发标准事件处理程序。事实上，remove all the handlers唯一安全的方法是克隆元素并将其替换为克隆。

所以这是我最终组装的代码：

{{1}}

SharePoint 2013 - 功能区中的保存按钮 - 如果表单无效，则取消保存

2 个答案: