CODEWITHSUNDEEP
javascriptjquerydialog
Omar Taha
Omar Taha

Reputation: 265

Jquery dialog dialog is not a function

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

Upvotes: 1

Views: 5225

Answers (2)

Omar Taha
Omar Taha

Reputation: 265

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.

Upvotes: 6

Ovais
Ovais

Reputation: 384

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

Upvotes: 0

Related Questions