Sunday, March 31, 2013

Learnings of the jQuery Basic Modal Dialog


1. Following three files are required for correct working of jQuery Modal Dialog :
jquery-1.9.1.js
jquery-ui.css
jquery-ui.js

2. Do not rename any of the above files while downloading ( especially the last two files), because they may be refering each other by exact names and renaming them causes the app  not to work.
(Update : This may not be true, please refer to another post about jQuery modal on this date itself. http://rschandrastechblog.blogspot.in/2013/03/jquery-learnings-sequence-of-including.html)

3. A direct call to .dialog will not work, it must be wrapped in some jQuery func, at least $(function(){});

e.g the following will not work :

<head runat="server">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">
     $("#dlg").dialog();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dlg">
    </div>
    </form>
</body>

But the following will work, because $("dlg).dialog is wrapped in a jQuery function() :

No comments:

Post a Comment