Question

Take a look at this jsfiddle. I’ve used the jQuery dialogs before and this is the exact same code that I’m using in another project. The only difference is that I’m getting the jQuery libraries from google instead of hosting them myself:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js">  </script>


<div id="dialog-confirm" title="Confirmation Required" > 
            <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you want to delete?</p> 
        </div>
<a href="http://google.com" class="deleteLink">Test Dialog</test>

Then I have a script like this:

 $(document).ready( function () {
$("#dialog-confirm").dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  height:180,
});

$(".deleteLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");

$("#dialog-confirm").dialog({
    buttons : {
    "Confirm" : function() {
        window.location.href = targetUrl;
    },
    "Cancel" : function() {
        $(this).dialog("close");
    }
    }
});

$("#dialog-confirm").dialog("open");
});

} );

The dialog shows up as expected but the buttons (Confirm/Cancel) do not show up. I think I’m loading all the relevant jQuery libraries and the CSS file. Is there something else I’m missing?

I’ve used FireBug to verify that it does call the button setting code, but still no buttons.

Answer 1

the reason your code may not be working now could be due to you using an older version of jQuery or jQuery UI either way here is a possible fix:

$(document).ready( function () {
var targetUrl;
$("#dialog-confirm").dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  height:180,
  buttons: {
    "Confirm" : function() {
        window.location.href = targetUrl;
    },
    "Cancel" : function() {
        $(this).dialog("close");
    }
    }
});

$(".deleteLink").click(function(e) {
e.preventDefault();
targetUrl = $(this).attr("href")    
$("#dialog-confirm").dialog("open");
});
});

the buttons should be assigned when you create the .dialog function, to still be able to pass the URL when the button is clicked I created the targetURL globally, then you can assign it in the click function and still access it in the dialog function

**sorry forgot to move the link to make it work 🙂 should be fine now, also here is a link to the fiddle, the linking action doesnt seem to work in fiddle but I tested it with an alert and it is passing ok: http://jsfiddle.net/GordnFreeman/wbGax/