How to send parameter via js to a ajax js file - javascript

My HTML has this in it:
<script src="../scripts/jquery-1.8.1.min.js"></script>
<script src="../scripts/displayTable.js"></script>
The displayTable.js consists of this:
$.ajax({
url: "https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml",
type: "Get",
dataType: 'xml',
success: function (result) {
$(result).find('Module').each(function() {
var name = $(this).attr("name");
var url = $(this).find('url').text();
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var description = $(this).find('description').text();
$("#ModsList").append("<tr>" + "<td>" + "" + name + "" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
});
},
failure: function() {
alert("Notify the site owner that the xml file is unreadable.");
}
});
How would I make it so that I can pass the url as an argument rather than hard-coding it into the js file, this way I can use the same file across many pages on my site?

Define a function in displayTable.js, then call it after you load the script.
So diaplayTable.js would contain:
function displayTable(url) {
$.ajax({
url: url,
type: "Get",
dataType: 'xml',
success: function (result) {
$(result).find('Module').each(function() {
var name = $(this).attr("name");
var url = $(this).find('url').text();
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var description = $(this).find('description').text();
$("#ModsList").append("<tr>" + "<td>" + "" + name + "" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
});
},
failure: function() {
alert("Notify the site owner that the xml file is unreadable.");
}
});
}
Then you use it as:
<script src="../scripts/jquery-1.8.1.min.js"></script>
<script src="../scripts/displayTable.js"></script>
<script>
$(document).ready(function() {
displayTable("https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml");
});
</script>

Here you go,
function callAjax(url){
$.ajax({
url: url,
type: "Get",
dataType: 'xml',
success: function (result) {
$(result).find('Module').each(function() {
var name = $(this).attr("name");
var url = $(this).find('url').text();
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var description = $(this).find('description').text();
$("#ModsList").append("<tr>" + "<td>" + "" + name + "" + "</td>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>" + description + "</td>" + "</tr>");
});
},
failure: function() {
alert("Notify the site owner that the xml file is unreadable.");
}
});
};
Call the function and pass url as parameter where ever you want to call it.
callAjax("https://carcraft.atsbusinessandgames.com/xmls/carcraft_1-10-2Test.xml");
callAjax("https://google.com");

Related

How to use javescript reduce() Statistics of keywords contained in array members I have a API URL and calculate baseball data, EX. TaggedPitchType

Use the information returned by the API to make a form,
I have a problem with the syntax of statistics, how to use string statistics to turn them into number, and generate a chart table.
enter image description here
enter image description here
<$(document).ready(function () {
/* $("#row").html("<td></td>"); */
$.ajax({
url: 'https://statsinsight-code-interview.herokuapp.com/get/Get_Balls_CI',
type: "get",
dataType: "json",
success: function (info) {
$("#row").html(
"<tr><td>" + info[0].TaggedPitchType + "</td><td>" + info[0].null + "</td></tr>" + info[0].APP_VeloRel + "</td></tr>"
)
console.log(info);
console.log("====================");
console.log(info[3].APP_KZoneY);
console.log(info[3].APP_KZoneZ);
console.log(info[3].TaggedPitchType);
console.log(info[3].APP_VeloRel);
console.log(info[4].Pitch_ID);
console.log(info.length);
total_len = info.length;
for (i = 0; i < total_len; i++) {
$("#row").append(
"<tr>" +
"<td>" + info[i].TaggedPitchType + "</td>" +
"<td>" + info[i].null + "</td>" +`enter code here`
"<td>" + info[i].APP_VeloRel + "</td>" +
"<td>" + info[i].Strikes + "</td>" +
"<td>" + info[i].null + "</td>" +
"</tr>"
/* console.log(info[i].TaggedPitchType); */
)
}
},
error: function (data) {
console.log("failed");
}
});
});
>

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 am working on appending row in javascript but I actually don't know how to append an image in row cell

[I am appending a row. everything appended but image not showing. I tried some ways but cant solve this problem][1]
function SearchDrivers() {
var Id = document.getElementById('driverSearch').value;
$.ajax({
url: "/Administration/SearchDrivers/" + Id,
type: "Get",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (response) {
var table = document.getElementById('DriverTable');
var drivers = response['users'];
for (var j = 0; j <= drivers.length; j++) {
var driver = drivers[j];
tr = "<tr>"
+ "<td>" + driver['email'] + "</td>"
+ "<td>" + driver['email'] + "</td>"
+ "<td>" + "033138445156666" + "</td>"
+ "<td>" + "<button class='table-btn'>unverified</button>" + "</td>"
this is the way i am appending an image and its style. I used some more ways to append a image but thay also not working for me.
+ "<td>" + "<a asp-action='DriverProfile'><img class='ml-2 icon-15' src='~/svg/visibility.svg'></a>" + "</td>"
+ "</tr>";
$('#DriverTable tbody').append(tr);
}
}
});
}
Your svg folder should be placed under wwwroot.
Then you need to change your path to
<img class='ml-2 icon-15' src='/svg/visibility.svg'></a>
Delete the ~.

Export button in datatable does not take filters into consideration

im new here , i write you because i have a problem when i export data from datatable i export the data without filtring : here is my code javascript
$('#returnview').DataTable({
pagingType: "full_numbers",
bInfo: false,
dom: 'lBfrtip',
buttons: [
'copyHtml5',
'excelHtml5'
],
function: showReturnViewData()
});
function showReturnViewData() {
var contractType = $("#contractTypes").val();
var company = $("#company").val();
var year = $("#selectdate").val();
var tbody = document.getElementById('tbody');
tbody.innerHTML = ''
$.ajax({
url: "api/Operations/showReturnViewData",
async: false,
dataType: "json",
data: { contractType, company, year },
success: function (data) {
var displayReturnView = JSON.parse(data.returnViewData);
for (var i = 0; i < displayReturnView.length; i++) {
var tr = "<tr>";
var sum = 0;
sum += parseInt(displayReturnView[i].Decommissioned) + parseInt(displayReturnView[i].LocalStock) + parseInt(displayReturnView[i].Return)
+ parseInt(displayReturnView[i].Replace) + parseInt(displayReturnView[i].Missing) + parseInt(displayReturnView[i].UnRepair)
+ parseInt(displayReturnView[i].Used) + parseInt(displayReturnView[i].Repair);
tr += "<td><a style='cursor: pointer; text-decoration: underline; color: blue;' target='_blank' href='/DecommissioningTarget?contractType=" + contractType+"&&company=" + company + "&&date=" + displayReturnView[i].DecommissioningdDate + "'>" + displayReturnView[i].DecommissioningdDate + "</a></td>" + "<td>" + displayReturnView[i].Decommissioned +
"</td>" + "<td>" + displayReturnView[i].Return + "</td>" + "<td>" + displayReturnView[i].LocalStock + "<td>"
+ displayReturnView[i].Replace + "<td>" + displayReturnView[i].Used + "</td>"+
"<td>" + displayReturnView[i].Repair + "</td>" + "<td>" + displayReturnView[i].UnRepair + "</td>"
+ "<td>" + displayReturnView[i].Missing + "</td>" + "<td>" + sum + "</td>"
"</td></tr>";
tbody.innerHTML += tr;
}
}
});
var x = document.getElementById("returnview").rows.length;
document.getElementById("rvEntries").innerHTML = x - 1;
}
Try
name of param
get string in the method variable
| | |
data: JSON.stringify({ contractType: contractType }),
or:
data: JSON.stringify({ contractType: $("#contractTypes").val() }),
multiple args:
data: JSON.stringify({ contractType: contractType, company: company, year: year }),
etc...

how to sort array to show data of countries with covid cases in descending order instead of alphabetical order? [duplicate]

This question already has answers here:
Sorting an array of objects by property values
(35 answers)
Closed 2 years ago.
this code is fetching data of Covid19 statistics using API currently its showing data of covid cases of all countries in Alphabetical order ......i want to show data in descending order i.e country with more cases should come first in table
$.ajax({
url: "https://api.covid19api.com/summary",
type: "GET",
dataType: 'JSON',
success: function(data) {
console.log(data);
console.log(data.Countries);
var sno = 1;
$.each(data.Countries, function(key, value) {
$("#country-wise").append("<tr>" +
"<td>" + sno + "</td>" +
"<td>" + value.Country + "</td>" +
"<td>" + value.NewConfirmed + "</td>" +
"<td>" + value.NewDeaths + "</td>" +
"<td>" + value.NewRecovered + "</td>" +
"<td>" + value.TotalConfirmed + "</td>" +
"<td>" + value.TotalDeaths + "</td>" +
"<td>" + value.TotalRecovered + "</td>" +
"</tr>");
sno++;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="country-wise"></table>
Use the sort method of Array.
$.ajax({
url: "https://api.covid19api.com/summary",
type: "GET",
dataType: 'JSON',
success: function(data) {
console.log(data);
console.log(data.Countries);
data.Countries.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed);
var sno = 1;
$.each(data.Countries, function(key, value) {
console.log(key + ":" + value);
$("#country-wise").append("<tr>" +
"<td>" + sno + "</td>" +
"<td>" + value.Country + "</td>" +
"<td>" + value.NewConfirmed + "</td>" +
"<td>" + value.NewDeaths + "</td>" +
"<td>" + value.NewRecovered + "</td>" +
"<td>" + value.TotalConfirmed + "</td>" +
"<td>" + value.TotalDeaths + "</td>" +
"<td>" + value.TotalRecovered + "</td>" +
"</tr>");
sno++;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="country-wise"></table>

Categories

Resources