SP2010 à l'Aide de boîte de Dialogue Modale pour les Formulaires :Questions De Débutant
-
09-12-2019 - |
Question
Donc, je suis à essayer de comprendre comment utiliser certaines java script pour utiliser une boîte de dialogue modale à l'affichage de l'élément de formulaire.Ci-dessous est ce que j'ai à ce jour, mais sa ne fonctionne pas et je ne suis pas sûr de ce que la partie est mal, manquant, etc.
//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!');
}
}
Donc, fondamentalement, je suis juste à la recherche sur l'apprentissage comment ouvrir un nouvel élément de formulaire pour une liste dans une boîte de dialogue modale.J'ai encore à travailler avec le résultat, pour ce faire, mais pour l'instant je n'arrive pas à obtenir la boîte de dialogue à venir.Encore une fois, j'ai trouvé un exemple et suis en train d'apprendre à partir de ce que j'ai, mais ont besoin de l'aide;tout, est grandement apprécié, comme toujours!
MODIFIER:j'ai oublié de mentionner que j'ai la référence de script à sp.js
dans la page;avoir d'autres javascript/jquery actions fonctionne bien.
La solution
Le code suivant fonctionne.Il y avait 2 erreurs que j'ai commentées dans le code.
//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!');
}
}
Autres conseils
<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 New Printer </div>
Vous pouvez englober tout ce code directement dans un WebPart Editeur de contenu. J'espère que cela aide!