We Keep Coding

Onclick event open a new page and load an table by doing an api call using javascript

I'm trying to display a table on a new page by calling an API and loading the data in the table. This page is loaded on click of a menuItem.
But the issue I'm facing is that the table is displaying, but not the data I'm intending to. I know that I'm able to fetch the data from the API since i can see that in the console log.
Here is the code:
In this first html file im clickling the menu and calling my next html page i want to load
and also im giving my id="covidLink" which im calling in my JS FILE.
pan.html
<div class="navbar">
<a class="covidText" id="covidLink" href="covidStatusUpdate.html">Covid-19</a>
</div>
In the below js file im making a call to the api and appending the data in tbody.
Fetchdata.js
$(document).ready(function () {
$("#covidLink").click(function () {
console.log("Link clicked...");
requestVirusData();
});
});
function requestVirusData() {
$.getJSON('https://api.covid19api.com/summary',
function(data){
var countries_list = data.Countries;
//console.log(countries_list);
$(countries_list).each(function(i, country_dtls){
$('#totalbody').append($("<tr>")
.append($("<td>").append(country_dtls.country))
.append($("<td>").append(country_dtls.TotalConfirmed))
.append($("<td>").append(country_dtls.TotalDeaths))
.append($("<td>").append(country_dtls.TotalRecovered)));
});
})
}
and lastly
statusUpdate.html
<table class="table table-striped table-bordered table-sm" cellspacing="0" width=80%>
<thead>
<tr>
<th>Country</th>
<th>TotalConfirmed</th>
<th>TotalDeaths</th>
<th>TotalRecovered</th>
</tr>
</thead>
<tbody id="totalbody">
</tbody>
</table>
What am I supposed to do ? I have to admit that I'm lost here.

I don't think you quite understand how AJAX works. You're handling a click on "covidLink". This does two things simultaneously.
it tells the browser to navigate away from the current page and go to statusUpdate.html instead.
it runs the requestVirusData() function. This gets the data from the API and returns it to the page.
But the problem is: the API call returns the data to the page where the script was called from - i.e. it returns it to pan.html. And you've just told the browser to move away from that page. Also, pan.html doesn't contain a table to put the returned data into.
The logical solution here is to link to fetchdata.js from statusUpdate.html instead, and tweak the code slightly so it runs when that page loads, rather than on the click of a button:
$(document).ready(function () {
console.log("page loaded...");
requestVirusData();
});

As suggested by ADyson i did changes in my code and now im able to display the table with data.
Here are my code changes:
statusUpdate.html
<tbody id="tbody">
<script>
var datatable;
fetch('https://api.covid19api.com/summary')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var countries_list = data.Countries;
var tbody = document.getElementById("tbody");
// clear the table for updating
$('table tbody').empty();
// hide the table for hidden initialize
$('table').hide();
// loop over every country
for (var i in countries_list) {
var country_dtls = countries_list[i];
// replace -1 with unknown
for (var o in country_dtls) {
if (country_dtls[o] == -1) country_dtls[o] = 'Unknown';
}
$('table tbody').append(`
<tr>
<td>${country_dtls.Country}</td>
<td>${country_dtls.TotalConfirmed}</td>
<td>${country_dtls.TotalDeaths}</td>
<td>${country_dtls.TotalRecovered}</td>
</tr>`);
}
}
// }
</script>
</tbody>
pan.html
<a class="covid" href="statusUpdate.html">Covid-19</a>
and now i do not need fetchdata.js obviously.
Hope this helps someone stuck like me :)

MVC - How to refresh HTML table after setting a value in <select> element

From what I understand, the Razor foreach statement used in a HTML table in a View iterates through the items found in an IEnumerable which is declared as a #model at the top of the View file, and that #model comes from a Controller returning the View with that IEnumerable as an argument for it's Model parameter.
I am not sure if my logic is good here - I am trying to replace that IEnumerable with another one returned from a Controller Action which takes a value as a parameter to selectively fill the IEnumerable based on that value. This value is passed as an {id} through jQuery after the value of an HTML select element is changed. After replacing the IEnumerable I could reload the table using jQuery and the #foreach iterating through the new IEnumerable would display the results needed based on the selected value in the HTML select element.
However, I am not sure how to do this. I have been trying various methods I could think of or find on StackOverflow as solutions to similar problems, no luck.
I am now stuck at this point without any idea where to go.
HTML:
#model IEnumerable<TrgovinaMVC.Models.racun>
...
<select class="selectpicker" id="selektor" data-style="btn-primary" onchange="TypeChanged(this)">
<option>Gotovinski</option>
<option>Virman</option>
</select>
...
<div id="tabela">
<table class="table table-hover">
...
<tbody>
#foreach (var item in Model)
{
<tr>
...
JavaScript:
function TypeChanged(element) {
var val = $(element).val();
$("#tabela").load("/racuns/Reload/" + val);
Controller:
public ActionResult Reload(string id)
{
List<racun> list = new List<racun>();
foreach (racun r in db.racuns)
{
if (r.tipracuna == id)
list.Add(r);
}
return View(list);
}
Please point me to the right direction. Thanks in advance!

There are two ways to fix your problem
To reload the entire page in TypeChanged() fucntion
To create a partial view and load the table alone from that - suggessted
Controller:
public ActionResult Reload()
{
return View();
}
public ActionResult _ReloadTable(string id)
{
List<racun> list = new List<racun>();
foreach (racun r in db.racuns)
{
if (r.tipracuna == id)
list.Add(r);
}
return PartialView(list);
}
In Reload.cshtml - keep the dropdown code alone
Reload.cshtml
<select class="selectpicker" id="selektor" data-style="btn-primary" onchange="TypeChanged(this)">
<option>Gotovinski</option>
<option>Virman</option>
</select>
<div id="tabela">
</div>
<script>
function TypeChanged(element) {
var val = $(element).val();
$("#tabela").load("/racuns/_ReloadTable/" + val);
</script>
_ReloadTable.cshtml
#model IEnumerable<TrgovinaMVC.Models.racun>
<table class="table table-hover">
...
<tbody>
#foreach (var item in Model)
{
<tr>
On dropdown change event, partial view will be loaded every time and table data will be updated based on value selected in dropdown

How to remove clicked row while sending parametr to a function? Knockout

I have some complication with service removing. I have function that removes service on the server but I have to reload page to update table. I found way how to remove row by click-binding but there is the issue beacuse I can only remove row or get ID for delete service from server NOT both. :/
This is example of code that removes service on the server but doesn't remove table row.
HTML:
<table id="serviceView" class="fixed_header" border: 1>
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Notification</th>
</tr>
</thead>
<tbody data-bind="foreach: services">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: address"></td>
<td data-bind="text: serviceId"></td>
<td ><button data-bind="click: $parent.DeleteService.bind(this, serviceId)">Remove</button></td>
</tr>
</tbody>
</table>
JS:
self.services = ko.observableArray([]);
self.lastCheck = ko.observable();
$.getJSON("http://localhost:55972/api/status", function (data) {
self.services(data.services);
self.lastCheck = data.lastCheck;
}); //////This is loading data to the table from server
self.DeleteService = function (serviceId) {
$.ajax({
type: "GET",
url: "http://localhost:55972/api/services/remove/" + serviceId,
}).done(function () {
self.services.remove(serviceId)
})
};
This is example of code that removes table row
When I use click-binding like this:
<button data-bind="click: $parent.DeleteService">Remove</button>
And change delete function to this:
self.DeleteService = function (serviceId) {
self.services.remove(serviceId)
$.ajax({
type: "GET",
url: "http://localhost:55972/api/services/remove/" + serviceId,
}).done(function () {
// here I want to remove row but i doesnt goes here without service ID.
})
};
It removes row but instead serviceId I got [object, object] in the URL.
Can you help me with it ? I got idea to use jquery to just update the table but it's seems unnecessarily complicated for me when I can use knockout.
I know the solution is not that hard but I'am just unable to solve it..... -_-
I'am sorry for taking time with this bullshit but this is my first real project and I'am so desperate at this point beacuse I have lot of things to do and I'am stucked on this.

In your Js code, you can try this:
self.services = ko.observableArray([]);
self.lastCheck = ko.observable();
$.getJSON("http://localhost:55972/api/status", function (data) {
self.services(data.services);
self.lastCheck = data.lastCheck;
}); //////This is loading data to the table from server
var serviceIdRemoved;
self.DeleteService = function (serviceId) {
serviceIdRemoved = serviceId; // now you can do whatever you need more with this value
$.ajax({
type: "GET",
url: "http://localhost:55972/api/services/remove/" + serviceId,
}).done(function () {
self.services.remove(serviceId)
})
};
With this way of work you can user the content of the variable and don´t loose it. Also if you get [Object, Object], you can:
console.log(serviceId) // to see the content in the console.
JSON.stringify(data) //to see the content in html
This source could help you to understand it better.

The [object, object] you are seeing is actually the data and event objects which are secretly added to the JS function parameters by Knockout. If you want to add your own parameter to the click binding then you should do it like this:
<button data-bind="click: function(data, event) { $parent.DeleteService(serviceId, data, event) }">Remove</button>
You can then define your JS function as follows:
self.DeleteService = function (serviceId, data, event) {
[code here...]
}
You can read up on the exact details of it in the excellent Knockout documentation here:
http://knockoutjs.com/documentation/click-binding.html
It's about half-way down under the heading that reads Note 2: Accessing the event object, or passing more parameters

MVC Calling a function from a partial view is not working

This is my first MVC application, and this must be something simple but I've been trying to make this work for so many hours now..
What I want to do
I want to display a table in a partial view and be able to delete items from the parent view. The simple version looks something like this (the actual application is not about fruits):
What I have now
Partial View (_FruitList.cshtml)
<div id="listOfFruits">
<table class="table">
<tr>
<th class="active">Description</th>
<th class="active">Amount</th>
</tr>
#foreach(var item in Model)
{
<tr>
<td>#item.Description</td>
<td>#item.Amount</td>
<td><button class=".." onclick="d(#item.FruitID)">Delete</button></td>
</tr>
}
</table>
</div>
Parent View (Home.cshtml)
#section scripts
{
<script type="text/javascript">
$(document).ready(function (){
function d(id){
var url = "/Fruit/DeleteFruit/";
$.post(url, {id: id})
.done(function(response){
$("#listOfFruits").html(response);
});
}
});
</script>
}
#{Html.RenderPartial("_FruitList", Model.FruitList);}
Controller (FruitController.cs)
[HttpPost]
public ActionResult DeleteFruit(int id)
{
//Delete the selected fruit
FruitViewMode item = new FruitViewMode();
return PartialView(item.FruitList);
}
My Question
I can view the table with the fruit data in the parent view, but clicking the Delete button does not call the d function in the parent view.
(Javascript and JQuery should be working in the partial view because I've tested alert and addClass and they work fine)
I'm very new to this so it's very likely that I'm missing some basic stuff but what am I missing?

d() isn't declared in the global page scope, so it isn't found. declare it in the root of the <script> tag (i.e., not within a document.ready) to have access to it from the onclick
<script type="text/javascript">
function d(id){
var url = "/Fruit/DeleteFruit/";
$.post(url, {id: id})
.done(function(response){
$("#listOfFruits").html(response);
});
}
</script>

I believe in the past I had used a HTML.ActionLink for the same goal of deleting something by Id:
HTML.ActionLink method

Observable array not showing all items in array

I have a knockout observableArray bound to a table below.
<table id="Users">
<thead>
<tr>
<td>User Name</td><td>Primary Email</td><td>Product Role</td><td>Active</td><td>EditUser?</td>
</tr>
</thead>
<tbody data-bind="foreach: CustomerUsers">
<tr>
<td data-bind="text: UserName"></td>
<td data-bind="text: PrimaryEmail().EmailAddress"></td>
<td><select></select></td>
<td data-bind="text: StaticActiveText"></td>
<td>Edit User</td>
</tr>
</tbody>
</table>
And the following view model:
function CustomerAdminVm() {
var vm = this
this.CustomerUsers = ko.observableArray(GetCustomerUsers());
}
My problem is that when the view model initially loads GetCustomerUsers it correctly gets the values it needs, and inserts them into the observable array. However, the elements are not displayed in the table.
The strange thing is that if I call the following function:
this.AddUserToCustomer = function () {
if (vm.NewUser) {
vm.CustomerUsers.push(vm.ActiveUser());
}
vm.CloseUserModalDialog();
}
The user is added to the array, and correctly displayed in the table. Even more confusing is that the latest value of the array in the push shows the initial values that are not displayers are in the array.
Does anyone have any idea what could be causing this behavior?
The code for GetCustomerUsers is:
function GetCustomerUsers() {
var users = [];
$.ajax({
type: 'Get',
url: ControllerBase + 'Actions/GetAllUsersForCustomer',
async: false,
success: function (data) { users = $.map(data, function(item) { return new ObservableUser(item); }); }
});
return users;
}
And ActiveUser is also an ObservableUser.

What you should do is to create the ko variable in the constructor and then update it with the ajax values when the data arrives.
function CustomerAdminVm() {
var vm = this
this.CustomerUsers = ko.observableArray();
GetCustomerUsers(this.CustomerUsers);
}
function GetCustomerUsers(getData) {
$.ajax({
type: 'Get',
url: ControllerBase + 'Actions/GetAllUsersForCustomer',
async: false,
success: function (data) { getData($.map(data, function(item) { return new ObservableUser(item); })); }
});
}

Ok I actually found a work around for this. Instead of populating the data as part of the constructor I add it after the document is ready
function CustomerAdminVm() {
var vm = this
this.CustomerUsers = ko.observableArray();
$(document).read(function(){vm.CustomerUsers(GetCustomerUsers());});
}
I'm going to throw a theory out as to what is actually happening, feel free to tell me I am wrong, but the solution does work.
What I believe to be happening is the data is being populated in the viewmodel constructor. But because the call is a synchronous call the constructor is not completing before the data is being populated. then the apply bindings function is being called, but because the data is prepoulated before the apply bindings function comes back the data already in the object is ignored because it has no observable change. During a normal async operation the call the constructor completes, then the apply bindings function is applied, and then the data comes back and the observable is changed causing an event flag to update the view.