Альтернатива для длинных строк вставки

134

03 ноября 2019, 05:20

функция success с ajax запроса на create. Ну и соответственно добавляет элемент. Можно и нужно ли делать этот код как-то правильнее, или все именно так и пишут????

success: function (res) {
                $("#productTbody").append("<tr><td style='display:none' class='product_id'>" + res.id + "</td><td><div class='view-row'><div>" + res.title + "</div></div><div class='update-row'><input type='text' class='btn-block form-control'id='inputUpdateTitleProduct'></div></td><td class='text-center'><div class='view-row'><a class='btn btn-warning btnProductUpdate'>Изменить</a><a class='btn btn-danger btnProductDelete'>Удалить</a></div><div class='update-row' style='display:none'><a class='btn btn-success btnProductSave'>Сохранить</a><a class='btn btn-danger btnProductCancel'>Отмена</a></div></td></tr>");
        }

UPDATE

Одно исправил, вот код:

// Клик "добавить"
    $(".btnProductCreate").click(function () {
        var rowTemplate = `
        <tr>
            <td style="display:none" class="product_id"></td>
            <td>
                <div class="view-row">
                    <div class="product_title"></div>
                </div>
                <div class="update-row">
                    <input type="text" class="btn-block form-control inputUpdateTitleProduct">
                </div>
            </td>
            <td class="text-center">
                <div class="view-row">
                    <a class="btn btn-warning btnProductUpdate">Изменить</a>
                    <a class="btn btn-danger btnProductDelete">Удалить</a>
                </div>
                <div class="update-row" style="display:none">
                    <a class="btn btn-success btnProductSave">Сохранить</a>
                    <a class="btn btn-danger btnProductCancel">Отмена</a>
                </div>
            </td>
        </tr>
        `;
        data = JSON.stringify({ Title: $("#inputProductTitle").val() });
        $.ajax({
            type: "POST",
            url: domen + "Product/Create",
            data: data,
            crossDomain: true,
            contentType: "application/json; charset=utf-8",
            processData: false,
            success: function (res) {
                var $row = $(rowTemplate);
                $row.find(".product_id").text(res.id);
                $row.find(".product_title").text(res.title);
                $("#productTbody").append($row);
            }
        });
    });

как видно из кода - добавляется кнопка с текстом Изменить и классом btnProductUpdate

Проблема в том что не работает обработчик ее

// Клик "изменить"
    $(".btnProductUpdate").on('click', function () {
        alert(123);
        let row = $(this).parent().parent().parent();
        row.find(".view-row").css("display", "none");
        row.find(".update-row").css("display", "block");
    });

По нажатию 123 не выводится (хотя я создаю в коде тестовую кнопку и она работает по аналогии)

Answer 1

success: function (res) {
  var rowTemplate = `<tr>
    <td style='display:none' class='product_id'></td>
    <td class="product_title">
      <div class='view-row'><div></div></div>
      <div class='update-row'>
        <input type='text' class='btn-block form-control' id='inputUpdateTitleProduct'>
      </div>
    </td>
    <td class='text-center'>
      <div class='view-row'>
        <a class='btn btn-warning btnProductUpdate'>Изменить</a>
        <a class='btn btn-danger btnProductDelete'>Удалить</a>
      </div>
      <div class='update-row' style='display:none'>
        <a class='btn btn-success btnProductSave'>Сохранить</a>
        <a class='btn btn-danger btnProductCancel'>Отмена</a>
      </div>
    </td>
  </tr>`;
  var $row = $(rowTemplate);
  $row.find(".product_id").text(res.id);
  $row.find(".product_title .view-row div").text(res.title);
  $("#productTbody").append($row);
}

Делегирование обработки событий:

$("#productTbody").on('click', ".btnProductUpdate", function () {
  ...

Обработчик навешивается на существующий элемент с id="productTbody".

Answer 2

Главная ошибка этого кода в том, что данные из res подставляются в html без экранирования. Можно либо сделать специальную функцию для экранирования, либо просто сразу добавлять содержимое через .text().

Что касается длинной строки - можно разбить её на части, но в принципе можно оставить и так.

И ещё альтернативный вариант - создавать явно все элементы, а не использовать строку. Насколько я представляю, в современных браузерах это проблем не вызовет, а вот в старых IE может и тормозить, причём значительно:

function show(res) {
  $("#productTbody").append(
    $("<tr>").html([
      $("<td>", { class: 'product_id', style: "display: none" }).text(res.id),
      $("<td>").html([
        $("<div>", { class: 'view-row' }).html(
          $("<div>").text(res.title)
        ),
        $("<div>", { class: 'update-row' }).html(
          $("<input>", { type: 'text', id: 'inputUpdateTitleProduct', class: 'btn-block form-control' })
        ),
        $("<div>", { class: 'view-row' }).html([
          $("<a>", { class: 'btn btn-warning btnProductUpdate' }).text("Изменить"),
          $("<a>", { class: 'btn btn-danger btnProductDelete' }).text("Удалить")
        ]),
        $("<div>", { class: 'update-row', style: 'display: none' }).html([
          $("<a>", { class: 'btn btn-success btnProductSave' }).text("Сохранить"),
          $("<a>", { class: 'btn btn-danger btnProductCancel' }).text("Отмена")
        ]),
      ])
    ])
  );
}