Develop Reference

Extracting the column data corresponding to the button which is clicked in the same table row

I am working on deleting functionality. Based on the search the table generates rows along with the delete buttons. when the button is clicked, the show id column value should be extracted from the table column and it should be sent to backend through ajax.
As a first step i am trying to extract show id column value from the same row where the delete button is clicked. but i am facing two issues
When i try to click the delete button, other search button is getting triggered.
I am not able to extract show id column value corresponding to the button click of the same row.
<script>
$(document).ready(function(){
$('#search-movie').on('submit',function (e) {
$.ajax({
type: 'POST',
url: '/search',
data: $('#search-movie').serialize(),
success: function (q) {
var trHTML='';
$.each(q, function (i, userData) {
for(j=0; j<userData.length; j++)
{
trHTML +=
'<tr><td style="padding-right: 10px">'
+ userData[j].showid
+ '</td><td style="padding-right: 10px">'
+ userData[j].typeof
+ '</td><td style="padding-right: 10px">'
+ userData[j].title
+ '</td><td style="padding-right: 10px">'
+ userData[j].directors
+ '</td><td style="padding-right: 10px">'
+ userData[j].cast
+ '</td><td style="padding-right: 10px">'
+ userData[j].country
+ '</td><td style="padding-right: 10px">'
+ userData[j].releaseyear
+ '</td><td style="padding-right: 10px">'
+ userData[j].rating
+ '</td><td style="padding-right: 10px">'
+ userData[j].duration
+ '</td><td style="padding-right: 10px">'
+ userData[j].listedin
+ '</td><td style="padding-right: 10px">'
+ userData[j].description
// + '</td></tr style="padding-right: 10px">'
+ '</td><td style="padding-right: 10px">'
+ '<button id="button2" class="btn btn-info" onClick="clickme()">delete</button>'
+ '</td></tr>'
}
});
$('#table1').append(trHTML);
}
});
e.preventDefault();
});
})
</script>
<script>
function clickme()
{
$(".btn btn-info").click(function() {
var $item = $(this).closest("tr").find(".nr").text();
console.log($item);
$("#table1").append($item);
});
}
</script>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
<button class="btn btn-info btn-md" id="button1" onClick="window.location.reload();">reset</button>
</div>
<table id="table1" name="table1">
<thead>
<tr>
<th style="padding-right: 10px">Show ID</th>
<th style="padding-right: 10px"> Type</th>
<th style="padding-right: 10px">Title</th>
<th style="padding-right: 10px">Director</th>
<th style="padding-right: 10px">Cast</th>
<th style="padding-right: 10px">Country</th>
<th style="padding-right: 10px">Release Year</th>
<th style="padding-right: 10px">Rating</th>
<th style="padding-right: 10px">Duration</th>
<th style="padding-right: 10px">Listed In</th>
<th style="padding-right: 10px">Description</th>
</tr>
</thead>
<tbody>
</table>

Issue 1: This is due to button vs input type='submit'
seems your form submission happening and it goes to search functionality - when you click the delete button.
Use input type=button (Solution1)
or button on click as return false to avoid submission (solution 2)
Note: Don't forget, type="submit" is the default with button, so leave it off! Ref: input type="submit" Vs button tag are they interchangeable?
2. For on click, you can attach event using the CSS value. $(".btn btn-info").click(function() { .... or in DOM attach the clickme in onClick. Not required to have bot in the function definition.
<script>
function clickme()
{
$(".btn btn-info").click(function() {
var $item = $(this).closest("tr").find(".nr").text();
console.log($item);
$("#table1").append($item);
});
}
</script>

pass a twig variable as a parameter for a javascript function

I have a datatable that I need to add rows dynamically throught t.row.add(), the table is composed by 4 columns, one of them has buttons inside, those buttons are Show & Edit, and they need the {{ row.id }} so the can be shown or edit, the problem is that I don't know how get the twig variable works. Here is my table code:
<table class="table table-striped table-bordered table-hover" id="sample_2">
<thead>
<tr>
<th class="table-checkbox noprint" style="text-align:center;">
<input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" disabled/>
</th>
<th width="40%" style="text-align:center;">
Valoraciones
</th>
<th width="20%" style="text-align:center;">
Estado
</th>
<th width="20%" style="text-align:center;" class="noprint">
Acciones
</th>
</tr>
</thead>
<tbody>
{% for valoracion in valoracion %}
<tr class="odd gradeX" id="fila{{ valoracion.id }}">
<td class="noprint">
<input type="checkbox" class="checkboxes" disabled/>
</td>
<td style="text-align:center;" id="valoracion">
{{ valoracion.descripcion }}
</td>
{% if valoracion.enabled == 1 %}
<td style="text-align:center;" id="estadoValEnable">Activo</td>
{% else %}
<td style="text-align:center;" id="estadoValEnable">Inactivo</td>
{% endif %}
<td style="text-align:center;" class="noprint">
<a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion({{valoracion.id}})">Ver</a>
<a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails({{valoracion.id}})">Editar</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
and here is the action to create a new row (the create action is in a modal view):
function sendDataCreateValoracionDetails() {
if ($('#CrearValoracionMantenimiento').val() == "") {
Notificacion("error", "La descripión de la competencia no puede estar vacía");
$('#CrearValoracionMantenimiento').focus();
} else {
$.blockUI({
baseZ: 20000,
message: '<h4><img src="{{ asset('
assets / global / plugins / cubeportfolio / cubeportfolio / img / cbp - loading.gif ') }}" /> Guardando datos, por favor espere...</h4>'
});
var form = document.getElementById("formCreateMantenimientoValoracionDetails");
var formData = new FormData(form);
$.ajax({
url: '{{ path('
createValoracionMantenimiento ') }}',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(returndata) {
if (returndata.success == true) {
$.unblockUI();
$('#crearValoracion').modal('hide');
Notificacion("success", "Valoración RP", "Los datos se han guardado correctamente.");
if ($('#EstadoValoracion').attr('checked')) {
var status = "Activo";
} else {
var status = "Inactivo";
}
$(document).ready(function() {
var t = $('#sample_2').addClass('centro').DataTable();
$("#sample_2").each(function() {
t.row.add([
'<tr>' +
'<td><input type="checkbox" class="checkboxes" disabled/></td>',
'<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
'<td>' + status + '</td>',
'<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
{
valoracion.id
}
}
')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
{
valoracion.id
}
}
')">Editar</a></td></tr>',
]).draw(false);
});
});
} else {
if (returndata.success == false) {
$.unblockUI();
Notificacion("error", "Valoración RP", "Existe una valoración igual.");
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
Notificacion("error", "Valoración RP", "Ha existido un problema y no se ha podido crear la valoración.");
$.unblockUI();
}
});
}
}
These are my buttons:
<a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion('{{ valoracion.id }}')">Ver</a>
<a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')">Editar</a>
and these are the twig parameters I need to pas inside the functions:
onclick="showMantenimientoValoracion('{{ valoracion.id }}') ///
onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')`
here is the function code:
if ($('#EstadoValoracion').attr('checked')) {
var status = "Activo";
} else {
var status = "Inactivo";
}
$(document).ready(function() {
var t = $('#sample_2').addClass('centro').DataTable();
$("#sample_2").each(function() {
t.row.add([
'<tr>' +
'<td><input type="checkbox" class="checkboxes" disabled/></td>',
'<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
'<td>' + status + '</td>',
'<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
{
valoracion.id
}
}
')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
{
valoracion.id
}
}
')">Editar</a></td></tr>',
]).draw(false);
});
});
Thanks everyone :)

A twig variable can be readed by using .twig extension to the file name ends , When I need to use a variable twig inside javascript function, I create it inside file twig. There is not another way.

Just remove the quotes from the twig variable -
onclick="showMantenimientoValoracion('{{ valoracion.id }}')
should be
onclick="showMantenimientoValoracion({{ valoracion.id }})
And in your javascript function add the parameter -
function sendDataCreateValoracionDetails(valoracion_id) {
console.log(valoracion_id)
// Your code goes here
}
This should do it.

Pass appendTo dynamic rows value to bootstrap modal

I am currently using appendTo to add dynamic rows. What I want to happen is that if I will click one of the td (not including the remove button), It will open a bootstrap modal window and get the value of other td of its belonging row. here's the image.
Here's my code adding dynamically that I want to get the value of td and pass it to bootstrap modal.
function AddOrder(new_code, new_name, new_qtty, new_cost) {
var rows = "";
var code = new_code;
var name = new_name;
var cost = new_cost;
var qtty = new_qtty;
rows +=
'<tr>"' +
'<td class="item_code" data-toggle="modal" data-target="#mymodal">'+code+'</td>'+
'<td class="item_name" data-toggle="modal" data-target="#mymodal">'+name+'</td>'+
'<td class="item_qtty" data-toggle="modal" data-target="#mymodal">'+qtty+'</td>'+
'<td class="item_cost" data-toggle="modal" data-target="#mymodal">'+cost+'</td>'+
'<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
'</tr>';
$(rows).appendTo("#dynamic_added tbody");
}
I tried putting putting onclick on td with data-toggle="modal" data-target="#mymodal" but only the modal is working not the function I'm using for example:
function GetData() {
$('.item_code').click(function(){
alert($(this).closest('tr').find('.item_code'));
});
}

I just solved my own problem just a bootstrap modal call is all I am missing.
I addded a class getdata that I will call to my javascript function
function AddOrder(new_code, new_name, new_qtty, new_cost) {
var rows = "";
var code = new_code;
var name = new_name;
var cost = new_cost;
var qtty = new_qtty;
rows +=
'<tr>"' +
'<td class="item_code getdata" onclick="GetData();">'+code+'</td>'+
'<td class="item_name getdata" onclick="GetData();">'+name+'</td>'+
'<td class="item_qtty getdata" onclick="GetData();">'+qtty+'</td>'+
'<td class="item_cost getdata" onclick="GetData();">'+cost+'</td>'+
'<td>'+'<button class="btn remove-button">X</button>'+'</td>'+
'</tr>';
$(rows).appendTo("#dynamic_added tbody");
}
If I will click anywhere to the td except the button It will pop up the modal and pass the current data of that row.
function GetData() {
$(document).on('click', '.getdata', function(){
$('#mymodal').modal();
var modal_code =$(this).closest('tr').find('.item_code').text();
var modal_name =$(this).closest('tr').find('.item_name').text();
var modal_qtty =$(this).closest('tr').find('.item_qtty').text();
var modal_cost =$(this).closest('tr').find('.item_cost').text();
var modal = $("#mymodal"); // this is the id of my modal
modal.find('.modal-body').text(modal_code + modal_name + modal_qtty + modal_cost);
});
}

Do you want something like this:
$('.item_code, .item_name, .item_qtty, .item_cost').click(function() {
$('.modal-body').html($(this).closest('tr').html());
$('#myModal').modal('show');
});
td {
border: 1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="dynamic_added">
<tbody>
<tr>
<td class="item_code">code_1</td>
<td class="item_name">name_1</td>
<td class="item_qtty">qtt_1</td>
<td class="item_cost">cost_1</td>
<td>
<button class="btn remove-button">X</button>+</td>
</tr>
<tr>
<td class="item_code">code_2</td>
<td class="item_name">name_2</td>
<td class="item_qtty">qtt_2</td>
<td class="item_cost">cost_2</td>
<td>
<button class="btn remove-button">X</button>+</td>
</tr>
<tr>
<td class="item_code">code_3</td>
<td class="item_name">name_3</td>
<td class="item_qtty">qtt_3</td>
<td class="item_cost">cost_3</td>
<td>
<button class="btn remove-button">X</button>+</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Not able to display all values in an html table

For unknown reasons to me I cannot display the last (sProductLink) value in this table :
<thead>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Brand</th>
<th>Price</th>
<th>Link</th>
</tr>
</thead>
I cannot see any reason for this issue. The html is the same as for the other elements.
Whne I look in the DOM I don't see the "Link" <td> at all, which means it is not added for some reason.
Here is the code for this. I will really appreciate if someone has a look at this.
$("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">'
+sProductId+"<span data-i-user-id='"
+sProductId+"'</span>"
+"<button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>Edit</button>"
+ "<button id='deleteBtn' class='btn btn-danger deleteBtn'>Delete</button>"
+'</th><td class="nameDom">'
+sProductName+'</td><td class="brandDom">'
+sProductBrand+'</td><td class="priceDom">'
+sProductPrice+'</td><td class="linkDom">'
+sProductLink+'</td></tr>');
P.S. I'd also appreciate any tips on how can I do what I am doing here in an alternative(better) way. Without all the apostrophes and etc.

This part of your string:
"<span data-i-user-id='" +sProductId+"'</span>"
Should probably be:
"<span data-i-user-id='" +sProductId+"'></span>"
This is why building HTML via string concatenation is a colossal pain.

In the area where the skull 💀 is indicating, there's no greater than bracket > to close the inside of the <span>.
$("#lblEditDeleteProducts").append(
'<tr>
<th class="idDom" scope="row">'+sProductId+'
<span data-i-user-id="'+sProductId+'"💀</span>
<button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">
Edit
</button>
<button id="deleteBtn" class="btn btn-danger deleteBtn">
Delete
</button>
</th>
<td class="nameDom">'+sProductName+'</td>
<td class="brandDom">'+sProductBrand+'</td>
<td class="priceDom">'+sProductPrice+'</td>
<td class="linkDom">'+sProductLink+'</td>
</tr>');
SNIPPET
var sProductId = 'sProd01';
var sProductName = 'sProExtreme';
var sProductBrand = 'sPro™';
var sProductPrice = 54.99;
var sProductLink = 'http://shop.spro.com';
$("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">' + sProductId + '<span data-i-user-id="' + sProductId + '"></span><button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">Edit</button><button id="deleteBtn" class="btn btn-danger deleteBtn">Delete</button></th><td class="nameDom">' + sProductName + '</td><td class="brandDom">' + sProductBrand + '</td><td class="priceDom">' + sProductPrice + '</td><td class="linkDom">' + sProductLink + "</td></tr>");
table {
border: 5px inset orange;
}
tr {
background: rgba(0, 0, 0, .7);
}
th {
border: 5px dashed green;
color: yellow;
}
td {
border: 2px inset blue;
color: cyan;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/fontawesome#4.6.3,bootstrap#3.3.7(css/bootstrap.min.css+css/bootstrap-theme.min.css)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lblEditDeleteProducts"></table>

I strongly suggest that you write the HTML that you're trying to append inside an editor, spaced out so you can see the structure properly and debug from there. You can minify it afterwards and test to ensure that it's in working order.
<tr>
<th class="idDom" scope="row">
+ sProductId +
<span data-i-user-id='"+sProductId+"'><!-- Closing '>' added (Thanks Matt) --></span>
<button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>
Edit
</button>
<button id='deleteBtn' class='btn btn-danger deleteBtn'>
Delete
</button>
</th>
<td class="nameDom">
+ sProductName +
</td>
<td class="brandDom">
+ sProductBrand +
</td>
<td class="priceDom">
+ sProductPrice +
</td>
<td class="linkDom">
+ sProductLink +
</td>
</tr>
Dont forget the "" marks around your HTML

How to append one more class when page loads to div class via javascript?

i have html code like this :
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseUnapprovedUsers" style="text-decoration:none"><center><b>Waiting User List</b></center></a>
</div>
<div id="collapseUnapprovedUsers" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12">
<table class="col-sm-12">
<tbody>
<tr id="filter_global1">
<div class="col-sm-12">
<td class="col-sm-6"> <b> Use Smart Search :</b>
<input type="checkbox" class="global_filter1" id="global_smart1">
</td>
<td align="right" class="col-sm-6"> <b> Search :</b>
<input type="text" class="global_filter1" id="global_filter1">
</td>
</div>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-12">
<div class="table-responsive">
<table id="unapprovedUserDetails" class="table table-striped table-bordered table-hover text-center">
<thead>
<th><b><center>Full Name</center></b></th>
<th><b><center>Username</center></b></th>
<th><b><center>Password</center></b></th>
<th><b><center>Email</center></b></th>
<th><b><center>Contact No</center></b></th>
<th><b><center>Role</center></b></th>
<th><b><center></center></b></th>
<th><b><center></center></b></th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
and javascript function like this..
$(document).ready(function() {
if(#jsonData.length != 5)
{
json = (#Html(jsonData));
for(i=0; i<json.users.length; i++)
{
$('#approvedUserDetails tbody').append("<tr><td>" + json.users[i].fullName + "</td><td>" + json.users[i].userName + "</a></td><td>" + json.users[i].userPassword + "</td><td>" + json.users[i].userEmail + "</td><td>" + json.users[i].userContact + "</td><td>" + json.users[i].userRole + "</td><td><a href='/deleteApprovedUser/" + json.users[i].userName + " ' onclick='temp();return ' class='btn btn-outline btn-primary btn-xs' style='margin:0px;text-decoration:none'>" + "Delete" + "</a></td></tr>");
}
i need to add one more class in <div id="collapseApprovedUsers" class="panel-collapse collapse"> when user clicks Delete button which i have created through the javascript...the class name which i want to add is "in"
how can i do that ???

$('#collapseApprovedUsers').addClass('in');
Just use the addClass in Jquery.

In case you want just in javascript:
function temp() //called on click of delete button
{
document.getElementById("collapseApprovedUsers").className += " in";
}

I'm assuming that you want to do this around your temp() function in the onclick for the delete anchor tag.
You currently have onclick='temp();return;'. Try something like onclick='temp(); $(this).addClass(\'in\');'. $(this) refers to the link tag. You can also use $(this).parents('td') or $(this).parents('tr') to get the parent td or tr that the href belongs to. (If you wish to add the class to that instead.

i got the solution...i am using javascript with scala and i'm passing panel id through method parameter and catch it into html page & then using it i'm adding the "in" class...
def loadDeleteUser(userName : String) = SubjectPresent(new AccessControlHandler) {
Action { implicit request =>
databaseDriver.deleteUserFromList(userName, "unapproved")
Ok(views.html.userDetails("Nephele: User Management", databaseDriver.loadTempAllUsers(), databaseDriver.loadAllUsers(request.session.get("userId").toString) , "collapseUnapprovedUsers", new AccessControlHandler))
}}
in last line see i have passed panel id "collapseUnapprovedUsers" and i'm using it in html page with script and add class
$('##msg').addClass("in");
here msg is the string in which i'm fetching that id...that works fine as per my expectation...
thanx to all of you...