JQuery Dialog - only load when button click

Question

Using JQuery Dialog http://jqueryui.com/dialog/#modal-confirmation The dialog box appears whenever the page loads I only want it to appear when 'Remove Invoice' is clicked.

i've tried: <input id="RemoveInvoice" type="button" value="Remove Invoice" onclick="ConfirmDeleteInvoice()" />

then putting the actual JS inside a ConfirmDeleteInvoice function:

  function ConfirmDeleteInvoice() {
      //  $(function () { //removed this line and added the above line
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Are you sure you want to delete this invoice": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
    }

ERROR: JavaScript runtime error: 'ConfirmDeleteInvoice' is undefined

Sorry still a beginner at JS so please bear with. Thanks

Answer 1

You've got an extra trailing }); right before your last closing brace, take that out and it'll work.

Also, in my fiddle you'll see I've added the click event in jQuery, as onclick inside HTML is considered bad practice. I did this by adding:

$("#RemoveInvoice").click(ConfirmDeleteInvoice);

See here: http://jsfiddle.net/P4VHw/