The dialog box does not appear when calling an external js file


I'm having a problem accessing my dialog box when I try calling it on external js file, but when I call it directly inside the page it works fine. Is there a problem with my selector that it cannot find the id of the div element which is suppose to be my dialog box? here' the code inside the external js file.

$(document).ready(function() {
       var hitlistDoc = parent.document.getElementById("hitlist").contentDocument;
       var links=hitlistDoc.getElementsByName('linkComment');
       var i=0;


              $(links[i]).click(function() {

                    $('#dialog').dialog({modal: true, position: [902, 345], width: 400 });



You may be including it wrong. Your js inclusion should be like this

<script src="path/to/jquery.js"></script>
<script src="path/to/jqueryUI.js"></script>
<script src="path/to/your/external/file.js"></script>

Note that the order is crucial.

Hope this helps. Cheers