I have table in my twig template generated dynamically:
{% for a in abc %}
<tr>
<td>
{{ a.key }}
</td>
<td>
{{ a.value }}
</td>
<td class="td-actions">
<button id='EditSave' data-text="Save" data-id="{{ a.id }}">Edit</button>
<button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
</td>
</tr>
{% endfor %}
I made my js function that will change attribute on click.
I am new in js and what I want to accomplish further is that on specific row 'Edit' click these two field become editable.
I know how to implement ajax but don't know how to access is with twig and jquery.
My func:
$(document).ready(function(){
//getting id of specific column
var id = $(this).data('id');
$("#EditSave").click(function(){
var btnText = $(this).text();
if(btnText === 'Edit')
{
$(this).text('Save');
$('#Cancel').show();
}
else
{
$(this).text('Edit');
$('#Cancel').hide();
}
});
$('#Cancel').click(function(){
$(this).hide();
$('#EditSave').text('Edit');
});
});
You need to use class
selector instead of id
because here you have mutliple trs
.Also, you can change your html like below:
{% for a in abc %}
<tr>
<td>
<!--added here span and input with values-->
<span> {{ a.key }}</span><input type="text" class="key" value="{{ a.key }}">
</td>
<td>
<span>{{ a.value }}</span><input type="text" class="value" value="{{ a.value }}">
</td>
<td class="td-actions">
<!-- change here class-->
<button class='EditSave' data-text="Save" data-id="{{ a.id }}">Edit</button>
<button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
</td>
</tr>
{% endfor %}
Now, onclick of EditSave
you check use $(this).closest("tr")
to get current row tr and hide the spans
and show input-box and if changes made then you just need to get the values from input-boxes and set them to span and make ajax call with required datas.
Demo Code :
$(document).ready(function() { $("#mytable input").hide()//hide input from table $(".EditSave").click(function() { var selector = $(this).closest("tr") var id = $(this).data('id'); var btnText = $(this).text(); if (btnText === 'Edit') { $(this).text('Save'); $(this).next("button").show(); //hide selector.find("td span").hide() //span hide selector.find("td input").show() //show inputs } else { $(this).text('Edit'); $(this).next("button").hide(); selector.find("td span").show() selector.find("td input").hide() //get values from input box which is edited var key = selector.find(".key").val(); var value = selector.find(".value").val() //your ajax call put here to send both value and id as well //put updated values in span again add this inside success fn of ajax call selector.find(" td:eq(0) span").text(key) selector.find(" td:eq(1) span").text(value) } }); $('.Cancel').click(function() { $(this).hide(); $(this).prev(".EditSave").text('Edit'); $(this).closest("tr").find("td span").show() $(this).closest("tr").find("td input").hide() }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable"> <tr> <td> <span> A</span><input type="text" class="key" value="A"> </td> <td> <span> B </span><input type="text" class="value" value="B"> </td> <td class="td-actions"> <button class='EditSave' data-text="Save" data-id="A">Edit</button> <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button> </td> </tr> <tr> <td> <span>B </span><input type="text" class="key" value="B"> </td> <td> <span> D </span><input type="text" class="value" value="D"> </td> <td class="td-actions"> <button class='EditSave' data-text="Save" data-id="D">Edit</button> <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button> </td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.