jQuery UI dialog button text as a variable

Question

Can anyone tell me how can i use a variable for button text in jQuery UI dialog? I want to make a dynamic button name.

Answer 1

This can be done in following steps :

1. In JavaScript you can create Array of Buttons.
2. Set buttons property to the Array of Buttons.

Following Example explains above steps.

1. Two buttons are defined in btnArray as follows;

 var btnArray = [
    { text: "Add Entry",
      click: function(){
        this.retVal = true;
        addRowIntoTemplateManifest();
        $(this).dialog('close');
      }
    },
    { text: "Cancel",
      click: function(){
        this.retVal = false;
        $(this).dialog('close');
      }
    }
  ];

A custom function displayConfirmDialog_Dynamic() is written that accpets, Dialog header, Dialog Text, button Array. The call to this function is as follows:

displayConfirmDialog_Dynamic("Add Template Manifest Entry?", "Do you want to add following Cuboid Entry to Template Manifest?\nCuboidNane: '" + json.cuboidName + "' CuboidId: " + json.cuboidId + "\non Server:"
+ json.serverUrl , btnArray );

The function displayConfirmDialog_Dynamic is as follows:

//Confirmation dialog Dynamic Buttons
function displayConfirmDialog_Dynamic(dlgTitle, message, btnArray)
{
    var retVal;
    $("div#dialog-confirm").find("p").html(message);

    var confirmDlg = $( "#dialog-confirm" ).dialog({
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          title: dlgTitle,
          buttons: btnArray,
          show:{effect:'scale', duration: 700},
          hide:{effect:'explode', duration: 700}  
    });

    confirmDlg.dialog('option', 'buttons', btnArray);
    confirmDlg.prev(".ui-dialog-titlebar").css({"background":"#ffc000", "color":"#ffffff", "font-size":"13px", "font-weight":"normal"}) ;
    confirmDlg.dialog("open");  
}

The Confirm Dialog Template is defined as DIV tag as follows. Note that the title and contents of

tag are changed dynamically by JavaScript code.

  
These items will be permanently deleted and cannot be recovered. Are you sure?

The Screenshot of dialog box displayed by above code is shown below: