Adding button with onclick event in .append() with JQuery/JavaScript - javascript

I want to add delete button to every row where status is ORDERED. I have tried different variations. This solution could work without error "Cannot read property 'id' of undefined" even though data[i] is not undefined. Alert before .click() gives right id. What is wrong here? Can I do something differently or better here?
).done( (data, status, jqXHR) => {
if(data[0].order_username != undefined) {
$("#orders_table").empty();
for(var i = 0; i < data.length; i++) {
var button = "";
if(data[i].status == "ORDERED") {
button = "<td><button class='delete'>Delete</button></td>";
}
$("#orders_table").append(
"<tr>" +
"<td>" + data[i].order_username + "</td>"+
"<td>" + data[i].work_description + "</td>" +
"<td>" + dateFormatter(data[i].orderdate) + "</td>" +
"<td>" + dateFormatter(data[i].startdate) + "</td>" +
"<td>" + dateFormatter(data[i].readydate) + "</td>" +
"<td>" + dateFormatter(data[i].accepteddate) + "</td>" +
"<td>" + dateFormatter(data[i].denieddate) + "</td>" +
"<td>" + data[i].comment_of_work + "</td>" +
"<td>" + data[i].hours + "</td>" +
"<td>" + data[i].approx_budget + "</td>" +
"<td>" + data[i].status + "</td>" +
button +
"</tr>"
)
alert(data[i].id);
$(".delete").click(() => {
deleteUser(data[i].id);
})
}
}
function deleteUser(key) {
$.ajax(
{
url: "http:localhost:3001/workorders_delete/"+key,
method: 'delete'
}).done( (data, status, jqXHR) => {
}).fail( (jqXHR, status, errorThrown) => {
console.log("Call failed: "+errorThrown);
});
}

You can set unique data attributes to the delete buttons using the the ids from the response data as follows:-
if(data[i].status == "ORDERED") {
button = "<td><button class='delete' data-deleteId =
"+data[i].id+">Delete</button></td>";
}
and then you can write a single click event listener for the delete buttons as follows:-
$(".delete").click(function(){
var id = $(this).data("deleteId");
deleteUser(id);
});
In your code :-
$(".delete").click(() => {
deleteUser(data[i].id);
});
the function deleteUser() is being called or executed on click and at the point data[i].id will not be defined.

Why is data[i] undefined?
In the loop, i is a reference to the same variable that has the value data.length after the loop.
As expected, data[data.length] is undefined. Check this with alert(i) inside .click().
$(".delete").last().click(() => {
alert(i);
deleteUser(data[i].id);
})
A simplified example:
(function wrong() {
var array = [];
for (i = 0; i < 2; i++) {
array.push(() => {
console.log(i);
});
}
array.forEach(click => click());
})();
The solution is to create a new const in the loop:
(function right() {
var array = [];
for (i = 0; i < 2; i++) {
const constI = i;
array.push(() => {
console.log(constI);
});
}
array.forEach(click => click());
})();
In addition...
$(".delete") refers to all delete buttons that exist at the point you register .click().
You should register only on the last delete button:
const constI = i;
$(".delete").last().click(() => {
deleteUser(data[constI].id);
})

Related

Search in .net MVC with AJAX. What can I do for the following code?

I want to do a search with AJAX. I simply did with the get method through passing search string in controller but that not I want
Below my controller code, where I get the search value from URL and return DATA (which is a list)
if (search != null)
{
if (search.ToLower().ToString() == "paid")
{
DATA = DATA.Where(a => a.Purchased_Price > 0).ToList();
}
else if (search.ToLower().ToString() == "free")
{
DATA = DATA.Where(a => a.Purchased_Price == 0).ToList();
}
else
{
DATA = DATA.Where(a => a.Purchased_File_Name.ToLower().StartsWith(search.ToLower()) || a.Purchased_Category.ToLower().StartsWith(search.ToLower()) || a.User1.Email.ToLower().StartsWith(search.ToLower()) || a.Purchased_Price.ToString().StartsWith(search)).ToList();
}
ViewBag.SoldList = DATA.ToPagedList(page ?? 1, pageSize); *this is what I actually did*
return Json(DATA , JsonRequestBehavior.AllowGet); *this is trial I do not know this work or not*
}
Below is the script which I wrote in view. Where I am going wrong? I'm not aware of that. I want whatever list comes with the help of whatever search I entered. To be printed in the table. Table is just above this script; I don't think it's needed so I did not include that.
<script>
$(document).ready(function () {
$("#search_button").on("click", function () {
var search_value = $("#searchText").val();
alert(search_value);
var SetData = $("#tabledata"); *tabledata is id of tbody tag *
SetData.html("");
console.log("setddata");
console.log(SetData);
$.ajax({
type: "get",
url: "/Home/MySoldNotes?search=" + search_value, *home is controller, mysoldnotes is action*
contentType: "application/ json; charset = utf - 8",
dataType: "html",
success: function (result) {
console.log("result");
console.log(result);
$.each(result, function (index, value) {
var data = "<tr>" +
"<td>" + value.NoteDetail.File_Name + "</td>" +
"<td>" + value.Purchased_Category + "</td>" +
"<td>" + value.User1.Email + "</td>" +
"<td>" + value.NoteDetail.Sell_Price + "</td>" +
"<td>" + value.Req_Solved_Date + "</td>" +
"</tr>"
SetData.append(data);
});
},
error: function (err) {
alert("Error aa gai");
console.log(err.responseText);
}
});
});
});
</script>
You must pass object to controller from ajax call. Example
<script>
$(document).ready(function () {
$("#search_button").on("click", function () {
var objParam = new Object();
objParam.search_value = $("#searchText").val();
$.ajax({
type: "POST",
url: "/Home/MySoldNotes"
contentType: "application/json; charset = utf-8",
data: JSON.stringify(objParam)
success: function (result) {
console.log("result");
console.log(result);
$.each(result, function (index, value) {
var data = "<tr>" +
"<td>" + value.NoteDetail.File_Name + "</td>" +
"<td>" + value.Purchased_Category + "</td>" +
"<td>" + value.User1.Email + "</td>" +
"<td>" + value.NoteDetail.Sell_Price + "</td>" +
"<td>" + value.Req_Solved_Date + "</td>" +
"</tr>"
SetData.append(data);
});
},
error: function (err) {
alert("Error aa gai");
console.log(err.responseText);
}
});
});
});
</script>
Then in your controller
public JsonResult MySoldNotes(string search_value)
{
// Do whatever and return json as result
}
List<BuyerReq> DATA = dc.BuyerReqs.Where(a => a.seller_id == ab && a.Status == true).AsQueryable().ToList();
return Json(DATA, JsonRequestBehavior.AllowGet);
while returning from the controller I am getting an error(not success my AJAX call).
but when I am doing this for testing purpose :
var aa = "checking"; return Json(aa, JsonRequestBehavior.AllowGet);
this works. I am not getting the exact error.

I want to fix the code concisely

var template is used as redundant I want to know how to fix it so you can use this section only once
function pluscal(data) {
var idx = index++
var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val())
var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val())
var template = "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + data.result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>"
$("tbody").append(template)
}
and
function minuscal(data) {
var idx = index++
var form = parseInt($("#minusstr1").val()) + $("#minus_op").text() + parseInt($("#minusstr2").val())
var cal = parseInt($("#minusstr1").val()) - parseInt($("#minusstr2").val())
var template = "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + data.result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>"
$("tbody").append(template)
}
Simply separate the logic related to template. Here I have organized it in one function. And I have merged pluscal and minuscal function.
function cal(data, calType) {
// calType need to be either plus or minus
var idx = index++
var form = parseInt($(`#${calType}str1`).val()) + $(`#${calType}_op`).text() + parseInt($(`#${calType}str2`).val())
var cal = parseInt($(`#${calType}str1`).val()) + parseInt($(`#${calType}str2`).val())
generateTemplate(idx, form, cal, data);
}
function generateTemplate(idx, form, cal, data) {
var template = `<tr>
<td> ${idx} </td>
<td> ${form} </td>
<td> ${data.result} </td>
<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>
</tr>`
$("tbody").append(template)
}
Create another function what returns the template
function getTemplate(idx, form, result) {
return "<tr>" +
"<td>" + idx + "</td>" +
"<td>" + form + "</td>" +
"<td>" + result + "</td>" +
"<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
"</tr>";
}
So then you can use like this
function pluscal(data) {
var idx = index++
var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val())
var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val())
var template = getTemplate(idx, form, data.result);
$("tbody").append(template)
}
try this
function multiCase(caseType, data) {
if (caseType === 'Maj') {
str1 = "#plusstr1",
str2 = "#plusstr2",
op = "#plus_op"
} else {
str1 = "#minusstr1",
str2 = "#minusstr2",
op = "#minus_op"
}
var idx = index++
var form = parseInt($(str1).val()) + $(op).text() + parseInt($(str2).val())
var cal = parseInt($(str1).val()) + parseInt($(str2).val())
/* And other part of your function
...
...
*/
Hope it helps

Building and resorting a multidimensional array with AJAX/Javascript/jQuery

I have a multidimensional array that is built in a jQuery AJAX call when my page loads, called sumArr.
$( document ).ready( function() {
...
$.ajax({
type: 'GET',
url: 'models/table.php',
mimeType: 'json',
success: function(data) {
var sumCount = 0;
var sumArr = [];
$( "#sum-body" ).empty();
$.each(data, function(i, data) {
sumArr.push([
data[0],
data[1],
data[2],
data[3],
data[4],
data[5],
data[6],
data[7],
data[8],
data[9]
]);
var body = "<tr class='clickable-row'>";
body += "<td>" + data[0] + "</td>";
body += "<td>" + data[1] + "</td>";
body += "<td>" + data[2] + "</td>";
body += "<td>" + data[3] + "</td>";
body += "<td>" + data[4] + "</td>";
body += "<td>" + data[5] + "</td>";
body += "<td>" + data[6] + "</td>";
body += "<td>" + data[7] + "</td>";
body += "<td>" + data[8] + "</td>";
body += "<td>" + data[9] + "</td>";
body += "</tr>";
$( body ).appendTo( $( "#sum-body" ) );
sumCount = sumCount + 1;
});
console.log(sumArr);
});
...
});
I have another function that then tries to re-sort the array. I will eventually display the array on my HTML page.
function compareCols(arr, cols) {
arr.sort(function (a, b) {
console.log("comparing " + a[cols] + ", " + b[cols]);
if (a[cols] > b[cols]) {
return 1;
}
if (a[cols] < b[cols]) {
return -1;
}
return 0;
});
}
compareCols('sumArr', 0);
console.log(sumArr);
When my page loads, I get the following error:
Uncaught TypeError: arr.sort is not a function
This is baffling, because I have a much simpler version of this code as an example that works fine. See below:
var items = [
['Edward', 21],
['Sharpe', 37 ],
['And', 45 ],
['The', -12 ],
['Magnetic', 0 ],
['Zeros', 37 ]
];
function compareCols(arr, cols) {
arr.sort(function (a, b) {
console.log("comparing " + a[cols] + ", " + b[cols]);
if (a[cols] > b[cols]) {
return 1;
}
if (a[cols] < b[cols]) {
return -1;
}
return 0;
});
}
compareCols(items, 0);
console.log(items);
I can't seem to find where this code is going wrong. Can anyone spot where the error is? I've combed through the code and can't find anything. I'm guessing it has something to do with AJAX, but don't know for sure. I originally had my array as an object, but changed it to an array or arrays.
Two issues here:
When calling compareCols('sumArr', 0); should remove the quotes as suggest by kurt in the comments.
But the bigger problem is that the sumArr may not be defined as your global variable.
You need to call the compareCols only after a successful ajax call.
Make sure you remove the var in the ajax section so the sumArr = [] refers to the global variable.

Sort HTML Table, that gets appended via JQuery

Hello i'm trying to use Tablesorter(https://github.com/christianbach/tablesorter) to sort a table of mine which i generate throu JQuery.appends. This is how my code looks:
$(document).ready(function() {
*Lotsa more code .....*
$.get("../skillqueue",{keyid: keyid, charid: charid},function(xmlskillqueue){
console.log("XML Skillqueue");
console.log(xmlskillqueue);
//Variables for
var rowsets = xmlskillqueue.getElementsByTagName("rowset");
var skillrows;
for(var i = 0; i < rowsets.length; i++){
if(rowsets[i].getAttribute("name") == "skillqueue"){
skillrows = rowsets[i].getElementsByTagName("row");
}
}
//Defines Table Headers
$("#tableskillqueuelist").append(
"<thead>" +
"<tr>" +
"<th>Order: </th> "+
"<th>Skill Name: </th> "+
"<th>Training to: </th> "+
"<th>Starts:</th> "+
"<th>Ends:</th> "+
"</tr> "+
"</thead>"+
"<tbody>"
);
for(var i = 0; i < skillrows.length; i++){
(function(i, skillrows) {
$.get("../getitemname", {itemid:skillrows.getAttribute("typeID")},function(itemname){
$("#tableskillqueuelist").append(
"<tr> " +
"<td>" + skillrows.getAttribute("queuePosition") + ". " +
"<td>" + itemname + "</td>" +
"<td>" + "|Train to: " + skillrows.getAttribute("level") + "</td>" +
"<td>" + "|Training Starts: " + skillrows.getAttribute("startTime") + "</td>" +
"<td>" + "|Training Ends: " + skillrows.getAttribute("endTime") + "<td>" +
"</tr>"
);
})
})(i, skillrows[i]);
}
//Ends the table body
$("#tableskillqueuelist").append("</tbody>");
});
});
Now i'm wondering what i need to do to have it successfully run the $("#tableskillqueuelist").tablesorter(); method. Since it seems like whenever i try and run it, the #tableskillqueuelist seems to be empty.
You need to tell table sorter that you've changed the data and that you want to sort it by triggering events.
Example from the docs: http://tablesorter.com/docs/example-ajax.html
$("table").tablesorter();
$("#ajax-append").click(function() {
$.get("assets/ajax-content.html", function(html) {
// append the "ajax'd" data to the table body
$("table tbody").append(html);
// let the plugin know that we made a update
$("table").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];
// sort on the first column
$("table").trigger("sorton",[sorting]);
});
return false;
});
HTH

Refresh table after using jQuery .append()

The following code gets a JSON object and then spits its contents out into a <table>. The first time I do it I get my JSON content just fine. However, when I refresh, the refreshed data is stuck onto the bottom of my table. How do I refresh the data to show the new data only? I tried using .remove() but there was an obvious deleting and then a refresh of data.
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
for (var i = 0; i < json.GetDocumentResults.length; i++) {
$('#DocumentInfoTable').append(
"<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
);
};
});
});
});
Thank you,
Aaron
It will be more efficient to build the HTML as follows (and of course, solves the problem you're experiencing):
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
var str = '';
for (var i = 0; i < json.GetDocumentResults.length; i++) {
str += "<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
};
$('#DocumentInfoTable').html(str);
});
});
});

Categories

Resources