jQuery-ui dialog don't show on click event

Question

My jQuery-ui dialog don't show when clicking on a submit button

html :

<input id="pdfsub" type="button" name="pdfsub" value="PDF">

Javascript

 $(document).ready(function() {

    $("#PDFdialog").dialog({
        width: 500, autoOpen: false, resizable: false, draggable: false,
        modal: false,
        title: "pdf",
        buttons: [
        {
            text: "Annuler",
            click: function() {
                $( this ).dialog( "close" );
            }
        }]
    });

    $("#pdfsub").click(function(){
        $("#PDFdialog").dialog("open");
        alert("btn");
    });
});

it show me my alert box but not the dialog , did I make a mistake somewhere ? also my jQuery and jQuery-ui libs are working (have the same in my "connexion" page with same dialog and it's working)

EDIT :

There are my libs

<script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script> 
<script src="/jquery-ui-1.12.1/jquery-ui.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

You are applying dialog function to a div that does not exist in your HTML structure and you don't create it in javascript/jquery either.

So you must have an element with that id inside your html so you can call that dialog on it

As you can see in the example on jQueryUI site https://jqueryui.com/dialog/

 $(document).ready(function() { $("#PDFdialog").dialog({ width: 500, autoOpen: false, resizable: false, draggable: false, modal: false, title: "pdf", buttons: [ { text: "Annuler", click: function() { $( this ).dialog( "close" ); } }] }); $("#pdfsub").click(function(){ $("#PDFdialog").dialog("open"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="pdfsub" type="button" name="pdfsub" value="PDF"> <div id="PDFdialog"> </div>