Home/ Questions/Q 8304011
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T17:42:08+00:00

TypeError: $().html(This dialog will show every time!).dialog is not a function This is the

  • 0

TypeError: $(“”).html(“This dialog will show every time!”).dialog is not a function

This is the error I’m getting. The page is loaded using load() in a div on the index page. I’ve included the necessary jquery stuff on the index page (which I’d prefer to keep that way), the loaded page, and both, and it still does this. I’m not sure exactly what’s up. I know it’s more difficult working with a load() page instead of just the page itself, but even going to the page home.php, it still says it. Below is a link to the load page, if you want to see the index just take out home.php in the address.

The page that is being loaded

This is the function I’m using:

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>

    <script type="text/javascript">
    function readMore(id,title,cat,desc,post,auth) {
        //alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth);
        var $dialog = $('<div></div>').html('This dialog will show every time!').dialog({autoOpen: false,title: 'Basic Dialog'});
        $dialog.dialog('open');
        $dialog.title = title;
        $dialog.html(desc);
    }
    </script>

As it is right now, all the includes for dialog are on the load page, and not the index page, but like I said, I’ve tried one or the other or both, to no avail. Also alert works fine and is passing everything correctly and is getting called when I want it to. All the paths to the jquery includes are correct.

And if it helps narrow it down for some reason, I’m getting theres errors on page load too:
TypeError: $.widget is not a function
[Break On This Error] 

_uiHash: function(event) {

jquery…able.js (line 504)

TypeError: $.widget is not a function
[Break On This Error] 

_mouseCapture: function(event) { return true; }

jquery…ouse.js (line 162)

TypeError: $.widget is not a function
[Break On This Error] 

ui: function() {
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You also need:

    • jquery.ui.button.js
    • jquery.ui.dialog.js

    Also put mouse before draggable, as commented above by Musa, it’s important.

    summary:

    1. jquery.ui.core.js
    2. jquery.ui.widget.js
    3. jquery.ui.mouse.js
    4. jquery.ui.position.js
    5. jquery.ui.draggable.js
    6. jquery.ui.resizable.js
    7. jquery.ui.button.js
    8. jquery.ui.dialog.js

    But instead of loading all the single files I would suggest to load the complete UI from a CDN. 

     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    • 0