I am working on SP2010 with visual web part in C#. I have added one form dialog using jquery-ui. When I use it directly from .ascx, its working. But when I am calling it from code behind, its not showing up. It seems jquery ready function itself is not able to initialize.

This is my javascript code to generate popup:

$(document).ready(function () {

alert('readying function');
//setup new comments dialog
    autoOpen: false,
    draggable: true,
    title: "Add New Comment",
    open: function (type, data) {


function showDialog(id) {
    alert('Showing ' + id);
    $('#' + id).dialog("open");
    alert('did you see ' + id);

The popup before making dialog ready is coming up. But then dialog is not showing. I have ensured my script and jquery-us.css is embedded on top of the page. I am using jquery 1.9.1.

Am I making any mistake here? Such a simple thing is eating lot of time :(

  • are you getting any javascript errors? If so, what?
    – Dave Wise
    Commented Mar 29, 2013 at 15:40
  • No Dave. There is no error. When .js file was included using normal <script include>, I was getting it, but then after I used SharePoint:ScriptLink with defer=false, I am not getting any javascript error on console. Commented Mar 29, 2013 at 16:41
  • can you add a debugger; in the open function and see if it makes it that far? Also can you add the code that is opening the dialog? Commented Mar 29, 2013 at 18:19
  • Its not going into jquery at all. Updated the post with this show dialog code. Interestingly both alerts are coming up but dialog is not! Commented Mar 29, 2013 at 19:19

1 Answer 1


Are you certain that the element you are selecting actually exists? I noticed that the dialog you are creating and the one you are calling open on in your functions above are not the same. If you look at this fiddle, I get the exact same symptoms as you are having because the selector I am using does not exist.


<input type="button" value="open" id="open-button" />

<div class="hidden" id="dialog">
    Hello, world!

$( "#dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true

$("#open-button").click( function(){ 
    console.log("click 2");

  • Thanks Robert for your response and sharing jsfiddle. Actually indeed that element was not ready. But then even after adding similar ready function for 'new' dialog, its not appearing. The strange thing is its not showing any javascript error as well. Commented Apr 1, 2013 at 6:32

Your Answer

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

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