CODEWITHSUNDEEP
javascriptjquery
Mattman85208
Mattman85208

Reputation: 2110

jquery how to get this dialog Ok button to work?

The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing. (I'm using jquery 1.9.1)

  function showFollowProjectInDialog(followurl){
      $.ajax({
        url: followurl,
        success: function(data) {
          $("#TFdialog").html(data).dialog({
            resizable: true,
            height: 600,
            width: 700,
            modal:true,
            buttons: {
            Ok: function() {$( "#TFdialog" ).dialog( "close" );}
            },
            }).dialog('open');
        }
      });
    }

I've also tried it without the comma following the button like:

buttons: {
    Ok: function() {$( "#TFdialog" ).dialog( "close" );}
        }
}).dialog('open');

And I've tried these:

buttons: [{
            text: "Ok",
            Click : function () {
                $("#TFdialog").dialog("close");
            }
        }]

and:

buttons: [{
 Ok: function() {
     $("#TFdialog").dialog("close");
 }
}]

and I've tried replacing the "#TFdialog" with 'this' like:

$(this).dialog("close");

Upvotes: 1

Views: 900

Answers (2)

noman tayyab
noman tayyab

Reputation: 365

try doing 

    buttons: [
    {
        text: "Ok",
        click: function() {
          $( this ).dialog( 'close' );
          // your code goes here
        }
      }
    ]

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form

buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }

You can also use the dialog as an object:

var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
            resizable: true,
            autoOpen: false,// added this
            height: 600,
            width: 700,
            modal:true,
            buttons: {
               Ok: function() {
                  myDialog.dialog( "close" );
                  },
              "Close this Soon" : DelayClose,
            }
            });
myDialog.dialog('open');

function DelayClose(){
   setTimeout(function() {
    myDialog.dialog( "close" );
  }, 500 );
}

Example for why to use an object for yours:

var myDialog;
myDialog = $("#TFdialog").dialog({
            resizable: true,
            autoOpen: false,// added this
            height: 600,
            width: 700,
            modal:true,
            buttons: {
               Ok: function() {
                  myDialog.dialog( "close" );
                  }
            }
            });

function showFollowProjectInDialog(followurl){
    $.ajax({
        url: followurl
    }).done(function(data){
        $("#TFdialog").html(data);
        myDialog.dialog('open');
    });
}

Upvotes: 0

Related Questions