Alternative for long insert lines

Question

success function with ajax request to create . Well and accordingly adds an element. Is it possible and necessary to do this code somehow more correctly, or is this how they all write ????

 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

One fix, here's the code:

 // Клик "добавить" $(".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); } }); });

as can be seen from the code - a button is added with the text Изменить and the class btnProductUpdate

The problem is that the handler does not work

 // Клик "изменить" $(".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"); });

By pressing 123 it is not displayed (although I create a test button in the code and it works by analogy)

Accepted Answer · 2019-03-01T18:55:11

 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); }

Delegating event handling:

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

The handler is hung on an existing element with id="productTbody" .

I, besides, consider the correct installation of the res.id and res.title through calls to $(...).text(...) .
Thanks for the answer, if it’s not difficult, tell me more on the question further, if it’s not difficult, accomplish your goal when I update

Qwertiy ♦ Qwertiy 76.7k 17 golden marks 74 silver marks 203 bronze marks · Answer 2 · 2019-03-01T19:43:14

The main error of this code is that the data from res substituted into html without escaping. You can either make a special function for escaping, or simply add the contents immediately via .text() .

As for the long line - you can break it apart, but in principle you can leave it like that.

And another alternative is to explicitly create all elements, and not to use a string. As far as I can imagine, in modern browsers this will not cause problems, but in old IE it can slow down, and significantly:

 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("Отмена") ]), ]) ]) ); }

And I’m confused by the use of id in this code. It is very similar that on the page there will be many elements with identical id.

As I understood from your answer, in principle, and my version is also normal, and then everyone edits for their own project
@ VitaliyShebanits, no, your variant is not normal - reread the first paragraph of the answer.
Thank you very much for the detailed response, but I found it necessary to mark the answer of another participant, I think you will not be offended, you +1.

Alternative for long insert lines

2 answers 2

More articles: