'Uncaught TypeError: jQuery(...).dialog is not a function

I have tried all CDN but always get error. Please suggest correct CDN

jQuery(document).ready(function() {
  debugger;
  jQuery(function() {
    jQuery("#divLookUp").dialog({
      autoOpen: false,
      minWidth: 600,
      show: {
        effect: "clip",
        duration: 200
      },
      hide: {
        effect: "clip",
        duration: 200
      }

    });
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.form/4.2.1/jquery.form.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

Uncaught TypeError: jQuery(...).dialog is not a function

jqueryajax


Solution 1:[1]

The only explanation for jQuery(...).dialog is not a function with the given code is that the browser blocked loading http://code.jquery.com/ui/1.11.1/jquery-ui.min.js, this might be because you tested the given code one a https website, or probably because you have enabled a script blocker.

If your tested your code on https then the loading of all scripts that start with http: are blocked. If you change your code loading to this:

jQuery(document).ready(function() {
  debugger;
  jQuery(function() {
    jQuery("#divLookUp").dialog({
      autoOpen: false,
      minWidth: 600,
      show: {
        effect: "clip",
        duration: 200
      },
      hide: {
        effect: "clip",
        duration: 200
      }

    });
  });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.form/4.2.1/jquery.form.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

The error would not be there anymore. But you still have the problem that you load multiple jQuery and jQuery UI versions.

If the problem still persist, then the your browser or some thing else blocks the loading of jquery ui.

Solution 2:[2]

On first line you're just importing the jQueryUI css and not the JavaScript library. You need to add the the jQueryUI js dependency and the jQuery js dependency (please note the https source).

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<button id="openDialogBtn">Click to open the dialog</button>
<div id="dialog" title="I'm the dialog title" hidden="hidden">I'm the dialog body</div>

<script>
$("#dialog").dialog({
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "clip",
        duration: 200
    },
    hide: {
        effect: "clip",
        duration: 200
    }
});

$("#openDialogBtn").click(function() {
    $("#dialog").dialog("open");
});
</script>

Solution 3:[3]

Add this in the your html file :

<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"> </script>

Solution 4:[4]

Instead of following

        var box = $("#wait").dialog({
            autoOpen: false,
            //height: 150,
            //weight: 50,
            resizable: false,
            modal: true
        }).parent().find('.ui-dialog-titlebar').hide();
        $(document).ajaxStart(function(){
            $("#wait").dialog('open');
        });
        $(document).ajaxComplete(function(){
            $("#wait").dialog('close');    
        });

I used below code. It worked.

$(function () {

        var box = $("#wait").dialog({
            autoOpen: false,
            //height: 150,
            //weight: 50,
            resizable: false,
            modal: true
        }).parent().find('.ui-dialog-titlebar').hide();
        $(document).ajaxStart(function(){
            $('#wait').load(this.href, function () {
                $(this).dialog('open');
            });
            return false;  
        });
        $(document).ajaxComplete(function(){
            $('#wait').load(this.href, function () {
                $(this).dialog('close');
            });
            return false;
        });
    });

Try this code, tested on my setup. Working properly.

Solution 5:[5]

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>

<div id="bilal" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>

<script>

  $( function() {
    $( "#bilal" ).dialog({
    autoOpen: true,
  minWidth: 600,
  show: {
    effect: "clip",
    duration: 200
  },
  hide: {
    effect: "clip",
    duration: 200
  }
    });
  } );

</script>

Try this code, tested on my setup. Working fine. Thanks

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 t.niese
Solution 2
Solution 3
Solution 4 user2068161
Solution 5

Related Questions