in this below ajax i fill and create simple data after getting data
$.ajax({
method: 'GET',
url: '/analyzePage/searchTag/' + tagName,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
setTimeout(function () {
if (data.state == 'error') {
...
}
else {
let table = '<div class="table-responsive pre-scrollable">';
...
$.each(data.tags, function (key, value) {
table = table + '<tr class="searchTag-' + value.name + '">';
table = table + '<td style="padding: 6px 20px;">1</td>';
table = table + '<td style="padding: 6px 0px;">';
table = table + '<img src="' + value.profile_pic_url + '" class="img-circle img-sm" id="tagIamge"/></td>';
table = table + '<td style="padding: 6px 20px;">' + value.name + '</td>';
table = table + '<td style="padding: 6px 20px;">' + value.media_count + '</td>';
table = table + '<td>';
table = table + '<button type="button" class="btn btn-warning btn-icon btn-rounded legitRipple" id="searchTag-' + value.name + '">';
table = table + '<i class="icon-file-plus"></i>';
table = table + '</button>';
table = table + '</td>';
table = table + '</tr>';
});
...
$('.data').html(table);
}
}, 800);
},
error: function (data) {
console.log(data);
}
});
in that i have one button id="searchTag-' + value.name + '" which its into latest td i want to get all columns that this button is into that, for example this tr have 4 td and into latest td i have this button, then i want to get other td into this tr after click on button
my code work but its get all trs into my table
$(document).on('click', "[id^='searchTag']", function () {
let thisId = $(this).attr("id");
let tagName = thisId.split("-")[1];
$("[class^='" + $(this).attr("id") + "'] td:nth-child(3)").append("<span>Clicked</span>");
});
Do you want to add a span next to the icon of the button after clicking to it?
If you do, you can do it like this:
$(document).on('click', "[id^='searchTag']", function () {
$(this).closest('td').append("<span>Clicked</span>");
});
i want to get all td which button is into this row
Try this:
$(document).on('click', "[id^='searchTag']", function () {
$(this).closest('tr').find('td'); // returns all "td" elements
});
Related
I have an HTML table in which there are parent rows and for every parent row, there are few child rows. I have to hide these child rows initially and when clicked on parent row, child rows should be shown.
I have a list of data and I am iterating through the list and for each iteration, I am appending the row to table like this.
var json = [{
Message: "abc",
name: "Some name",
id: 345,
col4: 2,
col5: 5
}];
var $container = $("#container");
var $thead = $("#container table thead");
var $tbody = $("#container table tbody");
var $row = $("#container table tbody tr");
json.forEach(function(item) {
var $button = $("<button>" + item.Message + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>"));
$button.on("click", function() {
//parent row
var row = $('<tr><td>' + item.Message + '</td>' + '<td>' + item.name + '</td>' + '<td>' + item.id + '</td>' + '</td>' + "" + '</td>' + '<td>' + "" + '</td></tr>');
table.append(row);
//child row
var row = $('<tr><td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>');
table.append(row);
$("#table").html(table);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>
I want to give an id to each parent row and class for child rows and when clicked on parent row child rows should be shown.
What you need to do is give class to parent row and then toggle child rows based on jquery next function
var json = [{
Message: "abc",
name: "Some name",
id: 345,
col4:2,
col5:5
}];
var $container = $("#container");
var $thead = $("#container table thead");
var $tbody = $("#container table tbody");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
json.forEach(function(item) {
var $button = $("<button>" + item.Message + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>"));
// Button click handler..
$button.on("click", function() {
// Replace row HTML..
//parent row
var row=$('<tr class="parent_row" ><td>' + item.Message + '</td>' + '<td>' + item.name + '</td>' + '<td>' + item.id + '</td>' + '</td>' + "" + '</td>' + '<td>' + "" + '</td></tr>');
table.append(row);
//child row
var row=$('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + item.col4 + '</td>' + '<td>' + item.col5 + '</td></tr>');
table.append(row);
$("#table").html(table);
$('.parent_row').click(function() {
$(this).next().toggle();
})
// Show table if it's not already visible..
});
});
table {
margin-top: 20px;
border: 1px solid silver;
width: 500px;
}
th {
text-align: left;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>
in case you have more than one child than you can use nextUntill('.parent_row')
I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});
$( "#ddlACof" ).trigger( "change" );
Below is the current script:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: '/Home/NewPopulation',
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
var tr;
console.log(data);
for (var i = 0; i < data.length; i++) {
tr = tr + "<tr>";
tr = tr + "<td style='display: none'>" + data[i].PollSurveyID + "</td>"
tr = tr + "<td>" + data[i].PollSurveyName + "</td>";
tr = tr + "<td>" + data[i].PollSurveyDescription + "</td>";
tr = tr + "<td>" + data[i].CategoryName + "</td>";
tr = tr + "<td>" + data[i].StartDate + "</td>";
tr = tr + "<td>" + data[i].EndDate + "</td>";
tr = tr + "<td><a class='editRow' ><i class='fa fa-edit'></i></a></td>";
//tr = tr + "<td><input type='button' id='btnDelete' value='Delete' /><i class='fa fa - close'></i></td > ";
tr = tr + "<td><a class='delRow'><i class='fa fa-trash'></i></a></td>";
tr = tr + "</tr>";
}
$('#tblPopulation').append(tr);
tblFormate();
},
error: function (xhr) {
alert('No Valid Data');
}
});
$('#tblPopulation').on('click', '.delRow', function () {
var table = $('#tblPopulation').DataTable();
table
.row($(this).parents('tr'))
.remove()
.draw();
});
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById("#tblPopulation").deleteRow(i);
}
function tblFormate() {
var table = $('#tblPopulation').DataTable(
{
//"searching": false,
"lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]
});
//Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
}
});
</script>
This is JavaScript for my datatable having edit and delete buttons. For edit I tried many thing but didn't get response from the button. What I want is when I click edit button all details must get filled in below sections individually. Except the Name other controls are dropdown so that user can change the category or status.
My thought of doing so was to take a hidden column and take PollId in that column when I click edit button of a row PollId would be sent to a hidden textbox. Based on the textbox value all controllers get populated as I have a function which take PollId as a parameter and returns all the details against that Poll or survey.
Any other idea are welcomed. Attaching a picture of page to give a rough idea of flow.
[
I am pulling data and with ajax and displaying in a form. If a user clicks on any result returned from ajax, it updates an input field. Now instead of only displaying the names on the list, I want to include radio button alongside each name.
Here is my code.
$(function() {
$('#searchpartno').keyup(function() {
var item = $(this).val();
var item_value = $('#price_luitem_id').val();
$.ajax({
"url": "/searchpartno_stock",
"data": {"partnumber":item,"luitem_id":item_value},
"type": "get",
"dataType": "json",
"success": function(items) {
$('#partnumber_tbody').empty();
var clearHTML = '<tr>' +'<td></td>' +'</tr>';
var trHTML = '';
$.each(items, function (i, item) {
trHTML += '<tr>' +'<td onclick="updatePartNo(this)" class="partspare_list">' + item.partnum + '</td>' +'</tr>';
});
$('#partnumber_tbody').append(clearHTML);
$('#partnumber_tbody').append(trHTML);
},
"error": function() {
$('#dailysale_price').val('');
}
});
})
})
Here is the output
Instead of appending the partnum as a text , create a radio button the same way you create the tr and td
$.each(items, function (i, item) {
trHTML += '<tr>' +
'<td onclick="updatePartNo(this)" class="partspare_list">' +
'<input type="radio" name="itemnum" value="' + item.partnum
+ '">' + item.partnum + '<br>' +
'</td>' +
'</tr>';
});
Just add radio input like following :
$.each(items, function (i, item) {
trHTML += '<tr>
<td onclick="updatePartNo(this)" class="partspare_list">
<input type="radio" name="itemRd" value="'+i+'">
' + item.partnum + '
</td>
</tr>';
});
I'm trying to get content from a json file, but until now I get nothing.
I have the status connection == 200 and I can see the content in the chrome console
but I get nothing when I try to display the data to html table, but when I use the same jquery code with api from another service like import.io things works fine.
Can you tell me what am I doing wrong?
This api is from kimonolabs.
$(document).ready(function () {
var tabel = '<table><THEAD><caption>Calendário</caption></THEAD>';
tabel += '<th>' + 'Hora' + '</th>' + '<th>' + 'Equipas' + '</th><th>' + 'jornda' +
'</th><th>' + 'Data' + '</th>';
$.ajax({
type: 'GET',
url: 'https://api.myjson.com/bins/1dm6b',
dataType: 'json',
success: function (data) {
console.log(data);
$('#update').empty();
$(data.m_Marcadores).each(function (index, value) {
tabel += '<tr><td>' + this.posicao + '</td>' + '<td>' + this.golos + '</td></tr>';
}); //each
tabel += '</table>';
$("#update").html(tabel);
} //data
}); //ajax
}); //ready
According to JSON structure you should iterate over data.results.m_Marcadores array:
$(data.results.m_Marcadores).each(function (index, value) {
tabel += '<tr><td>' + this.posicao + '</td><td>' + this.golos + '</td></tr>';
});
Another problem. In header of the table you setup 4 colums, but in loop you are creating only two of them. Number of header columns should be the same as other row td.
Also you need to wrap th elements in tr. For example, fixed table header:
var tabel = '<table>' +
'<THEAD><caption>Calendário</caption></THEAD>' +
'<tr>' +
'<th>Hora</th><th>Equipas</th><th>jornda</th><th>Data</th>' +
'</tr>';
Demo: http://jsfiddle.net/onz02e43/