양식에 대한 모달 대화 상자를 사용하여 SP2010 : 초보자 질문
-
09-12-2019 - |
문제
이므로 새 항목 양식을 표시하기 위해 모달 대화 상자를 사용하려면 일부 Java 스크립트를 사용하는 방법을 알아려고합니다.아래는 내가 지금까지 가지고있는 것입니다. 그러나 그것의 작동하지 않고 어떤 부분이 잘못되어 누락되었는지 확실하지 않습니다.
//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!');
}
}
.
그래서 기본적으로 모달 대화 상자의 목록에 대한 새 항목 양식을 열는 방법을 배우는 방법을 살펴보고 있습니다.나는이 일을하기 위해 결과를 가지고 일하고 있지만, 지금은 대화를 올리기 위해 볼 수 없습니다.다시 말하지만, 나는 내가 가지고있는 것에서 배우려고하는 예를 발견하고 도움이 필요합니다.이와 같은 도움이 항상 그렇게 크게 높이 평가됩니다!
편집 : Page의 sp.js
에 대한 스크립트 참조를 언급하는 것을 잊었습니다.다른 JavaScript / jQuery 작업이 잘 작동합니다.
해결책
다음 코드가 작동합니다.코드에 댓글을 달았던 2 가지 오류가있었습니다.
//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!');
}
}
. 다른 팁
이 스크립트는 팝업 창을 열어야하지만 환경에 맞게 URL 및 목록 ID를 업데이트해야합니다.
.
<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>
이 모든 코드를 콘텐츠 편집기 웹 파트에 직접 흡입 할 수 있습니다. 이 도움이되기를 바랍니다!