I wrote this code and it works:
function getJsonResult(retrieve) {
var result = retrieve.results;
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
document.write(search);
}
}
When I tried to display the results in a div, I change the last line with:
$("#divId").html(search);
But it only displays the first result. How can I make the whole list appear?
That happened because you're overriding the search variable in every iteration :
var search = '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
You need to declare the search variable outside of the loop then append the string in every iteration like :
function getJsonResult(retrieve) {
var result = retrieve.results;
var search = "";
___________^^^^
for (var i = 0; i < result.length; i++) {
responseJson.push({ id: result[i].id, title: result[i].title });
var search += '<a id="' + result[i].id + '">' + result[i].title + '</a><br/>';
___________^^
document.write(search);
}
}
Then finally you could put your variable content to the div :
$("#divId").html(search);
$('#divId').append(search);
This appends the element included in search to the div element.
Related
I am using jquery .each to loop the values and push in JSON. it is working for all the rows leaving the first row.
for (j = 0; j < parsedResult.length; j++) {
var pack_id = parsedResult[j].pack_id;
var pack_dsc = parsedResult[j].pack_dsc;
var pack_base_amount = parsedResult[j].pack_base_prc;
var pack_tax_amount = parsedResult[j].pack_tax_amt;
var pack_grand_total = parsedResult[j].pack_grand_total;
row += "<span id='single_pack_details'><span id='pack_id' class='hidden'>" + pack_id + "</span><b>Pack description: </b><span id='pack_dsc'>" + pack_dsc + "</span><b>Pack Amount:</b> ₹ <span id='pack_grand_total'>" + pack_grand_total + "</span></div><span class='hidden' id='pack_base_amount'>" + pack_base_amount + "</span><span class='hidden' id='pack_tax_amount'>" + pack_tax_amount + "</span></span>";
}
Below is where i trying to put it in a loop and pushing to pack_details object
$(this).closest("tr").find('#single_pack_details').each(function () {
var obj = {
pack_id: $(this).closest("span").find("#pack_id").text(),
pack_dsc: $(this).closest("span").find("#pack_dsc").text(),
pack_grand_total: $(this).closest("span").find("#pack_grand_total").text(),
pack_base_amount: $(this).closest("span").find("#pack_base_amount").text(),
pack_tax_amount: $(this).closest("span").find("#pack_tax_amount").text()
}
pack_details.push(obj);
I want to get name and picture of every friend. please tell me how can i handle this. I am getting no row and finding an error "Uncaught TypeError: Cannot set property 'innerHTML' of null"
FB.api('/me/friends','GET',{"fields":"id,name,email,picture.height(500)"},
function(response) {
console.log(response.total_count);
var result_holder = document.getElementById('result_friends');
// var friend_data = response.data.sort();//sort(sortMethod);
var results = '';
document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
for (var i = 0; i < friend_data.length; i++) {
console.log(i + results);
results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
}
// and display them at our holder element
result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;});
This line is wrong: document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
There will be an array in response (response.data), and in that array there will be the friends with their names.
Remove the line and use the for loop like this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="https://graph.facebook.com/' + response.data[i].id + '/picture">' + response.data[i].name + '</div>';
}
Or, since you already get the picture URL in the response, try this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="' + response.data[i].picture.data.url + '">' + response.data[i].name + '</div>';
}
Btw, it is better to just debug with console.log(response) at the beginning of the callback, so you can see what exactly is in the response. Just saying.
I want to display and list with icon and text. List is link to specific URL. I am storing all these in a array but image is not populating from the array. here is a spinet.
var mainPanel = [ {
icon : "images/green/home.png",
title : "Home",
url : "#tilehome-page"
}, {
icon : "images/green/home.png",
title : "Mayor's Conner)",
url : "#mayorsmessage-page"
}, {
icon : "images/green/home.png",
title : "Report A Problem",
url : "#reportaproblem-page"
} ];
function createmenuPnl() {
var items = '';
//ul = $(".mainMenu:empty");
var ulStr = "<ul>";
for (var i = 0; i < mainPanel.length; i++) {
items += '<li><a href="' + mainPanel[i].url + '"> + mainPanel[i].title
+ '</a></li>';
}
ulStr+= items;
ulStr+='</ul>';
console.log('The ulStr formed is:'+ulStr);
$("#cssmenu").append(ulStr);
$("#cssmenu").trigger( "updatelayout" );
}
All I want is to add image icon dynamically in the list
you forget single quote just before mainPanel[i].title.. it should be like this..
items += '<li><a href="' + mainPanel[i].url + '">' + mainPanel[i].title
+ '</a></li>';
Here we go
The problem is in your loop for
for (var i = 0; i < mainPanel.length; i++) {
// after '"> need one '
items += '<li><a href="' + mainPanel[i].url + '">' + mainPanel[i].title
+ '</a></li>';
}
trying to prepend my list in jquery mobile but I just can't get the divider to be on top of the most recent item added to the listview.
I've tried prepending the item that's being added but it then switches the divider to the bottom.
function loadScanItems(tx, rs) {
var rowOutput = "";
var $scanItems = $('#scanItems');
$scanItems.empty();
var bubbleCount = 0;
for (var i = 0; i < rs.rows.length; i++) {
bubbleCount = bubbleCount + 1;
//rowOutput += renderScan(rs.rows.item(i));
var row = rs.rows.item(i)
var now = row.added_on;
var date = get_date(now);
rowOutput += '<li data-icon="false"><div class="ui-grid-b"><div class="ui-block-a" style="width:50%"><h3>Su # ' + row.sunum + '</h3><p> Bin # ' + row.binnum + '</p></div><p class="ui-li-aside"><strong>' + date + '</strong></p><div class="ui-block-b" style="width:20%"></div><div class="ui-block-c" style="width:25%"><br><p>User: ' + row.userid + '</p></div></div></li>';
// rowOutput += '<li>' + row.sunum + row.binnum+ "<a href='javascript:void(0);' onclick='webdb.deleteScan(" + row.ID + ");'>Delete</a></li>";
}
$scanItems.append('<li data-role="list-divider">Scanned Items <span class="ui-li-count">' + bubbleCount + '</span></li>').listview('refresh');
$scanItems.append(rowOutput).listview('refresh');
}
The code is above with it correctly formatted with the divider on top but the list items being appended to the bottom instead of prepended to the top.
Thanks!
The problem is that your are building a string with all the scan items. That string already has an order so whether you prepend or append makes no difference. Try this simple change.
Change:
rowOutput += '<li data-icon="false">...</li>';
to:
rowOutput = '<li data-icon="false">...</li>' + rowOutput;
This will put your rowOutput string in the correct order before appending to the listview.
Here is a working DEMO
I've a listview created by a loop:
for(var i = 0; i < data.length; i++) {
var garage = data[i];
$("#content-p").append(
"<ul data-role=\"listview\">" +
"<li><a href=\"#\" id=\"submitID\" >" +
"<h2>"+garage.location+"</h2>" +
"<p><b>"+garage.description+"</b></p>" +
"<p>"+garage.address+"</p>" +
"</a></li>" +
"</ul><br>"
);
$("#submitID").click(function() {
localStorage.setItem("garageID",garage.ID);
$.mobile.changePage("#resP");
});
}
Now the user can click on a listview item and the ID from this item should be stored in the localStorage.
Problem: It first creates the complete listview with all items. If I click now on item#2 from the list, I get the ID from the last item.
the submit function is being overwritten with every iteration of the loop, and every single #submitID is only calling that function. So, of course it will only pull up the last one in the list.
Also, the code is generating all items within data.length, so you'll need to alter that if you don't want everything in the list.
Here's a fix to the first part (assuming no styling is assigned to #submitID):
for(var i = 0; i < data.length; i++) {
var garage = data[i];
$("#content-p").append(
"<ul data-role=\"listview\">" +
"<li><a href=\"#\" id=\"submitID-" + i + "\" >" +
"<h2>"+garage.location+"</h2>" +
"<p><b>"+garage.description+"</b></p>" +
"<p>"+garage.address+"</p>" +
"</a></li>" +
"</ul><br>"
);
$("#submitID-" + i).click(function() {
localStorage.setItem("garageID",garage.ID);
$.mobile.changePage("#resP");
});
}
I think the problem was that the method was trying to reference garage when there wasn't a reference, or something like that. And you should have made the click method for a specific ID, because it just kept getting overridden each time. I fixed it for you by making it one click method for a class, but the ID of each garage element is its actual garage ID.
http://jsfiddle.net/Fq3TF/1/
Also, just a tip, if you're constructing a string which is going to be inserted into an HTML document, you can use an apostrophe instead of a quote to avoid escaping. e.g. "<a class='submitID'>Hello World</a>".
Here is my take on the problem. I use a attribute to save the id in the a element. The registering of the click handler has been moved outside the loop.
var data = [
{
id: "id1",
location: "location1",
description: "description1",
address: "address1"
},
{
id: "id2",
location: "location2",
description: "description2",
address: "address2"
}
];
for (var i = 0; i < data.length; i++) {
var garage = data[i];
$("#content-p").append(
"<ul data-role=\"listview\">" +
"<li><a href=\"#\" class=\"submitClass\" garageid=\"" + garage.id + "\">" +
"<h2>" + garage.location + "</h2>" +
"<p><b>" + garage.description + "</b></p>" +
"<p>" + garage.address + "</p>" +
"</a></li>" +
"</ul><br>"
);
}
$(".submitClass").click(function(e) {
e.stopPropagation();
alert($(this).attr("garageid"));
/*localStorage.setItem("garageID", garage.ID);
$.mobile.changePage("#resP");*/
});