TypeError: 'undefined' is not a function (evaluating '$( "#wnd_Addparam" ).dialog')

javascript jquery jquery-ui dialog

11,730

Solution 1

Now use this code simple....


<html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript">
    // <---- VENTAÑAS DE PARAMETERES---->
    $(document).ready(function() { 
    var regex,v,l,c,b;
    $( "#wnd_Addparam" ).dialog({
                autoOpen: false,
                height: 'auto',
                width: 350,
                modal: true,
                resizable:false,
                buttons: {
                    "Add": function() {
                                   $( this ).dialog( "close" ); 
                                       },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    $( this ).dialog( "close" );
                }
            });

            $( "#btn_Addpar" ).click(function() {
                    $( "#wnd_Addparam" ).dialog( "open" );
                });

    });
    </script>
    </head>
    <!--<form method="POST" id="iformp" name="nformp">-->
    <body>
    <h3>List of parameters</h3>
    <div id="sortparam" >
    </div>
     <input type="button" id="btn_Addpar" value="Add"/>

    <!--<form>-->

    </body>

    </html>

Solution 2

You are referencing the jQuery core, but not jQuery UI itself.

I believe the dialog function only exists in jQuery UI, so you would need to add the following to your page too:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready( function () {
    var regex,v,l,c,b;
    $( "#wnd_Addparam" ).dialog({
        // Your code...
}

Solution 3

I had the same problem. I included jQuery twice on the same webpage (jQuery then jQuery UI then jQuery, and it causes me troubles (exactly the same problem on the .dialog )

11,730

Zathrus Writer

The world consists of many beautiful answers :)

Updated on September 27, 2022

Comments

Zathrus Writer over 1 year

I had this example from 2 months and I changed the PC. Now this doesn't seem to work anymore. This is an example that should load a small window's dialog by (before) pushing a button. However, it does not work... This is my code:

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->

var regex,v,l,c,b;
$( "#wnd_Addparam" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 350,
            modal: true,
            resizable:false,
            buttons: {
                "Add": function() {
                                $( this ).dialog( "close" ); 
                                   },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( this ).dialog( "close" );
            }
        });

        $( "#btn_Addpar" ).click(function() {
                $( "#wnd_Addparam" ).dialog( "open" );
            });
$( "#wnd_Paramedit" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 350,
            modal: true,
            resizable:false,
            buttons: {
                "Accept": function() {
                      $( this ).dialog( "close" );  

                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( this ).dialog( "close" );
            }
        });

        $( "#btn_Pedit" ).click(function() {
                $( "#wnd_Paramedit" ).dialog( "open" );
            });
$( "#wnd_Borpara" ).dialog({
            autoOpen: false,
            height: 'auto',
            width: 300,
            resizable:false,
            modal: true,
            buttons: {
                "Accept": function() {
                    $(this).dialog("close");

                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( this ).dialog( "close" );
            }
        });

        $( "#btn_Deletepara" ).click(function() {
                $( "#wnd_Borpara" ).dialog( "open" );
            });

</script></head>
<!--<form method="POST" id="iformp" name="nformp">-->
<body>
<h3>List of parameters</h3>
<div id="sortparam" >
</div>
 <input type="button" id="btn_Addpar" value="Add"/>
<input type="button" id="btn_Deletepara" value="Delete"/>
<input type="button" id="btn_Pedit" value="Edit"/>
<!--<form>-->

</body>

</html>

Please.. Why I do have an error for the dialog???

Admin over 11 years

But with this library i have one error more or most because i have this: ReferenceError: Can't find variable: jQuery in sentence number 5
Fenton over 11 years

You need to put the jQuery UI script after the jQuery script - I will make my example explicit...
kayen over 11 years

You need to wrap your jQuery specific code inside $(function(){ \\Code here }).