Image List view with text and URL - javascript

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>';
}

Related

Create menu by removing duplicates from JSON data

Build dynamic menu from multiple metadata files
I have a JavaScript loop that displays the images from an NFT collection and uses the class names to create a filter. Currently the filter menu is hard-coded, but I would like to build it dynamically from the metadata.
var loopFunction = function(dataIsLoading) { // the loop
let itemID = "";
var itemSource = "Azuki";
var itemURI = "https://ikzttp.mypinata.cloud/ipfs/QmQFkLSQysj94s5GvTHPyzTxrawwtjgiiYS2TBLgrvw8CW/"
for (let i = 0; i < 100; i++) {
itemID += [i];
$.getJSON(itemURI+i, function(data) {
// alert(data.name);
var eachItem = "";
var itemName = data.name;
var traits = data.attributes;
var classes = "";
var traitList = "";
$.each(data.attributes,function(index,entry) { // k (key), v (value) / i (index), e (entry)
var str = entry.value;
str = str.replace(/ /g, '');
classes += '' + entry.trait_type + '' + str + ' ';
traitList += '<span class="item-trait-type">' + entry.trait_type + ':</span> ' + str + '<br />';
});
eachItem += '<div class="cstm-grid-item cstm-width-1-2 cstm-width-large-1-3 cstm-width-x-large-1-4 ' +classes+'" id="'+i+'">';
eachItem += '<div class="img-placeholder">';
eachItem += '<img class="lazy" data-src="https://ikzttp.mypinata.cloud/ipfs/QmYDvPAXtiJg7s8JdRBSLWdgSphQdac8j1YuQNNxcGE1hg/'+i+'.png" width="100%" height="auto" />';
eachItem += '</div>';
eachItem += '<span class="item-title">'+itemName+'</span>';
eachItem += '<p class="item-traits">'
eachItem += traitList;
eachItem += '</p>'
eachItem += '</div>';
$('.cstm-grid').append(eachItem);
});
}
};
I have all of the data, but building the menu is difficult to do dynamically without the the menu having duplicate values. I just need the single base category (trait type) and the single values for that trait type. The final output should look something like:
<ul>
<li>
<h2>Trait Type 1</h2><!-- the category -->
<ul>
<li>red</li><!-- the value -->
<li>blue</li><!-- the value -->
</ul>
</li>
<li>
<h2>Trait Type 2</h2><!-- the category -->
<ul>
<li>sunglasses</li><!-- the value -->
<li>hat</li><!-- the value -->
</ul>
</li>
</ul>

Array list display online one result from json

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.

Make slider from json

I am going to create a simple slider from available JSON object. I want to scroll 3 item i.e. 3 keys of JSON in single click either left or right.
Example: If I clicked right arrow then I want to fetch 0 to 2 keys of JSON and display image and if again right arrow then 3 to 6 and so on. Similarly in case of left arrow clicked. I want to make negative loop from current position of JSONkeys like 6 to 3.
I tried my code But its not working well.
var recents = "";
var imges = "";
var imge = "";
var recent_prod = <?php echo $recent_prod; ?>;
$("#num").html(recent_prod.length);
for(var a = 0; a < 3; a++)
{
imges = recent_prod[a].image;
imge = imges.split[","];
recents += '<a href="' + base_url + 'init/product/' + recent_prod[a].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[a].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[a].price + '</div></div></a>';
}
$("#recent_views").html(recents);
$(document).on("click", ".rightarr", function(){
var next_recent_prod = "";
var next = a + 3;
for(var i = a; i < next; i++)
{
imges = recent_prod[i].image;
imge = imges.split[","];
next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
a = a + 1;
}
$("#num").html(a);
$("#recent_views").html(next_recent_prod);
});
$(document).on("click", ".leftarr", function(){
var next_recent_prod = "";
var pre = a - 3;
for(var i = pre; i >= 0; i--)
{
imges = recent_prod[i].image;
imge = imges.split[","];
next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
'<div class="related_prod_thumb">' +
'<div class="related_prod_img">'+
'<span class="helper"></span>'+
'<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
'</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
'<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
}
$("#num").html(a);
$("#recent_views").html(next_recent_prod);
a = i;
});
With this code I get negative keys of JSON when clicked left. That is -1 but its doesn't exists in JSON. So I get error TypeError. Also Its not working as expected
Any help would be grateful. Thank you.
It seems your going from a to next which is a+3 for the right arrow, but for the left arrow you're going from 0 to pre which is supposed to be a-3. You probably mean:
for(var i = a-1; i >= pre; i--)
You have a = i after the loop in your left arrow click, when that loop ends the value of i will be -1 (or if corrected #1 it'll be one below the desired value), So you probably would want:
a = i + 1;
Or like you do for the right arrow, have it insides your loop:
a = a - 1; //or in short a--;
For left arrow you need to check whether it reaches zero and if so only show the first 3 items, disable the left arrow, etc:
var pre;
if(a > 2)
pre = a - 3;
else {
pre = 2;
//disable left & make sure you enable it when right is clicked.
}
Do the same for the right arrow, check whether it exceeds the length:
//not sure about 4, try 3 or 2 maybe if it doesn't work
if(a < recent_prod.length - 4)
next = a + 3;
else {
next = recent_prod.length - 3;
//disable right & make sure you enable it when left is clicked.
}

JQuery mobile list prepend

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

Hiding <p> field in javascript

Here's my code for gathering titles/posts from reddit's api:
$.getJSON("http://www.reddit.com/search.json?q=" + query + "&sort=" + val + "&t=" + time, function (data) {
var i = 0
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
i++
});
});
Basically every post (selftext) is assigned a different paragraph id (post0, post1, post2, etc) for every result that's pulled. I'm also going to create a "hide" button that follows the same id scheme based on my i variable (submit0, submit1, submit2, etc). I want to write a function so that based on which button they click, it will hide the corresponding paragraph. I've tried doing an if statement that's like if("#hide" + i) is clicked, then hide the corresponding paragraph, but obviously that + i doesn't work. How else can I tackle this?
Could you try something like the below?
showhide = $("<a class='hider'>Show/Hide</a>");
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
}
Alternatively:
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var showhide = $("<a class='hider" + i + "'>Show/Hide</a>");
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
});
i++
});

Categories