2

So I am trying to figure out how to use some java script in order to use a modal dialog to display new item form. The below is what I have thus far, but its not working and I am not sure what portion is wrong, missing, 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!');
   }
}

So basically I am just looking at learning how to open a new item form for a list in a modal dialog. I have yet to get to working with the result in order to do this, but for now I can't seem to get the dialog to come up. Again, I found an example and am trying to learn from what I have but need some help; any help with this is greatly appreciated as always!

EDIT: forgot to mention that I do have the script reference to sp.js in the page; have other javascript/jquery actions working fine.

2 Answers 2

3

The following code is working. There were 2 errors which I have commented in the 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!');
   }
}
0
0

This script should open a popup Window but you will need to update the Urls and the list id's to suit your enviroment.

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

You can enbed all this code directly into a content editor webpart. I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.