jQuery Ajax request inside Ajax request not working - javascript

EDIT: It's telling me that my li is an illegal token. Still not sure what to do about this as I thought I was appending inside a ul
So I have to fetch a JSON array of some public Github repos and append the title, link, description, and basic information from the first 10 commits of each repo to the page. I already have the title, link and description working, but I'm lost when it comes to bringing in the commits. They're located at a different address than the initial information, so I made a second ajax request inside my first one to the commits address, but nothing is working. It may just be a syntax error or something as I've found from extensive searching that it is possible to nest ajax requests.
Here's my code, chopped up into each separate function (I've replaced the org name with 'name' for anonymity's sake):
main function:
function main() {
$.ajax({
type: 'GET',
url: 'https://api.github.com/orgs/name/repos',
error: function(xhr, status, error){
//var err = eval("(" + xhr.responseText + ")");
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
complete: function(data){
display_content(data);
}
});
}
main();
content display function:
function display_content(_data){
for (var i = 0; i < _data.responseJSON.length; i++) {
$("#listing").append(
"<h2>" +
"" + _data.responseJSON[i].full_name + "</h2>" +
"<p>" + _data.responseJSON[i].description +
"<h3>Latest Commits</h3>" +
"<ul id= \"" + _data.responseJSON[i].name + "commits\">"
);
commits(_data.responseJSON[i].name);
$('#listing').append(
"</ul>" +
"</p>" +
"<br/>"
);
}
}
commit information function:
function commits(repo){
$('#listing').find('h3').text("Latest Commits to user/" + repo);
return $.ajax({
type: 'GET',
url: 'https://api.github.com/repos/user/' + repo + '/commits',
error: function(xhr, status, error){
//var err = eval("(" + xhr.responseText + ")");
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
complete: function(commit_data){
for(var i = 0; i < 10; i++){
$('#listing').append(
"<li>
<div>
<img src=\"" + commit_data.responseJSON[i].author.avatar_url + "\">
<a href=\"https://github.com/" + commit_data.responseJSON[i].author.login + "\">
<b>" + commit_data.responseJSON[i].author.login + "</b>
</a>
<b>" + ($.timeago(commit_data.responseJSON[i].commit.committer.date)) + "</b><br />
<i>SHA: " + commit_data.responseJSON[i].sha + "</i>
</div>
<a href=\"https://github.com/user/" + repo + "/commit/" + commit_data.responseJSON[i].sha +
"\" target=\"_blank\">" + commit_data.responseJSON[i].commit.message +
"</a>
</li>"
);
}
}
});
}
I know it's a lot of code, I apologize in advance. I know the problem lies somewhere in the last two functions but I wanted to include everything to be sure.
If anyone has any experience with grabbing and parsing Git repo info I would really appreciate any advice on this. I'm willing to scrap everything and start over if need be to make this work, but I would like to avoid using any libraries aside from jQuery.
Thank you to anyone who helps! I appreciate it.

It's telling me that my li is an illegal token. Still not sure what to do about this as I thought I was appending inside a ul
You are using multi-line string literal for adding html. The line breaks need to be escaped, and this can be done via a backslash.
Change to
function commits(repo){
$('#listing').find('h3').text("Latest Commits to user/" + repo);
return $.ajax({
type: 'GET',
url: 'https://api.github.com/repos/user/' + repo + '/commits',
error: function(xhr, status, error){
//var err = eval("(" + xhr.responseText + ")");
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
complete: function(commit_data){
for(var i = 0; i < 10; i++){
$('#listing').append(
"<li>"+
"<div>"+
"<img src=\"" + commit_data.responseJSON[i].author.avatar_url + "\">"+
"<a href=\"https://github.com/" + commit_data.responseJSON[i].author.login + "\">"+
"<b>" + commit_data.responseJSON[i].author.login + "</b>"+
"</a>"+
"<b>" + ($.timeago(commit_data.responseJSON[i].commit.committer.date)) + "</b><br />"+
"<i>SHA: " + commit_data.responseJSON[i].sha + "</i>"+
"</div>"+
"<a href=\"https://github.com/user/" + repo + "/commit/" + commit_data.responseJSON[i].sha +
"\" target=\"_blank\">" + commit_data.responseJSON[i].commit.message +
"</a>"+
"</li>"
);
}
}
});
}

Related

free-jqgrid populate drop down in subgrid

I am having a devil of a time populating a drop down list in a sub-grid. I am using free-jqgrid 4.15.5. I have no issues when populating a drop down in the main grid but it appears that I am having ID issues when trying to get a simular drop down in the subgrid ( grid as a subgrid option) dows anyone know a reference or how to populate the drop down correctly?
my current test function for the drop down is:
function popUsersT() {
alert("subgrid id : " + window.subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : " + window.row_id + "\nfound(row) : " + $("#" + window.row_id).length + "\ndropdown found : " + $("select", "#" + window.row_id).length + "\nsg_tableID: " + $("#" + sg_tableID).html);
var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + window.subgrid_table_id )[0].p.selrow).TaskValidator;
alert(current);
$.ajax({
url: "/Tasks/getUserList",
datatype: 'json',
mtype: 'Get',
async: false,
success: function (users) {
$("#Task").html("");
$("#Proxy").html("");
$.each(users, function (i, user) {
$("#Task").append(
$('<option></option>').val(user.name).html(user.DisplayName)
);
$("#Proxy").append(
$('<option></option>').val(user.name).html(user.DisplayName)
);
});
$("#Task").prop("disabled", false);
$("#Proxy").prop("disabled", false);
$("#Task").val(current);
$("#Proxy").val(current);
}
});
}
part of my subgrid is:
subGridRowExpanded: function (subgrid_id, row_id) {
var sg_tableID = subgrid_id + "_t";
window.subgrid_id = sg_tableID;
window.row_id = row_id;
window.subgrid_table_id = sg_tableID;
//alert(subgrid_id);
//alert(row_id);
var pager_id = "p_" + sg_tableID;
$("#" + subgrid_id).html("<table id='" + sg_tableID + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + sg_tableID).jqGrid({
url: "/Home/GetTaskSubList/" + row_id,
I keep playing with the Id values to try to get away from the errors of:
Error: 'subgrid_table_id' is undefined
Error: 'sg_tableID' is undefined
I am sure i am getting lost in trying to make this work, and was hoping this was something easy i am over looking.
thank you for your help
in the end iw as able to get it workign by setting the values:
subGridRowExpanded: function (subgrid_id, row_id) {
var sg_tableID = subgrid_id + "_t";
window.subgrid_id = sg_tableID;
window.row_id = row_id;
window.subgrid_table_id = sg_tableID;
and then referencing the values in the function by:
var currentOwner = $("#" + subgrid_id).jqGrid('getRowData', $("#" + window.subgrid_table_id)[0].p.selrow).Task;
I am not sure i fully understand the why but it does seem to work as needed. thank you

what is the correct syntax form for this to function -- Javascript

In the following lines of code, I try to add a function inside html tag in javascript:
nuevo = "<p class='item'>" + res.tarea + "<button onclick = '" + return EliminarTareas(database) + (" + res.tarea +");'>" + "Eliminar" + "</button></p>";
$('#listatareas').append(nuevo);
function EliminarTareas(id, base) {
base.transaction(function(tx) {
tx.executeSql("DELETE tarea FROM Tareas WHERE tarea=?", [id], function () {
});
});
}
The main problem is this part +return EliminarTareas(" + database + ", " + res.tarea +");'>". It discards the second parameter since you closed the paranthesis ), and it also has quote problems.
It should be like this +" return EliminarTareas(" + database + ", " + res.tarea + ");'>"
However, I believe addressing this task with .data would be effective, and it may provide a better structure. Below is my version with some codes from yours (DEMO: https://jsfiddle.net/9q4hLs3a/):
var nuevo = $("<p class='item'><button data-var1='" + database + "' data-var2='" + res.tarea + "'>Eliminar</button></p>");
$('#listatareas').append(nuevo);
$(document).ready(function(){
$(document).on('click', '#listatareas button', function(){
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
EliminarTareas(var1 , var2 )
});
function EliminarTareas(id, base){
base.transaction(function(tx){
tx.executeSql("DELETE tarea FROM Tareas WHERE tarea=?", [id], function (){
});
}
I think this is what you wanted
"<p class='item'>"+ res.tarea +"<button onclick = 'EliminarTareas("+database+","+res.tarea +")'>Eliminar</button></p>";

EDITED How to get the json value for localStorage in a loop

after Oyeme's advise, i have changed my code, but still cannot work. it can alert "testing" but cannot alert DBuser_name .
By the following coding, i can create a content like the image below. My problem is that, if the user click one of the people in the list, i would like to extract the student.data.user_name into localStorage. however, in my coding below, seems that i did wrong?
function getStudentList() {
$.getJSON('http://mydomain.com/getStudents.php?jsoncallback=?', function(data) {
$('#studentList li').remove();
$('#load').hide();
//students = data.user_name;
$.each(data, function(index, student) {
//$('#studentList').append('<li><a href="tutor_student_detail.html?user_name=' + student.data.user_name + '">' +
$('#studentList').append('<li><a href="tutor_student_detail.html">' +
'<h4>' + student.data.user_name + '</h4>' +
'<p>' + student.data.role + '</p>' +
'</a></li>');
$("li a").click(function() {
window.localStorage["view"] = $(this).data('user_name');
});
});
$('#studentList').listview('refresh');
});
}
Below are the coding of tutor_student_detail.html (js part)
function start(){
var localUsername=window.localStorage.getItem("view");
$.getJSON('http://mydomain.com/getStudent.php?user_name='+localUsername+'&jsoncallback=?', displayStudent);
alert("testing");
}
function displayStudent(data) {
var DBuser_name=data[0].data.user_name;
alert(DBuser_name);
var employee = data.item;
$('#username').text(student.data.user_name);
$('#pw').text(student.data.password);
$('#id').text(student.data.id);
$('#actionList').listview('refresh');
}
the output of json string is something like
?([{"data":{"id":"4","user_name":"studentB","book":"4567","role":"Student"}}]);
$('#studentList').append('<li><a href="tutor_student_detail.html"
data-name="'+student.data.user_name+'">' +
'<h4>' + student.data.user_name + '</h4>' +
'<p>' + student.data.role + '</p>' +
'</a></li>');
$("li a").click(function() {
window.localStorage["view"] = $(this).data('name');
});

JavaScript variable empty without previous alert messge

I'm using the following function to create a list of links from a JSON-File and put them into a span element (jquery has been initialized)
$(document).ready(function() {
function createjson(category) {
var content = "";
i = 0;
$.getJSON(category + ".txt", function(data){
while(data[i] != null) {
content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
i++;
}
});
document.getElementById("list_" + category).innerHTML = content;
}
createjson("cat1");
});
However, if I use it like this, the span element remains empty. It is only when I replace
document.getElementById("list_" + category).innerHTML = content;
with
alert("test");
document.getElementById("list_" + category).innerHTML = content;
that I get the desired output. How can I get it without printing out an alert message beforehand?
That is becuase .getJSON() is an asynchronous method. Your code will try to update the DOM with content, before the server had time to respond to the request. Therefor no content is inserted.
With the alert, you stop the execution long enough for the server to respond, therefor it works when you add the alert.
The correct way to do it would be to move your content update into the success-callback instead, which is always run after the server has responded:
$.getJSON(category + ".txt", function(data){
while(data[i] != null) {
content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
i++;
}
$("#list_" + category).html(content);
});
I replaced your document.getElementById("list_" + category).innerHTML = content; with the somewhat shorter jQuery equivalent $("#list_" + category).html(content); in the above example as well.
It's not the alert which is fixing this, the alert is basically blocking the UI for long enough for the AJAX request to complete.
$.getJSON is an asyncronous method. This means that the result of the function call is not always available immediately, you'll need to move your code which sets the list element HTML inside the $.getJSON callback:
$.getJSON(category + ".txt", function (data) {
while(data[i] != null) { ... }
document.getElementById("list_" + category).innerHTML = content;
});
Put the html append in callback, also reset the i when call back starts.
$(document).ready(function() {
function createjson(category) {
$.getJSON(category + ".txt", function(data)
{
var content = "";
for(i=0; i<data.length; i++)
{
content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
}
document.getElementById("list_" + category).innerHTML = content;
});
}
createjson("cat1");
});
Use this !== to compare with not equal to NULL
while(data[i] !== null) {
content = content + '<li class="liste"><a target="_blank" class="liste" href="' + data[i].url + '">' + data[i].name + '</a></li>';
i++;
}

Javascript AJAX failing when put in to a function

I've written the following code to get JSON data with a POST request.
$.post("http://example.com/songs/search_api/index.php",
"data[Song][keyword]=Stereophonics",
function(data){
/*$("#results").append(data);*/
alert("test");
var songdata = JSON.parse(data);
//$("#results").empty();
var i = 0;
for (i=0;i<=songdata.total;i++)
{
//alert(i);
var songhtml = "<ul><li><img src=\"" + songdata.data[i].artwork + "\" /></li><li>" + songdata.data[i].title + "</li><li>" + songdata.data[i].artist + "</li><li>" + songdata.data[i].length + "</li><li>" + songdata.data[i].listen + "</li></ul>";
//alert(songhtml);
$("#results").append(songhtml);
}
//var objectasstring = concatObject(songdata);
//alert(objectasstring + "\n\n" + songdata);
}
);
The problem is as soon as I put in a function (this works without the above code) the function fails to run;
function postRequest() {
alert("hello??");
}
This is for mobile Safari on the iPhone.
Thanks in advance.
Solved! My problem? The form. I was using a form so the page was being refreshed when the function was run.

Categories