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

[英]SharePoint 2013 - save button in the ribbon - cancel saving if form not valid


I want to perform some validation when a user click the save button on the SharePoint ribbon and cancel the submission of the form if it is not valid.

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

I am using a page layout in SharePoint 2013. The fields come from the page layout content type.

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

The id of the button is Ribbon.EditingTools.CPEditTab.EditAndCheckout.SaveEdit-SelectedItem

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

I tried without success:

我尝试没有成功:

  • add an onclick handler on the button

    在按钮上添加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;
        }
    );
    
  • replace the onsubmit attribute of the form

    替换表单的onsubmit属性

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

Both codes are happily ignored by sp2013!

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

2 个解决方案

#1


0  

To cancel the event, instead of targeting the link, I have targeted the img inside the link. My javascript code is then fired before the SharePoint javascript.

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

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

The double antislashes are meant to tell jquery this is no class name but a dot in the id.

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

Another problem arised: the save button can take a few seconds to load, so we have to wait before attaching the click handler. Finally the code is like this:

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

//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);

#2


0  

In order to override a button in the ribbon you must be sure that:

要覆盖功能区中的按钮,您必须确保:

  1. The button is loaded

    按钮已加载

    On this matter Sharepoint 2013 and 2010 require a slight different code. According to the blog post SharePoint 2013: Trigger Event With Ribbon Tab Changes you need to fire an event and process it in your code. For Sharepoint 2010 check Trigger an event whenever the SharePoint 2010 ribbon changes .

    在这个问题上,Sharepoint 2013和2010需要略微不同的代码。根据博客文章SharePoint 2013:使用功能区选项卡触发事件更改,您需要触发事件并在代码中处理它。对于Sharepoint 2010检查每当SharePoint 2010功能区更改时触发事件。

  2. All the events attached to the button are intercepted.

    附加到按钮的所有事件都被截获。

    I noticed that not only click event is used by Sharepoint but even the mousedown, so it's better to include both in the new event handler. You would add a class to avoid multiple handlers to be attached. I suggest to use the container because otherwise if user click in the surrounding area the standard event handler is fired. Indeed the only safe way to remove all the handlers is to clone the element and replace it with its clone.

    我注意到,不仅点击事件被Sharepoint使用,甚至是mousedown,所以最好在新事件处理程序中包含它们。您将添加一个类以避免附加多个处理程序。我建议使用容器,否则如果用户在周围区域单击,则会触发标准事件处理程序。实际上,删除所有处理程序的唯一安全方法是克隆元素并将其替换为克隆。

So this is the code I finally assembled:

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

// 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;
        });
    }
  }
});
智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.silva-art.net/blog/2016/08/02/35b3120961afd7d5b8a8c9f320a4b53a.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告