0

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?

8
  • Do you have that inside document ready?
    – Angel
    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
    Jul 25, 2012 at 9:18
  • which version of jquery are you using?
    – TRR
    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
    Jul 25, 2012 at 9:22
  • does it work if you comment this line $("#dialog:ui-dialog").dialog("destroy"); ?
    – user900202
    Jul 25, 2012 at 9:26

3 Answers 3

3

Try this: Working demo http://jsfiddle.net/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.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">


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

      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
      <script type="text/javascript" src="http://code.jquery.com/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" );
                }
            },
});
​
2
  • added including files from your list and it helped
    – Helgus
    Jul 25, 2012 at 10:29
  • why add jquery ui twice? Dec 3, 2015 at 18:46
2

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.com, doublecheck if you included the dialog widget.

1
  • I guess that means that either the jQuery UI file is not loaded at all or your code runs before it is loaded and evaluated. 1: Check the network tab in the developer tools, you should see the request for that file. 2: Your code is in myScript.js and you definitely load that after jQuery UI?
    – Wolfram
    Jul 25, 2012 at 10:28
0

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');

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.