Unable to create a JQuery Dialog

Question

I'm trying to get a JQuery dialog to appear and immediately got the error $(...).dialog() doesn't exist. My googling has revealed that this is usually caused by loading 2 different JQuery libraries but the only script tags in my file are for JQuery and Twitter Bootstrap. Here's my code (including my dialog code adapted from How to implement "confirmation" dialog in Jquery UI dialog?)..

<script src="jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
...

<script>
$(function(){
$("#dialog").dialog({
    autoOpen: false,
    modal: true
});
$(".deleteLink").click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
        buttons : {
            "Yes" : function(){
                window.location.replace(targetUrl);
            },
            "No" : function(){
                $(this).dialog("close");
            }
        }
    });
});
});
</script>

Is there any other reason that I might be getting this error besides loading multiple libraries or does bootstrap maybe provide interference of some kind?

score 0 · Accepted Answer · answered Jul 16 '14 at 15:47

You are attempting to use the dialog() method and properties of jQueryUI, yet you have included the Bootstrap library. To use the Bootstrap dialog, the method is called modal().

Bootstrap Modal docs

Note that the properties are completely different. If you want to use the jQuery UI dialog() method, you would need to include the jQueryUI library, however be aware that this sometimes causes incompatibilities with Bootstrap, in both the JS and CSS.

Unable to create a JQuery Dialog

1 Answers1