SP2010 Verwenden des modalen Dialogfelds für Formulare :Anfängerfragen

Question

Ich versuche also herauszufinden, wie man ein Java-Skript verwendet, um ein modales Dialogfeld zum Anzeigen eines neuen Elementformulars zu verwenden.Das Folgende ist das, was ich bisher habe, aber es funktioniert nicht und ich bin mir nicht sicher, welcher Teil falsch ist, fehlt usw.

//use a button for example
<input type="button" value="Launch Dialog" id="myDialog" onclick="openDiaForm();"/>

//inside script tags under PlaceHolder Main
function openDiaForm()
{
   var diaOptions = SP.UI.create_DialogOptions();
   diaOptions.url = 'http://mySPDev/sites/jQueryPractice/Lists/ExampleList/NewForm.aspx?ID=' + 1 + '&IsDlg=1';
   diaOptions.url += "?Source=" + document.url;
   diaOptions.width = 400;
   diaOptions.height = 300;
   diaOptions.title = "My Custom Dialog Form";
   diaOptions.dialogReturnValueCallback = function.createDelegate(null, CloseCallBack);
   SP.UI.ModalDialog.showModalDialog(diaOptions);
}

function CloseCallBack(result, returnValue)
{
   if (result == SP.UI.DialogResult.OK)
   {
      alert('clicked ok because I do not know how to work with result yet!');
   }
   else
   {
      alert('click cancel because I still do not know how to work with result!');
   }
}

Im Grunde möchte ich nur lernen, wie man ein neues Elementformular für eine Liste in einem modalen Dialog öffnet.Ich muss noch mit dem Ergebnis arbeiten, um dies zu tun, aber im Moment kann ich den Dialog anscheinend nicht zum Laufen bringen.Auch hier habe ich ein Beispiel gefunden und versuche aus dem zu lernen, was ich habe, brauche aber Hilfe;jede Hilfe dabei wird wie immer sehr geschätzt!

BEARBEITEN:ich habe vergessen zu erwähnen, dass ich den Skriptverweis auf habe sp.js auf der Seite;lassen Sie andere Javascript / jQuery-Aktionen einwandfrei funktionieren.

Answer 1

Der folgende Code funktioniert.Es gab 2 Fehler, die ich im Code kommentiert habe.

//use a button for example
<input type="button" value="Launch Dialog" id="myDialog" onclick="openDiaForm();"/>

//inside script tags under PlaceHolder Main
function openDiaForm()
{
   //Use SP.UI.$create_DialogOptions() instead of SP.UI.create_DialogOptions()
   //The name of the method starts with a "$"
   var diaOptions = SP.UI.$create_DialogOptions();
   diaOptions.url = 'http://mySPDev/sites/jQueryPractice/Lists/ExampleList/NewForm.aspx?ID=' + 1 + '&IsDlg=1';
   diaOptions.url += "?Source=" + document.url;
   diaOptions.width = 400;
   diaOptions.height = 300;
   diaOptions.title = "My Custom Dialog Form";
   //Use Function.createDelegate(null, CloseCallBack) instead of function.createDelegate(null, CloseCallBack);
   //The createDelegate method is part of the Function object. "function" is used to define a new function.
   diaOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallBack);
   SP.UI.ModalDialog.showModalDialog(diaOptions);
}

function CloseCallBack(result, returnValue)
{
   if (result == SP.UI.DialogResult.OK)
   {
      alert('clicked ok because I do not know how to work with result yet!');
   }
   else
   {
      alert('click cancel because I still do not know how to work with result!');
   }
}

Answer 2

Dieses Skript sollte ein Popup-Fenster öffnen, aber Sie müssen die URLs und die Listen-IDs an Ihre Umgebung anpassen.

<script type="text/javascript">
function silentCallback(dialogResult, returnValue) { 
}


function refreshCallback(dialogResult, returnValue) { 
SP.UI.Notify.addNotification('Operation Successful!'); 
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); 
}

var orderPrinterOptions= { 
url: "/xxx/PrinterList/_layouts/listform.aspx?PageType=8&ListId={5BF16642-B7C4-4E54-  990D-E0E040F97DA9}&RootFolder=", 
title: "Order a Printer", 
allowMaximize: true, 
showClose: true, 
width: 650, 
height: 525,
dialogReturnValueCallback: silentCallback}; 

function orderPrinter() 
{SP.UI.ModalDialog.showModalDialog(orderPrinterOptions);} 
</script> 

<a href="javascript:orderPrinter()"><img width="234" height="232" alt="orderprinter.png" src="/xxx/PrinterList/Shared%20Documents/orderprinter.png" border="0" style="margin: 5px; width: 219px; height: 219px"/></a>
<div class="ms-rteFontSize-3" style="text-align:  center">Order&#160;New&#160;Printer&#160;</div>

Sie können den gesamten Code direkt in ein Inhaltseditor-Webpart einbinden. Ich hoffe, das hilft!