Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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; haev other javascript/jquery actions working fine

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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!');
   }
}
share|improve this answer
    
thanks very much! –  Justin Jun 28 '12 at 12:29
add comment

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!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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