jQuery UI Dialog buttons not visible

Having the following code:

$('#feedback_dialog_container').dialog({
        modal: true,
        closeOnEscape: false,
        title: "Title",
        height: 650,
        width: 600,
        buttons: [{
            text: "Send",
            click: function() {
                // ...
            }
        }]
});

The button is not visible in the dialog. Any tips or hints, do I miss something?

PS: I tried this example from @palmplam too, not working either:

$('#feedback_dialog_container').dialog({
    modal: true,
    closeOnEscape: false,
    title: "Title",
    height: 650,
    width: 600,
    buttons: {"Send" : function() {
            // ...
        }
    }
});

Answers


Try to add buttons like this :

buttons : {text:function},{secondtext:secondfunction},...

With your code, it's like this :

$('#feedback_dialog_container').dialog({
    modal: true,
    closeOnEscape: false,
    title: "Title",
    height: 650,
    width: 600,
    buttons: {"Send" : function() {
            // ...
        }
    }
});

Or perhaps you could add buttons after the dialog was init like this :

$('#feedback_dialog_container').dialog('option', 
                                       'buttons', 
                                       {"Send" : function() {
                                           // ...
                                       }});

It's been few months and you've probably moved on by now, but FWIW:

I am no expert on jQuery UI internals, but I have been struggling with buttons not displaying for longer than I care to admit, a problem that arose after I upgraded from 1.8.23 to 1.10.0 (then rolled back to 1.9.2, but the problem persisted). I believe I now have a clue.

You should initialize your dialog once and only once. If you want to re-use, then you should either (1) initialize with autoOpen set to false; when you want to (re-)open, reset options if needed and call "open"; or (2) call "destroy" on your dialog so you can reinitialize it if/when you need it again, without getting into trouble.

So, it looks like I was doing it "wrong" all along, but getting away with it until version > 1.8.23.

Hope this helps.


you are missing this 'jquery-1.8.2.min.js'. Just add this to your code.


$('#feedback_dialog_container').dialog({    
    height:auto,                                
    width:auto,
    modal:true,
    buttons:{"Send":send}//function call send
});
function send()  {
    //function code here
}                       

Need Your Help

Gradle keep on asking update and downgrade?

gradle android-studio

I keep on getting "Gradle Sync error" so i checked had version 1.8. updated to 1.10, then it said i need 1.9, so i downgraded to 1.9 it said i need 1.8, when i downgrade to 1.8 it says i need 1.9. ...

Formtastic radio button issue

ruby-on-rails formtastic

I have the following code in my views