We Keep Coding

How to get onClick to work using html within C# server side code

I am try to get my onClick to work however my when I click nothing happens and no error to give insight as to what the problem might be
var data = new FormData();
data.append("cart_list", new_cart);
$.ajax({
url: "#Url.Action("GetCart", "Home")",
type: "POST",
processData: false,
contentType: false,
data: data,
success: function (result) {
//code after success
var html = "";
// var removeIndex
for (index = 0; index < result.result.length; ++index) {
removeIndex = result.result[index];
html = html + '<li class="minicart-product">' + result.result[index].HFR +;
Html = Html + ' <a class="product-item_remove" onclick="RemoveFromCart()"></a>';
html = html + '<i class="ion-android-close"></i>';
html = html + '</a>';
html = html + '<div class="product-item_img">';
html = html + '<img src="../Content/assests/images/Catalogue/' + result.result[index].Foto + '" alt="../Content/assests/images/Catalogue/default.png">';
html = html + '</div>';
html = html + '<div class="product-item_content">';
html = html + '<a class="product-item_title" href="">' + result.result[index].TractorModel + " " + result.result[index].Description + '</a>';
html = html + '<span class="product-item_quantity">' + result.result[index].HFR + '</span>';
html = html + '</div>';
html = html + '</li>';
}
$("#myCart").html(html);
},
error: function (er) {
alert(er.responseText);
}
});
}
function RemoveFromCart()
{
alert("Remove me")
}

It is html not Html.
Replace this line :
Html = Html + ' <a class="product-item_remove" onclick="RemoveFromCart()"></a>';
with
html = html + ' <a class="product-item_remove" onclick="RemoveFromCart()"></a>';

You may check if the onclick event is triggered correctly. For example, I have an asp.net core MVC project and it has integrated Jquery by default, in my code snippet, I have an alert clause for testing if it's triggered. Code snippet is in the default home page.
#{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
<input id="picContent" type="file" name="photo" value="please upload a picture" />
<input id="btn1" type="button" value="upload"/>
#*#section scripts
{*#
<script>
$("#btn1").click(function(){
alert(1);
return;
var formData = new FormData();
var img = $("#picContent")[0].files[0];
console.log(img);
console.log($("#picContent").val());
formData.append("file", img);
$.ajax({
data: formData,
url:"https://localhost:44340/home/upload",
type:"post",
data:formData,
processData: false,
contentType: false,
success:function(data){
alert(data);
}
})
})
</script>
#*}*#

Passing multi parameter to Td inline JavaScript function

Passing one parameter (report.id) to removeUser function works fine, but when I want to pass two parameter (report.id and report.name) I get Uncaught SyntaxError: Invalid or unexpected token.
I tried '(" +report.id +","+ report.name +")'
I tried '(" +report.id report.name +")'
but none works, what I am doing wrong here
$.ajax({
url: "xxx",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, report) {
html += '<tr>';
html += '<td>' + report.id + '</td>';
html += '<td>' + report.name + '</td>';
html += "<td><a onClick='removeUser(" +report.id + report.name +")'" + "'> Remove </a></td>";
html += '</tr>';
});
$('#users').html(html);
},
function removeUser(id, name) {
alert("ID: "+ id + "Name: "+ name)
}

You need commas between the parameters, and you need quotes only around report.name.
It's much easier to write this using a template literal rather than concatenation.
html += `<td><a href="#" onClick='removeUser(${report.id}, "${report.name}")'> Remove </a></td>`;
Also, since you're doing this with an a element, you should set its href so it doesn't try to link to another page after running the onclick function.

Update HTML Table when API is getting updated

I am just making a simple UI for display orders from Woocommerce shop. I am successfully getting the JSON response and put it into a HTML table. But I need to update the table without refreshing the whole page or table. Actually i need like, whenever Woocommerce get an order, the HTML table should get updated while highlighting the row. I am using AJAX to update the table but its not updating.
Note - I tried to set particular time interval for refreshing the page but i thought it won't be a good solution.
So far i got this below.
**
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "https://localhost/site/wp-json/wc/v3/orders?consumer_key=key&consumer_secret=key1",
dataType: 'json',
type: 'get',
cache:false,
success: function(data){
console.log(data);
var event_data = '';
$.each(data, function(index, value){
/*console.log(value);*/
event_data += '<tr>';
event_data += '<td>'+value.id+'</td>';
event_data += '<td>'+value.billing.first_name + value.billing.last_name+'</td>';
event_data += '<td>'+value.date_created+'</td>';
event_data += '<td>'+value.billing.phone+'</td>';
event_data += '<td>'+value.billing.address_1 + ", " + value.billing.address_2 + ", " + value.billing.city + value.billing.postcode +'</td>';
event_data += '<td>'+value.total+'</td>';
event_data += '</tr>';
});
$("#data").append(event_data);
},
error: function(d){
/*console.log("error");*/
alert("404. Please wait until the File is Loaded.");
}
});
});
</script>
**
Any suggestions please.

how to create search function with jquery

I have this ajax request that's working on pulling the data I need but I would like to make this a search function that lets the user pull in data as requested. Is there away to take my working code and repurpose it to work with the search box? Not sure how to go about this...
function foodQuery(){
var foodURL = "http://api.example.com/items?key=123456789";
$.ajax({
url: foodURL,
type: 'GET',
contentType: "text/plain",
dataType: 'json',
success: function(json) {
$.each(json.products, function(index, product) {
// build product block
var htmlString = '<div class="product large-3 columns">';
//open imgwrap
htmlString += '<div class="imgwrap">';
//get img src
htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '#2x.jpg" />';
// close imgwrap
htmlString += '</div>';
// open textwrap
htmlString += '<div class="textwrap">';
// get productName
htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
// get itemCode
htmlString += '<h4 class="item_id" >#' + product.itemCode + '</h4>';
// get description
htmlString += '<p class="product_desc">' + product.description + '</p>';
// open price
htmlString += '<div class="price">';
// get price & close div
htmlString += '<span class="dollar"><span class="usd">$</span>' + product.price + '</span> <span class="product_desc">per weight</span></div>'
// close divs
htmlString += '</div>';
//console.log(htmlString);
$('.listing').append( $(htmlString) );
}); //end each
}, // end success
error: function(e) {
console.log(e.message);
$('.listing').append( '<h1 class="errmsg" >Sorry, there was an unkown error.</h1>' );
} // end error
}); // end ajax request
}

It depends on the API that you are using, but assuming the API has a way to search using text, you could have something that looks like the following:
function foodQuery(searchTerm) {
var foodUrl = '/path/to/api?query=' + searchTerm;
$.ajax({
// fill in AJAX call here and callback handling like you are doing
})
}
$('#searchBox').on('keypress', function() {
foodQuery($(this).val());
});
So every time the user types, the function foodQuery() will be run with the current search term. You may want to add some delay so that the API is not hit every time the user types a new character.

First create a text input,
<input type="text" id="search">
Then listen for the keyup event of that input. Get the value of the input as the user is typing (if this is the behavior you want) and call the foodQuery function sending the value of the input as a parameter. Then use this value as the key parameter of the foodURL. Then perform the ajax request the same way you did.
$(function() {
/**
Whenever user types a letter and release the key, its value is passed to the
foodQuery function
**/
$("#search").keyup(function() {
var value = $(this).val();
foodQuery(value);
});
function foodQuery(key) { // key is passed as a parameter
var foodURL = "http://api.example.com/items?key=" + key;
/** Send you ajax request here and manipulate the DOM the same way yo do. Since we are
fetching new products continuously, it is better to clear the .listing element
every-time before you update it. **/
$(".listing").html("");
/**
$.ajax({
url: foodURL,
type: 'GET',
contentType: "text/plain",
dataType: 'json',
success: function(json) { **/
}
});

How to load JSON data associated with each link onclick?

I have created a dynamic link based on JSON data, The problem I am having, when I click on the links is its not loading the information associated for each of the link.
for example when i click on Algebra it should load the id and author info. But currently it work for only the last link.
How can I make it work for every link so that it loads for each one?
here is my code below:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
var url= 'sample.json';
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'jsoncback',
success: function(data) {
console.log(data);
//$('.bookname').empty();
var html ='';
$.each(data.class, function(key, value) {
console.log(value.name+ " value name");
console.log(value.desc + " val desc");
$('.bookname').empty();
html+= '<div class="books" id="authorInfo-'+key+'">';
html+= '<a href="#" >'+value.name+ key+'</a>';
html+= '</div>';
$(".bookname").append(html);
var astuff = "#authorInfo-"+key+" a";
console.log(value.desc + " val desc");
$(astuff).click(function() {
var text = $(this).text();
console.log(text+ " text");
var bookdetails =''
$("#contentbox").empty();
$.each(value.desc, function(k,v) {
console.log(v.id +"-");
console.log(v.author +"<br>");
bookdetails+= v.id +' <br> '
bookdetails+= v.author + '<br>';
});
$("#contentbox").append(bookdetails);
});
});
},
error: function(e) {
console.log("error " +e.message);
}
});
</script>
</head>
<body>
<div id="container">
<div class="bookname">
</div>
<div id="contentbox">
</div>
<div class="clear"></div>
</div>
</body>
</html>

The problem is you are updating the inner html of the element bookname in the loop, which will result the previously added handlers being removed from the child elements.
The calls $('.bookname').empty(); and $(".bookname").append(html); within the loop is the culprits here. You can rewrite the procedure as something like this
jQuery(function ($) {
var url = 'sample.json';
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'jsoncback',
success: function (data) {
var $bookname = $('.bookname').empty();
$.each(data.class, function (key, value) {
var html = '<div class="books author-info" id="authorInfo-' + key + '">';
html += '' + value.name + key + '';
html += '</div>';
$(html).appendTo($bookname).data('book', value);
});
},
error: function (e) {
console.log("error " + e.message);
}
});
var $contentbox = $("#contentbox");
$('.bookname').on('click', '.author-info .title', function (e) {
e.preventDefault();
var value = $(this).closest('.books').data('book');
var text = $(this).text();
console.log(text + " text");
var bookdetails = '';
$.each(value.desc, function (k, v) {
console.log(v.id + "-");
console.log(v.author + "<br>");
bookdetails += v.id + ' <br> ';
bookdetails += v.author + '<br>';
});
$contentbox.html(bookdetails);
});
});

Change
$(astuff).click(function()
to
$(document).on("click", "#astuff", function()
I assume "astuff" is a ID and you forgot the number sign and quotes in your original selector. The jQuery "click" listener only listens for events on elements that were rendered during the initial page load. You want to use the "on" listener, it'll look for events on elements currently in the DOM.