jquery dialog title dynamically

Viewed 38072

how to change jquery dialog title dynamically here is the code we are using this will show normal title but we have to update depending on the code.

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
  $( "#dialog" ).dialog();
 });
  </script>
 </head>
<body>

 <div id="dialog" title="Basic dialog">
     <p>This is the default dialog which is useful for displaying information.</p>
   </div>


   </body>
   </html>
5 Answers

I agree with the existing answers just if you would like to add additional properties like height, weight and how the model should behave and where to call another function see below code:

     $( "#dialog-confirm" ).dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    title: "Delete Personnel Record",
      buttons: {

        "Delete": function() {
         //-----------Calling function once Delete button is clicked----//
            RemovePersonal(PID);

          $( this ).dialog( "close" );

        },

        Cancel: function() {

          $( this ).dialog( "close" );

        }

      }

});

function RemovePersonal(id)
{
    //--------Call your function to remove record------//
    //-----------Or any other logic you want to implement---//
}

Like Jquery ui exemple, width var "dialog" you can use directly :

dialog.dialog({ title: "your title"});

Not need to use id div :)

Related