title: Many buttons appear on my confirmation dialog
body: <p>I want to make confirmation dialog before delete some data. But there are so many buttons appear like this:</p>
  
  <p><a href="https://i.stack.imgur.com/sGwvV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGwvV.jpg" alt="Confirmation Dialog"></a></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;t:pagelink page="SUM01005e" context="[clientProduct.client.clientId, clientProduct.aggregator.aggregatorId, clientProduct.postpaidProduct.billerCode]" onclick="return deleteConfirmation(this, '${clientProduct.aggregator.name}','${clientProduct.postpaidProduct.billerCode}','${clientProduct.productName}');"&gt;&lt;img src="/sbgss/images/delete.png"/&gt;&lt;/t:pagelink&gt;
  </code></pre>
  
  <p>This is my jquery:</p>
  
  <pre><code>function deleteConfirmation(ele, agName, productCode, productNameBox){
  
              $j("#agName").html(agName);
              $j("#productCode").html(productCode);
              $j("#productNameBox").html(productNameBox);
  
              $j("#deleteConfirmation").dialog({
                  buttons:[ 
                      {
                          text: "OK",
                          "class": "button button-pill button-flat-primary button-tiny ui-state-focus",
                          click: function() {
                               window.location = $j(ele).attr("href");
                          }
                      },
                      {
                          text: "Cancel",
                          style: "margin-left:10px",
                          "class": "button button-pill button-flat-primary button-tiny ui-state-focus",
                          click: function() {
                               $j(this).dialog("close");
                          }
                      }
                  ]
              });
  
              return false;
  </code></pre>
  
  <p>with this:</p>
  
  <pre><code>&lt;div id="deleteConfirmation" title="Delete Ag Mapping - Confirmation" style="display:none"&gt;
          &lt;table&gt;
              &lt;tr&gt;&lt;td colspan="3"&gt;${message:areyousuretoremovethisdata}&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Aggregator&lt;/td&gt;
                  &lt;td style="width:10px"&gt;:&lt;/td&gt;
                  &lt;td&gt;&lt;span id="agName"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Product Code&lt;/td&gt;
                  &lt;td&gt;:&lt;/td&gt;
                  &lt;td&gt;&lt;span id="productCode"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Product Name&lt;/td&gt;
                  &lt;td&gt;:&lt;/td&gt;
                  &lt;td&gt;&lt;span id="productNameBox"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How to fix that?</p>