Question

I have the following code to launch a dilog, do ajax and populate it with the response. How can I modify the code to make sure the “OK” button is displayed only after successful ajax response?

Thanks

    function saveChangesDialog(btnToClick,formToPost,formAction,dialogtitleText)
    {
     $(document).ready(function() {
            // dialog prepare function
                    $('#generic_dialog').dialog({
                        autoOpen: false,
                        width: 400,
                        modal: true,
                        bgiframe: true,
                        title: dialogtitleText,
                        closeOnEscape: false,
                        open: function(event, ui) 
                         { 
                            $(".ui-dialog-titlebar-close").hide();
                         },
                        resizable: false,
                            buttons: {
                                    Ok: function() {
                                            $(this).dialog('close');
                                    }
                            }
                    });

            // dialog content polling
            $.fetch_dialog_content = function() {
                $('#generic_dialog').dialog('open');
                $.ajax({
                    type: 'POST',
                    url: formAction,
                    data:  $("#"+ formToPost).serialize(),
                    cache: false,
                    dataType: "html",
                    success: function(html_input){                    
                        $('#dialogText-genericdialog').html(html_input);                    
                    }
                });
            }
            // "click" event registration
            $('#'+btnToClick).click(function(){
                $.fetch_dialog_content();
            });
     });
    }

Answer 1

After the ajax call

$('#generic_dialog').dialog('option','buttons',{
  'OK': function(){ $(this).dialog('close');}
});