I'm trying to create jquery dialog, but there is no use :( here is my jQuery code:

$(document).ready(function() {
    createDialog();

});
function createDialog() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-form").dialog(
            {
                autoOpen : false,
                height : 475,
                width : 350,
                modal : true,
                buttons : {
                    "submit" : function() {

                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        postText();
                            $(this).dialog("close");
                        }
                    },
                    cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

    $(".add-org").click(function() {

            $("#dialog-form").dialog("open");
    });
}

here is html code:

<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
    rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/resources/js/myScript.js'/>"></script>

    <a href="javascript:void(0)" class="add-org">New </a>

<div id="dialog-form" title="Add New ">
    <p class="validateTips">All form fields are required.</p>
    <form>
    ..................
    </form>
</div>  

and firebug says:

TypeError: $("#dialog:ui-dialog").dialog is not a function

$("#dialog:ui-dialog").dialog("destroy");

and on my page I see all the fields from the form. so what is my problem?

I'm trying to create jquery dialog, but there is no use :( here is my jQuery code:

$(document).ready(function() {
    createDialog();

});
function createDialog() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-form").dialog(
            {
                autoOpen : false,
                height : 475,
                width : 350,
                modal : true,
                buttons : {
                    "submit" : function() {

                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        postText();
                            $(this).dialog("close");
                        }
                    },
                    cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

    $(".add-org").click(function() {

            $("#dialog-form").dialog("open");
    });
}

here is html code:

<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
    rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/resources/js/myScript.js'/>"></script>

    <a href="javascript:void(0)" class="add-org">New </a>

<div id="dialog-form" title="Add New ">
    <p class="validateTips">All form fields are required.</p>
    <form>
    ..................
    </form>
</div>  

and firebug says:

TypeError: $("#dialog:ui-dialog").dialog is not a function

$("#dialog:ui-dialog").dialog("destroy");

and on my page I see all the fields from the form. so what is my problem?

• javascript
• jquery
• html
• modal-dialog
• jquery-ui-dialog

• Do you have that inside document ready? – Angel Commented Jul 25, 2012 at 9:17
• 1 does your js file "jquery-ui-1.8.21.custom.min.js" include the jquery dialog plugin? – user900202 Commented Jul 25, 2012 at 9:18
• which version of jquery are you using? – TRR Commented Jul 25, 2012 at 9:19
• see updates, @allentranks, used search in jquery-ui-1.8.21.custom.min.js file, - yes, it includes – Helgus Commented Jul 25, 2012 at 9:22
• does it work if you ment this line $("#dialog:ui-dialog").dialog("destroy"); ? – user900202 Commented Jul 25, 2012 at 9:26

3 Answers 3

Try this: Working demo http://jsfiddle/kEZkh/

Not sure if your source path are correct please include following scripts.

rest please feel free to play around with demo & hope it helps the cause :)

scripts

      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">


      <link rel="stylesheet" type="text/css" href="http://static.jquery./ui/css/demo-docs-theme/ui.theme.css">

      <script type='text/javascript' src='https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js'></script>
      <script type="text/javascript" src="http://code.jquery./ui/1.8.18/jquery-ui.min.js"></script>

code

$("#forgot").click(function(e){ 
    $("#dialog-form").dialog("open");
    e.preventDefault();
});

$("#dialog-form").dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
});
​

Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:

console.debug(jQuery.ui)

If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.

If you configured a custom build on jqueryui., doublecheck if you included the dialog widget.

The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:

$("#dialog-form").dialog('destroy');

Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.

If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:

$('.ui-dialog-content').dialog('destroy');