We Keep Coding

Why is my data not displaying when onClick function is added?

My code could display the data without the onclick function but when it's added the data does not display in my table. There are no errors being displayed as well.
This is the code to get the json data and display:
<script>
var url = "http://127.0.0.1:8080/Assignment2/video/backend/RestController.php?view=all";
$('#viewUser').on('click',function (e){
$.ajax({
method: "GET",
cache: false,
url: url,
success: function(data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' +
value.id + '</td>';
student += '<td>' +
value.username + '</td>';
student += '<td>' +
value.videoName + '</td>';
student += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
},
error:function(exception){alert('Exeption:'+exception);}
})
e.preventDefault();
});
</script>
This is the code for the button (for onclick function):
<h2>View Stored User</h2>
<button type="button" id="viewUser">GO</button>
[The error i'm receiving from the console log of the browser tho it's not related][1]
[1]: https://i.stack.imgur.com/7TZ3a.png

Ajax returns undefined objects in the list in asp.net

I am developing a web application in asp.net where in the index page I implemented an AJAX call to get the list of defect object and populate it into the HTML table.
I have written a method in the controller "GetDefect" which return the list of defects in JSON format.But the result is ended up as undefined when I get it on the Javascript side.
I have spent hours and still cannot find the solution. I had also searched other StackOverflow questions but could not help it.
The Model Class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication3.Models
{
public class Defect
{
private string ID;
private DateTime date_created;
private string updated_by;
private string created_by;
private string description;
public Defect(string ID, DateTime date_created,string updated_by,string ,created_by,string description)
{
this.ID = ID;
this.date_created = date_created;
this.updated_by = updated_by;
this.created_by = created_by;
this.description = description;
}
}
}
The controller
[HttpGet]
public JsonResult GetDefects()
{
IList<Defect> dataList = new List<Defect>();
dataList.Add(new Defect("eththeth",DateTime.Now.Date,"ergerger","ergergerger","ergerg"));
dataList.Add(new Defect("wefwefwef", DateTime.Now.Date, "wew44r3", "gbnvfbnvbn v", "gbndfgnbfgnf"));
return Json(new { dataList = dataList }, JsonRequestBehavior.AllowGet);
}
The JS file
$(document).ready(function () {
GetFoodDetails();
});
function GetFoodDetails() {
$.ajax({
type: "GET",
url: "Home/GetDefects",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data.dataList);
applychanges(data);
},
error: function (response) {
alert('eror');
}
});
}
function applychanges(result) {
console.log(result);
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.ID + '</td>';
html += '<td>' + item.description + '</td>';
html += '<td>' + item.defect_status + '</td>';
html += '<td>' + item.date_created + '</td>';
html += '<td>' + item.created_by + '</td>';
html += '<td>' + item.location_lang + '</td>';
html += '<td>' + item.location_long + '</td>';
html += '<td>Edit | Delete</td>';
html += '</tr>';
});
$('.tbody').html(html);
}
HTML (the table)
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Date Raised</th>
<th>Date Due</th>
<th>Defect Status</th>
<th>Defect Remarks</th>
<th>Langitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
If anyone knows , please help. Thanks in advance

Private fields are not serialized by the JavaScriptSerializer. Make them public properties in your model.
public class Defect
{
public string ID { get; set; }
public DateTime date_created { get; set; }
.... // etc
Your method is also expecting the collection so it should be
success: function (data) {
applychanges(data.dataList); // change
Alternatively, change the controller method to just return the collection
return Json(dataList, JsonRequestBehavior.AllowGet);

Please try by replacing the GetFoodDetails with the following.
function GetFoodDetails() {
$.get('/Home/GetDefects', null, function (data) {
$.each(data.dataList, function (i, dl) {
alert(dl.ID);
});
});
}
and if it works please let me know and there is no change in your controller action method code.
Also you can try this one also
function GetFoodDetails() {
$.ajaxSetup({
async: false
});
$.ajax({
type: 'GET',
url: '/Home/GetDetails',
success: function (data) {
alert(data.dataList);
}
});
}

JavaScript table doesn't render in table

I have this JavaScript
function pickdet(Id) {
//alert(Id);
var dd = Id;
$.ajax({
cache: false,
url: "/PVSigns1/GetDetails",
data: { 'Id' : Id },
type: "GET",
dataType: "json",
success: function (data) {
//alert('i dey here')
var row = "";
var baseurl = '#Url.Action("Edit","PVSigns1")' + '?Id=';
$.each(data, function (index, item) {
var clickUrl = baseurl + item.PVSignId;
//row += "<tr><td>" + item.VitalSigns.Sign + "</td><td>" + item.SignValue + "</td><td> <input type= 'button' onclick= location.href = + '<Url.Action("Create", "PVSigns1", new { Id = item.PVSignId }) ' />" + "</td></tr>";
row += "<tr><td>" + item.VitalSigns.Sign + "</td><td>" + item.SignValue +
"</td><td> <button class='editbtn btn btn-xs btn-success' data-url = '" + clickUrl + "'> <i class='fa fa-edit fa-lg'></i> Edit</button></td></tr>";
});
$("#pvv").html(row);
},
error: function (result) {
$("#pvv").html('Nothing to show <br /> <p />' + result);
}
});
}
$(function () {
$("button.editbtn").click(function (e) {
alert("url");
e.preventDefault();
//e.defaultPrevented();
window.location.href = $(this).attr("url");
});
});
When I run it, it display perfectly on the browser, but the link created don't work, and when I view the page source, the tbody part which the code above is supposed to inject, doesn't get rendered.
This is what I get, Click on any of the green buttons
in the top table, it loads the second table. The issue is with the second table.
Note: I am using JQuery Datatables.
This the rendered output from page source
<div>
<h3> Details</h3>
<table id="Pv" class="table table-condensed">
<thead>
<tr>
<th>Sign</th>
<th> Value </th>
<th></th>
</tr>
</thead>
<tbody id="pvv">
</tbody>
</table>
Notice <tbody id="pvv"> is empty, not table elements there. What is the issue?

You need to use delegation of dom element for click event. which element generated after binding event after existing dom
$("#Pv").on('click','button.editbtn', function (e) {
alert("url");
e.preventDefault();
//e.defaultPrevented();
window.location.href = $(this).attr("url");
});

how to load all matching data row for selected dropdown values ajax

i have dropdown boxes for user_id and er and once both selected i want to load all the data as rows. please advice.
below is my controller
$getShifts = Shifts::Where('user_id','=',$user_id)->Where('week_id','=',$week)->get();
how can i proceed
table
<table class="table table-hover">
<tr class="table-header">
<th>Day</th>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Total
<br/> Hours
</th>
<th>Run
<br/> Type
</th>
<th>Edit
<br/> / Delete
</th>
</tr>
EDIT
plese check below code which i have tried
success: function(data) {
var json_obj = $.parseJSON(data);//parse JSON
var output="<tr>";
for (var i in json_obj)
{
output+=
"<td>" + json_obj[i].id + "</td>"+
"<td>" + json_obj[i].bus_no + "</td>"+
"<td>" + json_obj[i].shift_no + "</td>"
;
}
output+="</tr>";
$('#span').html(output);
}

You should call your controller function in ajax and in controller you will get the selected data, so based on that run required query.
$(document).ready(function() {
$("#combo, #user_id").change(function(){
var combo = $('#combo option:selected').val();
var user_id = $('#user_id option:selected').val();
if(combo && user_id) {
$.ajax({
url: "path to controller function",
type: "POST",
dataType: "HTML",
async: false,
data:{combo:combo.user_id:user_id},
success: function(data) {
alert(data) // here you ll see the data from controllen, you can manipulate according to your requirement.
}
});
}
});
});
in controller
echo "
<tr>
<td>$day</td>
<td>$date</td>
<td>$start</td>
<td>$end</td>
<td>$end</td>
<td>$end</td>
</tr> ";
manipulate all fields in to a tr in controller and in ajax success() append the data to table.

Empty data in html append table

I have the following script which populates a table with data when a dropdown value is selected :
<script>
$(document).ready(function(){
$('#commodity_name').change(function (){
//picks the value of the selected commodity_name from the dropdown
option = $(this).find('option:selected').val();
html='';
htmlhead='';
// alert(option)
$.ajax({
type:"GET",
//gets data from the url specified based on the selected commodity_name in the dropdown
url:"<?php echo base_url();?>user_transactions/return_details/"+option,
dataType:"json",
success:function(data){
for(i=0;i<data.length;i++){
//Loops through the data to give out the data in a table format
//alert(data[i].transaction_type)
html += '<tr>\n\
<td><input type="text" id="commodity_name' + i + '" name="commodity_name[]" value="'+data[i].commodity_name+'"/></td>\n\
<td><input type="text" id="transaction_type' + i + '" name="transaction_type[]" value="'+data[i].transaction_type+'"/></td>\n\
<td><input type="text" id="total_quantity' + i + '" name="total_quantity[]" value="'+data[i].total_quantity+'"/></td>\n\
<td><input type="text" id="remarks' + i + '" name="remarks[]" value="'+data[i].remarks+'"/></td>\n\
<td><input type="text" id="unit_cost' + i + '" name="unit_cost[]" value="'+data[i].unit_cost+'"/></td>\n\
<td></td><td></td></tr> ';
}
htmlhead+='\n\
<th>Commodity Name</th>\n\
<th>Transaction Type</th> \n\
<th>Available Quantity</th> \n\
<th>Available Quantity</th> \n\
<th>Department</th>\n\
<th>Requestor Name</th>\n\
';
//alert(html);
//alert(htmlhead);
$('#thead').append(htmlhead);
$('#you').append(html);
//delegated submit handlers for the forms inside the table
$('#issue_1').on('click', function (e) {
e.preventDefault();
//read the form data ans submit it to someurl
$.post('<?php echo base_url()?>transactions/issues', $('#Issues_Form').serialize(), function () {
//success do something
alert("Success");
var url = "<?php echo base_url()?>transactions/view_request";
$(location).attr('href',url);
}).fail(function () {
//error do something
alert("Failed please try again later or contact the system Administrator");
})
})
},
error:function(data){
}
})
});
});
</script>
How can I clear the data from the html table that has been appended when I select the next commodity_name in the drop down list , I get only the data returned from the new select I have picked from the drop down list.

Just empty the html before appending.
...
$('#thead').empty();
$('#you').empty();
$('#thead').append(htmlhead);
$('#you').append(html);
...

Try to use the .detach() method of Jquery. Here the link: http://api.jquery.com/detach/