SharePoint 2010 Modal Dialog from JSOM not working

Question

The idea is simple: create a web part page in SP Designer 2010 that allows a new list item to be created, and then use some javascript from the CSOM to pop the page in a modal dialog from another page. The problem is that a dialog box comes up and briefly flashes that it is loading content, but then it disappears and I'm left with a refreshed version of the page I just clicked from. Here's my code . . .

//attach a click delegate to the table containing the following button(s)
<button type='button' class='ms-listheaderlabel'>Close</button>

//on button clicked event, call the following function
function openModalDialog(dialogPage, closeCallback) {
  var options = [];
  options.title = unescape("Close Ticket");
  options.allowMaximize = true;
  options.showClose = true;
  options.autoSize = true;
  options.url = dialogPage;
  options.dialogReturnValueCallback = Function.createDelegate(null, closeCallback);
  SP.UI.ModalDialog.showModalDialog(options);
};

. . . where dialogPage is the url for the form I created (same site, SitePages library) and closeCallback is an anonymous function passed in to handle the return value from the dialog. I've tried calling the page directly and it loads just fine. Pop up blocker is completely off. Using IE9 and tried 8 compatability mode as well as another machine with straight IE8. System modals work just fine. Any ideas out there?

Answer 1

I am going through the exact same issue right now. What I have discovered so far is if I use

<input type="button" value="Try Me" onclick="openModalDialogBox()" />

it works as expected. But if I use an asp:button to do the same thing it fails. I think it may have to do with the postback to the server, but I could be wrong about that.

I am just switching my buttons to inputs.

Tim