Jquery dialog dialog is not a function

Question

I'm trying to use jquery dialog in my application, but it won't work, it says TypeError: $(...).dialog is not a function from mozilla console, this is my code

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>



<div id="dialog-message" title="Important information">
    <div style="margin-left: 23px;">
        <p>
            We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
        </p></div>
</div>

<script >
    $(function() {

        $("#dialog-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            position: ['center', 'center'],
            width: 500,
            height: 250,
            dialogClass: 'ui-dialog-osx',
            buttons: {
                "I've read and understand this": function() {
                    $(this).dialog("close");
                }
            }
        });

    });
</script>

I'm working on an app which uses other javascript libraries, and to avoid the conflict, I put my dialog script after I use jquery files, but still the same problem. What might be the problem??

1) *search* for the error message 2) *load* the plugin correctly (it probably can't load said script resource; check the network activity) — user2864740, Aug 31 '14 at 09:06
http://stackoverflow.com/questions/3791781/jquery-ui-dialog-is-not-a-function-error , http://stackoverflow.com/questions/24402531/whats-wrong-with-this-code-dialog-is-not-a-function , http://stackoverflow.com/questions/6710041/elrte-dialog-is-not-a-function-error — user2864740, Aug 31 '14 at 09:07

score 6 · Accepted Answer · edited Jan 06 '22 at 13:34

Since most of javascript libraries are using the dollar sign `$ to operate their functions, including different javascript make conflicts, so to avoid this issue, and to solve the problem, I used this jquery function, and it works

     var $j = jQuery.noConflict();

And then use $j instead of $ like this:

     $j(function() {

    $j("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'center'],
        width: 500,
        height: 250,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "I've read and understand this": function() {
                $j(this).dialog("close");
            }
        }
    });

});

And it works with no errors.

score 0 · Answer 2 · answered Aug 31 '14 at 09:10

0

Please confirm that:

jquery-ui.js is being loaded by running application through webserver (http). In Firefox's native debugger under tab 'Network' or in Firebug under 'net'.
and verify that jquery-ui.js has 'dialog' module

answered Aug 31 '14 at 09:10

Ovais

374
2
7

I tried to use this script from online, and the same problem, I used my code in seprate page and it works, but when using it in my application it won'r work. – Omar Taha Aug 31 '14 at 09:17
What all other JS libraries are being used in application? Please share URL if it is hosted, otherwise it is difficult to investigate on presumptions only. – Ovais Sep 01 '14 at 05:27

Jquery dialog dialog is not a function

2 Answers2

Linked