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??

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??

• javascript
• jquery
• dialog

Share Improve this question Follow asked Aug 31, 2014 at 9:00 Omar TahaOmar Taha 26522 silver badges1414 bronze badges 2

• 1) search for the error message 2) load the plugin correctly (it probably can't load said script resource; check the network activity) – user2864740 Commented Aug 31, 2014 at 9:06
• stackoverflow./questions/3791781/… , stackoverflow./questions/24402531/… , stackoverflow./questions/6710041/… – user2864740 Commented Aug 31, 2014 at 9:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

Please confirm that:

1. 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'.

2. and verify that jquery-ui.js has 'dialog' module