web part jquery ui dialog not working

Question

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
$('#newComment').dialog({
    autoOpen: false,
    draggable: true,
    title: "Add New Comment",
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});

});

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

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.

http://jsfiddle.net/RobertKaucher/teG5f/

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

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


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

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

});