Fix Ajax call not binding the result to a HTML id

Fix Ajax call not binding the result to a HTML id - javascript

I am writing some jQuery and Java code that sends an ajax call to my Java backend to do a procedure and then sends the results back to my jQuery. However, when I run a debug I notice that the information is being sent from Java to jQuery successfully, the issue is the jQuery is cutting off the remaing words after the first space. Below is my code and the result.
Jquery:
function fillInGPData() {
$.ajax({
type : "POST",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url : "/ajax/getGPdata",
data : JSON.stringify(""),
success : function(result) {
console.log("Result Selector: " + result);
console.log(result == null);
$.each(result, function(i, obj) {
console.log("Object: " + obj);
console.log("Tier: " + obj.tier);
console.log( "Selname: " + obj.selname);
console.log("Query: " + obj.query);
console.log("Description: " + obj.description);
console.log("Comment: " + obj.comments);
$(".tableBody1").append(
"<tr id=" + obj.selname + ">"
+ "<td class='sm-width-td'>"
+ obj.selname + "</td>" + "</tr>");
});
},
error : function(err) {
console.log(err);
}
});
}
Result:
<tr id="Windows" file="" share=""><td class="sm-width-td">Windows File Share</td></tr>
So its the obj.selname that is giving the issue. For example, if I pass Windows File Server, it will only show Windows for the ID. That where the problem is. I just need help figuring out why that is the case.

Related

Update: How do I dynamically populate a list with data from a JSON file?

I want to dynamically populate a list with elements from a JSON file. The idea is to switch the test_ID in the list with the actual object from the JSON file. How do I do this?
JSON file
[
{
"id": "a",
"test": "Java",
"testDate": "2016-08-01"
},
{
"id": "b",
"test":"JavaScript",
"testDate": "2016-08-01"
}
]
jQuery
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
});
$("#test_ID").empty(); //emtpy the UL before starting
$.each(arr_json, function(i, v, d) {
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
});
}
});
});
HTML
<li id="test_ID"></li>
I do receive a couple of errors. The Line:
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
gives the following error: invalid number of arguments and unclosed String literal.
I am also unsure of how to identify to specific elements in the JSON file.
Update
I would like if the list element was in this format "Java 2016-08-01" and "JavaScript 2016-08-01". Thank you!

You have a couple of errors in your javascript. See the corrected version below:
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
$("#test_ID").empty(); //emtpy the UL before starting
// **************** correction made to the line below ***********************
$.each(result, function(i, v, d) {
// **************** correction made to the line below ***********************
$("#test_ID").append('<li id="' + v.id + '">' + v.test + ' ' + v.testDate + '</li>'); // correction made here
});
}
});
});

I did a quick fiddle. I don't quite understand what you're doing with v.test being unmarked inside the HTML tags so I did not include it. I used minimal JQuery to avoid complexity.
https://jsfiddle.net/ndx5da97/
for (record in data) {
$("#test_ID").append('<li id="' + data[record].id + '">' + data[record].testDate + '</li>');
}
Hope this helps!

Ajax call jsonp from PHP

Hi guys so i made a code that parses a CSV file into a JSON ARRAY with PHP. So when you go to this URL you get the PHP output:
http://www.jonar.com/portal/mynewpage.php
Now i used this code to append my JSON ARRAY to HTML but now things have changed since i am using PHP i am not sure how to use it and what to do differently.
Also my ajax call is always empty which is weird..
$.ajax({
type: 'GET',
url: 'http://www.jonar.com/portal/mynewpage.php',
dataType: 'jsonp',
success: function(response) {
alert(response);
}
});
I used this to append my JSON ARRAY but now if i can get the response do i use the same code or will it have to be altered?
$.each(results.data.slice(1), // skip first row of CSV headings
function(find, data) {
var title = data.title;
var link = data.link;
var date = data.date;
var type = data.type;
var where = data.where;
var priority = data.priority;
if (priority == '1') {
$('ul.nflist').prepend($('<li>', {
html: '' + title + ' ' + ' ' + '<span class="category">' + type + '</span>'
}));
} else if (where == 'pp', 'both') {
$('ul.nflist').append($('<li>', {
html: '' + title + ' ' + ' ' + '<span class="category">' + type + '</span>'
}));
}
});
the reason i used PHP is to avoid cross domain issue
Thanks for the help guys!

Concat parameter syntax

Not sure how to even ask the question, if any suggestions for the title please let me know...
I have the following function that retrieves via AJAX information of a JSON file. This function as you can see below:
setOptionsSettings("[data-machine-brand-options]", apiUrlMachineBrands, 'name');
function setOptionsSettings(htmlElement, url, apiParameter) {
$.ajax({
dataType: "json",
url: url,
// CREATE GENERIC SOLUTION for the spinner
beforeSend: function(xhr) {
$('main').html('<div class="spinner"><div class="hori-verti-centering"><div class="bounce bounce1"></div><div class="bounce bounce2"></div><div class="bounce bounce3"></div></div></div>');
setHeader(xhr);
},
success: function (data) {
$.each(data, function(i) {
$(htmlElement).append("<option id=" + data[i].id + " value=" + data[i].apiParameter + ">" + data[i].apiParameter + "</option>");
});
}
});
return {};
}
I'm trying to set apiParamter so when you call the function setOptionSettings you can place the name of the parameter you need to call. So in this case the parameter is name. How can I insert this into the function so it works?
I tried the following and other solutions but nothing would work, any suggestions?
$(htmlElement).append("<option id=" + data[i].id + " value=" + data[i]. + apiParameter + ">" + data[i]. + apiParameter + "</option>");

To access object property using string key use Bracket notation i.e data[i][apiParameter]
As you are using jQuery create element using it.
$(htmlElement).append($('<option></option>', {
"id": data[i].id,
"value": data[i][apiParameter]
}));

Ajax post not sending data out

var dataString = 'edulevel='+ edulevel
+ '&course=' + course
+ '&financerelated=' + financerelated
+ '&occupation=' + occupation
+ '&joblevel=' + joblevel
+ '&income=' + income
+ '&bankname=' + bankname
+ '&acctype=' + acctype
+ '&accno=' + accno;
//ajax
$.ajax({
type:"POST",
url: "process/veriamateur.php",
data: dataString,
success: success(),
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});
I have checked and made sure that dataString was sending out correct stuff, however, the ajax was just not sending out any data, no error whatsoever. Even when I changed the url to an invalid one it still went to my success function.

You should pass data as an object instead of a string when you are sending via POST
Example:
data = {
'edulevel': edulevel,
'course': course
(.....)
};

I have made some changes and now this is working your callback function was success() and jQuery was trying to find the function, either you can write your function at same place or you can write a stand alone function and assign it to sucess:, if you are still getting problem try to change your url, if your current files location is /files/file.php
then your veriamateur.php must be /files/process/veriamateur.php
var dataString = 'edulevel='+ edulevel
+ '&course=' + course
+ '&financerelated=' + financerelated
+ '&occupation=' + occupation
+ '&joblevel=' + joblevel
+ '&income=' + income
+ '&bankname=' + bankname
+ '&acctype=' + acctype
+ '&accno=' + accno;
//ajax
$.ajax({
type:"POST",
url: "process/veriamateur.php",
data: dataString,
success: function(){ alert('success');},
error:function(jqXHR, textStatus, errorThrown){
alert("Error type" + textStatus + "occured, with value " + errorThrown);
}
});

jQuery nested each/Ajax issue

I have nested each loops but an Ajax request in the second loop seems to not be adding to a variable that I declare in the first loop.
This is an example ("personal" information excluded) of what I am using:
var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];
function loadFeeds() {
$.each(pages, function(index, page) {
$(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
html = "<div class=\"page\" id=\"" + page[0] + "\">";
$.each(page[1], function(index, feedUrl) {
$.ajax({
type: "GET",
url: feedUrl,
processData : true,
data: {
tagmode: "any"
},
jsonp: "jsonp",
dataType: "jsonp",
success: function(data) {
html += "Some header HTML";
$.each(data.responseData.feed.entries, function(i,entry) {
if (entry.image_urls.length === 0) {
html += "HTML from the data";
}
else {
html += "More HTML";
}
if ( i == 34 ) return false;
});
html += "Closing tags from the header";
afterAjax();
// console.log(html); returns correct information here
},
error: function(x,y,z) {
alert(x.responseText);
}
});
// console.log(html); returns everything declared to html OUTSIDE of the ajax request
});
$("body").append(html + "</div>");
// Also tried: $("body").ajaxStop(function(){ $(this).append(html + "</div>"); }); because Ajax is asynchronous
});
}
Any ideas as to what is going on?
EDIT:
Full non-working demo, WIP page functionality: http://jsfiddle.net/SO_AMK/u42uy/
Full working demo, no page functionality:
Full screen: http://jsfiddle.net/SO_AMK/LXkaN/embedded/result/
Normal: http://jsfiddle.net/SO_AMK/LXkaN/
Please note that these are without images and are not the full app.

The Issue
Looks like a race condition. Remember that AJAX runs asynchronously and thusly, the success handler will run at some point in the future after the AJAX response has been received successfully. While the AJAX request is dispatched the rest of the script is executing. Specifically speaking:
$("body").append(html + "</div>");
Is running before the success handler is fired; meaning your html variable has not been updated at all yet.
Solution 1
Move
$("body").append(html + "</div>");
Within your success handler.
html += "Closing tags from the header";
afterAjax();
// console.log(html); returns correct information here
$("body").append(html + "</div>");
},
Solution 2 ($.ajaxStop)
Ensure that you register your handler before your make your $.ajax() calls. This will ensure your AJAX requests don't fire and finish before your code that registers your handler for .ajaxStop.
function loadFeeds() {
html = "";
$.ajaxStop(function(){$(document.body).append(html + "</div>);
$.each(pages, function(index, page) {
$(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
html = "<div class=\"page\" id=\"" + page[0] + "\">";
...
}
Solution 3 (From your jsLint+Deffereds)
This example is taken from your fully working jsLint link. This code takes all of the $.ajax requests being created in your loop and stores in them in an arrary to be latter applied to a $.when().done() call. $.when() will inspect each $.ajax request applied to it and when it is done, call the handler specified in $.done(). Each $.ajax request stores its response in the html = [] array that is defined at the start of $.ready(). When the defered check ($.when()) sees all the $.ajax requests have completed we then join the array (array.join('')) to make 1 big HTML block and append it to the document. We then call your afterAjax() function.
$(document).ready(function () {
var html = [];
var feeds = ["http://pulsesubscriber.appspot.com/items?feed=http://feeds.gawker.com/lifehacker/vip&jsonp=?",
"http://pulsesubscriber.appspot.com/items?feed=http://allthingsd.com/feed&jsonp=?",
"http://pulsesubscriber.appspot.com/items?feed=http://feeds.cnet.com/latestnews/pulse&jsonp=?"];
loadFeeds(feeds);
function loadFeeds(feeds) {
var requests = [];
$.each(feeds, function(index, feedUrl) {
requests.push($.ajax({
type: "GET",
url: feedUrl,
processData : true,
data: {
tagmode: "any"
},
jsonp: "jsonp",
dataType: "jsonp",
success: function(data) {
var feedElements = "<header class=\"feed-title\"><div class=\"feed-title-content\"><span class=\"feed-title-text\">" +
data.responseData.feed.title +
"</span></div></header><section class=\"row\"><div class=\"scroll-left\"></div><div class=\"row-scroll\">";
$.each(data.responseData.feed.entries, function(index,entry) {
var feedElements = '';
if (entry.image_urls.length === 0) {
feedElements += "<div class=\"tile no-img\"><title class=\"tile-title no-img\">" +
entry.title +
"</title><hr class=\"no-img hr\" /><span class=\"no-img excerpt\">" +
entry.contentSnippet +
"</span><div class=\"tile-modal\"><div class=\"article-wrapper\">\r\n<div class=\"article-header\">\r\n<a class=\"article-title-link\" target=\"_blank\" href=\"" +
entry.link +
"\">\r\n<h1 class=\"article-title\">" +
entry.title +
"</h1>\r\n</a>\r\n<h2 class=\"article-byline\">By " +
entry.author +
": " +
data.responseData.feed.title +
"</h2>\r\n</div>\r\n<hr class=\"article-hr\"/>\r\n<div class=\"article-content\">" +
entry.content +
"\r\n<a class=\"read-more\" target=\"_blank\" href=\"" +
entry.link +
"\">Read More...</a>\r\n</div>\r\n</div></div></div>\r\n";
}
else {
feedElements += "<div class=\"tile\"><img class=\"tile-image\" src=\"" +
entry.image_urls[0] +
"\" /><title class=\"tile-title\">" +
entry.title +
"</title><div class=\"tile-modal\"><div class=\"article-wrapper\">\r\n<div class=\"article-header\">\r\n<a class=\"article-title-link\" target=\"_blank\" href=\"" +
entry.link +
"\">\r\n<h1 class=\"article-title\">" +
entry.title +
"</h1>\r\n</a>\r\n<h2 class=\"article-byline\">By " +
entry.author +
": " +
data.responseData.feed.title +
"</h2>\r\n</div>\r\n<hr class=\"article-hr\"/>\r\n<div class=\"article-content\">" +
entry.content +
"\r\n<a class=\"read-more\" target=\"_blank\" href=\"" +
entry.link +
"\">Read More...</a>\r\n</div>\r\n</div></div></div>\r\n";
}
html.push(feedElements);
console.log('updated elements');
if(index == 34 ){
return false;
}
});
},
error: function(x,y,z) {
console.log(x.responseText);
}
}));
});
$.when.apply(this,requests).done(function(){
console.log('when!');
console.log(html);
$(document.body).append($(html.join('')));
afterAjax();
});
}
$("#refresh-all").click(function(){
$("body > header, body > section").remove();
$("body").removeClass("active");
loadFeeds();
});
function afterAjax() {
$(".page:first").addClass("active");
$(".tile").click(function(){
if ($(".tile-modal.tile-modal-active").length) {
$(".tile-modal.tile-modal-active").removeClass("tile-modal-active");
$(this).children(".tile-modal").addClass("tile-modal-active");
}
else {
$(this).children(".tile-modal").addClass("tile-modal-active");
$("body").addClass("active");
}
});
$(".scroll-left").hover(function(){
$(this).parent().animate({scrollLeft: 0}, 7000);
}, function() {
$(this).parent().stop();
});
$(".scroll-right").hover(function(){
$(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
}, function() {
$(this).parent().stop();
});
}
});
If you would like to execute a series of requests and once they have all executed do another action, you can utilize Futures & Promises Pattern or deffereds. In jQuery this is done in via .promise()(Futures/Promises) or .when() (Deffered).
A Note on Global Variables
It is also worth noting that not use var html = ... makes your variable a global; which is generally frowned upon. It would be best once moving $("body").append(html+"</div>") within the success handler to also declare html as var html.

ajaxStop is not firing because jsonp requests are by default not global. See here
I've updated your fiddle that forces jsonp requests as global. http://jsfiddle.net/u42uy/3/
*edit typo

Unless your ajax calls are synchronous (and I see no signs that they are), your each loop will finish and return BEFORE the ajax calls success functions run. You CANNOT structure your code this way. That means that $("body").append(html + "</div>"); will run before the ajax calls get a chance to add anything to your html variable.
You need to think about ajax response callbacks as independent pieces of code that run on their own timing sometime after your .each() loops are done and design the handling of the responses with that assumption in mind. Also keep in mind that multiple ajax calls aren't even guaranteed to complete in the order they were sent.
You could order the ajax calls by sending one and not sending the next until that one completes, keeping the combined html in a string variable like you have and then in the completion function of the last ajax call, you append the final accumulated html string to the body.
Here's another problem. At the start of your first .each() loop, you have this;
html = "<div class=\"page\" id=\"" + page[0] + "\">";
That reinitailizes the html variable, overwriting any results that might already be in there. You need to initialize it once before any .each() loop.

Do the follow:
Add var html = '' after var pages (line 1);
Change html = to html += (line 6);
Add html = '' after $("body").append(html + "</div>"); (line 41).
Result:
var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];
var html = ''; // ADD THIS
function loadFeeds() {
$.each(pages, function(index, page) {
$(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
html += "<div class=\"page\" id=\"" + page[0] + "\">"; //ADD THE +
$.each(page[1], function(index, feedUrl) {
$.ajax({
type: "GET",
url: feedUrl,
processData : true,
data: {
tagmode: "any"
},
jsonp: "jsonp",
dataType: "jsonp",
success: function(data) {
html += "Some header HTML";
$.each(data.responseData.feed.entries, function(i,entry) {
if (entry.image_urls.length === 0) {
html += "HTML from the data";
}
else {
html += "More HTML";
}
if ( i == 34 ) return false;
});
html += "Closing tags from the header";
afterAjax();
},
error: function(x,y,z) {
alert(x.responseText);
}
});
});
$("body").append(html + "</div>");
html = ''; // RESET HTML TO NEXT Each
});

Develop Reference

JavaScript is the programming language of the Web.

Fix Ajax call not binding the result to a HTML id - javascript

Related

Update: How do I dynamically populate a list with data from a JSON file?

Ajax call jsonp from PHP

Concat parameter syntax

Ajax post not sending data out

jQuery nested each/Ajax issue

Categories

Resources