Многие кнопки появляются в моем диалоговом окне подтверждения

Question

Я хочу сделать диалог подтверждения перед удалением некоторых данных. Но есть так много кнопок, которые выглядят так:

Это мой код:

<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}');"><img src="/sbgss/images/delete.png"/></t:pagelink>

Это мой jquery:

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;

с этим:

<div id="deleteConfirmation" title="Delete Ag Mapping - Confirmation" style="display:none">
        <table>
            <tr><td colspan="3">${message:areyousuretoremovethisdata}</td></tr>
            <tr>
                <td>Aggregator</td>
                <td style="width:10px">:</td>
                <td><span id="agName"></span></td>
            </tr>
            <tr>
                <td>Product Code</td>
                <td>:</td>
                <td><span id="productCode"></span></td>
            </tr>
            <tr>
                <td>Product Name</td>
                <td>:</td>
                <td><span id="productNameBox"></span></td>
            </tr>
        </table>
    </div>

Как это исправить?

Answer 1

Мне не удалось воспроизвести проблему, как вы ее описали. Я использовал следующий фрагмент кода теста.

$(function($j) {
  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;
  }

  $j(".delete").click(function() {
    deleteConfirmation(this, $(this).data("ag-name"), $(this).data("product-code"), $(this).data("product-name-box"));
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a href="#" class="delete" data-ag-name="PT Sepulsa" data-product-code="80" data-product-name-box="PKLN Postpaid">
  <img src="/sbgss/images/delete.png" /> Delete
</a>
<div id="deleteConfirmation" title="Delete Ag Mapping - Confirmation" style="display: none;">
  <table>
    <tr>
      <td colspan="3">Are you sure to remove this data?</td>
    </tr>
    <tr>
      <td>Aggregator</td>
      <td style="width:10px">:</td>
      <td><span id="agName"></span></td>
    </tr>
    <tr>
      <td>Product Code</td>
      <td>:</td>
      <td><span id="productCode"></span></td>
    </tr>
    <tr>
      <td>Product Name</td>
      <td>:</td>
      <td><span id="productNameBox"></span></td>
    </tr>
  </table>
</div>

Это говорит о том, что что-то еще модифицирует или добавляет код в ваш скрипт или ваш диалог HTML. Я бы проверил вашу консоль и все библиотеки, добавленные на вашу страницу.