JQueryUI Dialog not working in JS File

Question

I have JQuery code which makes Ajax call, In order to reuse same code, I have put my code in .JS File.

Here is the scenario.

1) I have hyperlink control and div control in my aspx page. div control is for displaying JQueryUI dialog message.

2) I have JS file which receives reference of hyperlink object and div object

3) In JS file i am insert record through JQuery Ajax, it is working good, but problem is it is not displaying JQuery UI Dialog

Code for that

In Aspx File

<asp:HyperLink ID="hlInsertRecord" runat="server" Text="Insert Record" Font-Bold="true" />

<div id="pnlInsertRecordMsg" title="Insert Record"></div>

In Aspx.cs File (Binding reference of javascript function)

string strInsertRecord = "InsertRecord(" + hlInsertRecord.ClientID + ",pnlInsertRecordMsg);return false;";
            hlInsertRecord.Attributes.Add("onclick", strInsertRecord);

Please note: autoOpen:true and i have check my code with uncommenting open dialog In .JS File

function InsertRecord(hlInsertRecord, pnlInsertRecordMsg) {
    $(document).ready(function () {

        //--------Message Box Start-------------------
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 900;
        $(function () {
            $(pnlInsertRecordMsg.id).dialog({
                autoOpen: true,
                resizable: false,
                show: "highlight",
                hide: "fade"
            });

            //            $(hlInsertRecord.id).click(function () {
            //                $(pnlInsertRecordMsg.id).dialog("open");
            //                return false;
            //            });
        });
        //--------Message Box End-------------------



        pnlInsertRecordMsg.innerHTML = "Please wait, we are sending your request...";
        $.ajax({
            type: "POST",
            url: hlInsertRecord.href,
            success: OnInsertRecordSuccess,
            error: OnInsertRecordFail
        });
        //});

        function OnInsertRecordSuccess(response) {
            hlInsertRecord.innerHTML = "Record Inserted";
            pnlInsertRecordMsg.innerHTML = response;
            setTimeout(function () { $(pnlInsertRecordMsg.id).dialog("close"); }, 2000);
        }

        function OnInsertRecordFail(response) {
            pnlInsertRecordMsg.innerHTML = "Oops we are unable to send your request.  Please try again!!!";
            setTimeout(function () { $(pnlInsertRecordMsg.id).dialog("close"); }, 10000);
        }

    });
}

Answer 1

I am not getting why you use this $(pnlInsertRecordMsg.id)
I think here should $('#pnlInsertRecordMsg').dialog
If i am wrong then correct me.