SharePoint 2013 - Schaltfläche "Speichern" in der Multifunktionsleiste - Speichern abbrechen, wenn Formular nicht gültig ist

Question

Ich möchte eine Überprüfung durchführen, wenn ein Benutzer auf die Schaltfläche zum Speichern auf der SharePoint-Multifunktionsleiste klickt und die Übergabe des Formulars abbricht, wenn sie nicht gültig ist.

Ich verwende ein Seitenlayout in SharePoint 2013. Die Felder stammen aus dem Inhaltstyp des Seitenlayouts.

Die ID der Schaltfläche ist Ribbon.EditingTools.CPEditTab.EditAndCheckout.SaveEdit-SelectedItem

Ich habe versucht, ohne Erfolg:

• einen Onclick-Handler auf der

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

• ersetzen das onsubmit Attribut der Formular-Schaltfläche hinzufügen

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

Beide Codes werden von sp2013 ignoriert!

Answer 1

Um das Ereignis abzubrechen, habe ich den Link nicht auf den Link ausgerichtet, sondern auf den IMG. Mein JavaScript-Code wird dann vor dem SharePoint-Javascript ausgelöst.

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

Die Doppel antislashes ist jquery dies ist kein Klassenname zu sagen, bedeutet aber ein Punkt in der ID.

Ein weiteres Problem entstand: Die Speicherschaltfläche kann ein paar Sekunden dauern, so dass wir warten müssen, bevor Sie den Click-Handler anhängen. Schließlich wird der Code wie folgt lautet:

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

Um eine Schaltfläche in der Band zu überschreiben, müssen Sie sicher sein, dass:

1. Die Schaltfläche geladen wird

   Auf dieser Angelegenheit Sharepoint 2013 und 2010 erfordert einen geringfügig anderen Code. Laut dem Blogpost SharePoint 2013: Trigger Event With Ribbon Tab Changes müssen Sie ein Ereignis auslösen und in Ihrem Code verarbeiten. Für Sharepoint 2010 überprüfen Sie Trigger an event whenever the SharePoint 2010 ribbon changes .

2. Alle mit der Schaltfläche verknüpften Ereignisse werden abgefangen.

   Ich bemerkte, dass nicht nur click Ereignis von Sharepoint, sondern auch die mousedown verwendet wird, so ist es besser, beide in den neuen Event-Handler aufzunehmen. Sie würden eine Klasse hinzufügen, um zu vermeiden, dass mehrere Handler angehängt werden. Ich schlage vor, den Container zu verwenden, da andernfalls der Standard-Event-Handler ausgelöst wird, wenn der Benutzer in die Umgebung klickt. Tatsächlich ist der einzige sichere Weg zu remove all the handlers, das Element zu klonen und es durch seinen Klon zu ersetzen.

Das ist also der Code, den ich endmontierten:

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