I am trying to call开发者_运维知识库 a function from Jquery dialog box Ok button.

I have tried these two methods,

1

this.commentDialog = function(){
        $("#commentDialog").dialog( "destroy" );
        html = "<div id='cmtDialog'>";
        html += "Comment<textarea id='comment'></textarea></div>";
        $("#commentDialog").html(html);
        $("#commentDialog").dialog({
            title:"Search Result",
            bgiframe: true,
            height: 'auto',
            width: 'auto',
            modal: true,autoOpen: true,
            buttons: { "Ok": function() { this.saveComment();}}
            });

2

this.commentDialog = function(){
        $("#commentDialog").dialog( "destroy" );
        html = "<div id='cmtDialog'>";
        html += "Comment<textarea id='comment'></textarea></div>";
        $("#commentDialog").html(html);
        $("#commentDialog").dialog({
            title:"Search Result",
            bgiframe: true,
            height: 'auto',
            width: 'auto',
            modal: true,autoOpen: true,
            buttons: { "Ok": function() { saveComment();}}
            });

Both not working!

How shall i do it with jquery!!

Thanks!!!

this.commentDialog = function(){
        // save a reference of "this" and use it later.
        var me = this;

        $("#commentDialog").dialog( "destroy" );
        html = "<div id='cmtDialog'>";
        html += "Comment<textarea id='comment'></textarea></div>";
        $("#commentDialog").html(html);
        $("#commentDialog").dialog({
            title:"Search Result",
            bgiframe: true,
            height: 'auto',
            width: 'auto',
            modal: true,autoOpen: true,
            buttons: { "Ok": function() { 
                 // use me instead of this, as this now refers to the function.
                 me.saveComment();}}
            });

No need to have another reference here, just reference the function directly as the one "Ok" is bound to, like this:

this.commentDialog = function(){
    $("#commentDialog").dialog( "destroy" );
    html = "<div id='cmtDialog'>";
    html += "Comment<textarea id='comment'></textarea></div>";
    $("#commentDialog").html(html);
    $("#commentDialog").dialog({
        title:"Search Result",
        bgiframe: true,
        height: 'auto',
        width: 'auto',
        modal: true,autoOpen: true,
        buttons: { "Ok": this.saveComment }
    });
};

This way you're not inside another anonymous function where this is a different context.

Inside the Ok callback, this isn't what you think it is.

You need to save a reference to the original this.

this.commentDialog = function() {
        var html = "<div id='cmtDialog'>Comment<textarea id='comment'></textarea></div>";
        var me = this;          //Save the original this
        $("#commentDialog")
            .dialog( "destroy" )
            .html(html);
            .dialog({
                title:"Search Result",
                bgiframe: true,
                height: 'auto',
                width: 'auto',
                modal: true,autoOpen: true,
                buttons: { "Ok": function() { me.saveComment(); } }
            });
};