I can't seem to figure out why I am getting this error I've seen solutions for the error but none of those were using AJAX to get the data if anyone could help that would be great here's the JS:
$(document).ready(function() {
function updatetabel() {
console.log("update");
$.ajax({
url: "/main",
type: 'GET',
dataType: "",
cache: false,
success: function(result) {
console.log("succes!");
console.log()
$(".table-hover-cells").remove();
$.each(result, function(index, value) {
console.log("update_tabel");
var content = "<table class=\"table-hover-cells" +
this[0] + "\" id=\"hover-table\">" + "<thead>" + "<tr>" + "<td>" +
this.Name + "</td>" + "<td>" +
this.Description + "</td>" + "<td>" +
this.Status + "</td>" + "<td>" +
this.Date + "</td>" + "</tr>" + "</thead>" + "</table>"
$("inv").append(content);
})
console.log("tabel_update");
},
error: function(result, thrownError) {
console.log("Failure!")
console.log(result)
}
});
}
updatetabel();
setInterval(function() {
updatetabel()
}, 100000);
});
$(document).ready(function() {
$('table tbody tr td').on('hover', function() {
$(this).toggleClass('bg');
});
});
The following line in your success callback throws the error:
$.each(result, function(index, value) {
...
}
Most likely, your 'result' is not a valid response to your request, and $.each requires a valid array to iterate through. Check the XHR response of your ajax call first to see if an array is returned. It's also better to define your dataType too.
Related
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");
}
});
});
>
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.
Let me first say that I've been coding for less than a week. I'm trying to create a javascript that will refresh my data using an AJAX call that will spit out a PHP's JSON encoded file into a more readable file.
I've successfully spit out the json into an HTML table, however, I want to auto refresh this data so when the database changes, so will my HTML.
$(document).ready(function(){
refresh();
});
function refresh() {
setTimeout( function() {
dbupdates();
refresh();
}, 500);
}
function dbupdates(){
$.ajax({
url: 'fetchtest.php',
type: 'get',
dataType: 'JSON',
success: function(response){
// for loop to only write 10
for(var i=0; i<10; i++){
var id01 = response[i].id1;
var id02 = response[i].id2;
var id03 = response[i].id3;
// tr located in html
var tr_str = "<tr>" +
"<td align='center'>" + id01 + "</td>" +
"<td align='center'>" + id02 + "</td>" +
"<td align='center'>" + id03 + "</td>" +
"</tr>";
// table ID in html file
$("#HTMLTABLE").append(tr_str);
}
}
});
};
When I run the web page, it goes into an infinite loop where it just creates new 10 entries table of the same data (probably does change if db changes).
I know exactly why this happens but what function do I need to use to actually refresh only 10 table?
Thanks
No use append() replace into html() function use solved your problems
<div id="HTMLTABLE"></div>
<script>
$(document).ready(function(){
refresh();
});
function refresh() {
setTimeout( function() {
dbupdates();
refresh();
}, 1500);
}
function dbupdates(){
$.ajax({
url: 'fetchtest.php',
type: 'get',
dataType: 'JSON',
success: function(response){
// for loop to only write 10
var tr_str ='';
for(var i=0; i<response.length; i++){
var id01 = response[i].id;
var id02 = response[i].name;
var id03 = response[i].salery;
// tr located in html
tr_str += "<tr>" +
"<td align='center'>" + id01 + "</td>" +
"<td align='center'>" + id02 + "</td>" +
"<td align='center'>" + id03 + "</td>" +
"</tr>";
// table ID in html file
}
$("#HTMLTABLE").html(tr_str);
}
});
};
</script>
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");
I'm trying to query data using AJAX from a controller, my controller is:
[HttpGet]
public ActionResult GetTestStatus(string userName)
{
var db = new SREvalEntities();
var allTests = db.Tests
.Where(x => string.Equals(x.Owner, userName))
.Select(x => new { CreateDate = x.CreateDate, EndDate = x.EndDate, Status = x.Status })
.OrderByDescending(x => x.CreateDate)
.ToList();
return Json(allTests, JsonRequestBehavior.AllowGet);
}
And my javascript code in an extern file is:
function Filter() {
var userAlias = document.getElementById("UserAliasInput");
var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
$.ajax({
url: '/TestStatus/GetTestStatus',
type: "GET",
dataType: "JSON",
data: { userName: userAlias },
success: function (results) {
$.each(results, function (i, result) {
txt += "<tr><td>" + result.CreateDate + "</td>";
txt += "<td>" + result.EndDate + "</td>";
txt += "<td>" + result.Status + "</td>";
txt += "<td>Goto</td></tr>";
});
}
});
$("#ShowDetail").html(txt);
}
When I tried to debug this function, the code will never excute to
$("#ShowDetail").html(txt);
And my page will never be changed. How can I get it work? Thanks.
As you are using $.ajax(), which is asynchronous. Thus the $("#ShowDetail").html(txt) is called before the value is returned from API.
You should set the html() after the each block
function Filter() {
var userAlias = document.getElementById("UserAliasInput");
var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
$.ajax({
url: '/TestStatus/GetTestStatus',
type: "GET",
dataType: "JSON",
data: { userName: userAlias.value }, //Use the value property here
success: function (results) {
$.each(results, function (i, result) {
txt += "<tr><td>" + result.CreateDate + "</td>";
txt += "<td>" + result.EndDate + "</td>";
txt += "<td>" + result.Status + "</td>";
txt += "<td>Goto</td></tr>";
});
$("#ShowDetail").html(txt); //Move code to set text here
}
});
}
Try the following function
function Filter() {
var userAlias = $("#UserAliasInput").val();//change this
var txt = "<tr><th>StartDate</th><th>EndDate</th><th>Status</th><th>Detail</th></tr>";
$.ajax({
url: '/TestStatus/GetTestStatus',
type: "GET",
dataType: "JSON",
data: { userName: userAlias },
success: function (results) {
$.each(results, function (i, result) {
txt += "<tr><td>" + result.CreateDate + "</td>";
txt += "<td>" + result.EndDate + "</td>";
txt += "<td>" + result.Status + "</td>";
txt += "<td>Goto</td></tr>";
});
$("#ShowDetail").html(txt);//place this in the success function
}
});
}