Target Dynamic ID and hide the div - javascript

I have a dynamic html elements that renders in a for loop the dynamic parent element has a dynamic id, how can I hide the dynamic elements or the container and its content if the id which is dynamic has a value lets say "Product".
Thank you in advance.
This is the dynamic elements that i rendered using for loop
for (var i = 0; i < a_data.products.length; i++) {
produst_list += '<a href="#" class="plLinkToFull" data-sn="' + a_data.products[i].serial + '" id="' + a_data.products[i].productName + '">';
produst_list += '<div class="plProductContainer">';
produst_list += ' <div class="plProductBTN">';
//produst_list += ' <div class="plProductThumb pull-left ' + (a_data.products[i].pid === 'TE80'?'apMaximumPanelTi8':'apMaximumPanel') + '"></div>';
produst_list += ' <div class="plProductThumb pull-left ' + getPanelClsss(a_data.products[i].pid) + '"></div>';
produst_list += ' <div class="plProductLeft">';
produst_list += ' <h6 style="margin-bottom: -5px;">' + a_data.products[i].productName + '</h6>';
produst_list += ' <div class="plLowerStatusSN"><span>' + a_data.products[i].serial + '</span></div>';
produst_list += ' </div><div class="plLowerStatus">';
produst_list += ' <div class="' + ((a_data.products[i].remainingDays > 0) ? "plIconGreen" : "plIconRed") + '">';
produst_list += ' <span class="glyphicon glyphicon-time" style=""> </span></div>';
produst_list += ' <span class="' + ((a_data.products[i].remainingDays > 0) ? "plExpiryOK" : "plExpiredDate") + '">Expire: <strong>' + a_data.products[i].expirationDate + '</strong></span>';
produst_list += ' </div></div></div></a>';
}

With filter :
$('a.plLinkToFull').filter(function(){
return this.id.contains("product");
}).hide();

You can make like this:
$('.plLinkToFull').prev('id') = i;
or
$('.plLinkToFull').attr("id", i);
The i have to send to new Method, for saving the loop.

try this:
var id = 'Product';
$('a[id*="'+id+'"]').hide();
if you want to hide it by clicking use event delegation
var el = 'a[id*="'+id+'"]';
$('body').on('click',el,function(){
$(this).hide();
});

Related

How to use Tom-select dynamically?

There is a table contains Tom select input in my modal. And also I made an add button to add Tom select input. So when I click the add button, I clone the that contains tomselect input, but the tom-select input in the cloned tr doesnt work... How can I use tom-select input dynamically?? here's my code..
show modal :
this.show = function(){
var main = this;
var items= main.items;
var modalTitle = "modalTitle";
var modalMsg = ' <div id="modal-id">';
modalMsg += ' <table id = "MyTable" class="table">';
modalMsg += ' <tbody>';
modalMsg += ' <tr>';
modalMsg += ' <th class="col-xs-3"> 25125211 : </th>';
modalMsg += ' <td class="col-xs-9"><label class="col-xs-3"><input type="radio" class="input-val" name="confirm_radio" id="approve" value="100" required>apporve</label>';
modalMsg += ' <label class="col-xs-3"><input name="confirm_radio" id="refer" type="radio" value="900" required>refer</label></td>';
modalMsg += ' </tr>';
modalMsg += ' <tr id = "tomselect-tr">';
modalMsg += ' <th class="col-xs-3"> chooseTomselectOption </th>';
modalMsg += ' <td>';
modalMsg += ' <div class="input-group"><select id="TomSelect_1" placeholder="choose an item..."></select><span class="input-group-btn"><button id="cloneTr" type="button" class="btn btn-tool"><i class="fa fa-plus"></i></button></span></div>';
modalMsg += ' </td>';
modalMsg += ' </tr>';
modalMsg += ' </tbody>';
modalMsg += ' </table>';
modalMsg += ' </div>';
var modalBtn1Text = "done";
var modalBtn2Text = "cancel";
var modalCallback;
var updateCallback = function(){
agreementInfo.saveInfo();
};
modalCallback = updateCallback;
this.modal = new _modal.show(modalTitle
,modalMsg
,modalBtn1Text
,modalBtn2Text
,modalCallback
);
cloneTr function :
function cloneTr(){
trNum++;
var $newTr= $("#tomselect-tr").clone();
$newTr.attr("id", "tomselect-tr""+trNum);
$newTr.find("#TomSelect_1").attr("id","TomSelect_"+trNum);
$("#MyTable").find("tbody").find("#tomselect-tr"").after($addChoiceGrantorTr);
var targetDiv = "TomSelect_"+trNum;
addSelector(targetDiv);
}
addSelector function
function addSelector(_targetDiv){
var selector = new TomSelect("#"+_targetDiv,{
valueField: 'USR_NO',
searchField: ['USR_NM', 'USR_ID', 'USR_EMAIL', 'GP_NM'],
maxItems: 1,
maxOptions: 100,
options: items,
render: {
option: function(data, escape) {
console.log(escape);
return '<div>' +
' <span class="USR_NM">' + escape(data.USR_NM) + '</span>' +
' <span class="GP_NM">' + escape(data.GP_NM) + '</span>' +
' <span class="USR_ID">' + escape(data.USR_ID) + '</span>' +
' <span class="USR_EMAIL">' + escape(data.USR_EMAIL) + '</span>' +
'</div>';
},
item: function(data, escape) {
return '<div id="'+itemDivTxt+'" title="' + escape(data.USR_NO) + '" data-name="' + escape(data.USR_NM) + '">' +
' <span class="tom-select-name">' + escape(data.USR_NM) + '</span>' +
' <span class="tom-select-group">' + escape(data.GP_NM) + '</span>' +
'</div>';
}
}
});
selector.clearCache();
}
How can I use tomselect dynamically or initialize when I click the add button?? thanks
I tried to clone the wrong object... I made a temporary tr object and clone it... and It works

How to get image and name of image from the index array in javascript?

I set below codes for the the design. i try to get images and name of image form the index.`
function Link_Generate(event) {
event.preventDefault();
var links = '';
var link = 'www.ski-roller.de/';
var result = document.getElementById('wrapper');
var code_id = document.getElementById("code_id").value;
for (i = 1; i < 6; i++) {
links += ' <div class="input-groups">' +
' <input class="form-input" id="link_' + i + '" type="text" name="link_' + i + '" ' +
' value="' + link + i + '/=' + code_id + '" placeholder="Generated Link "/>' +
' <input class="form-button" type="submit" id="' + i + '" value="Copy" onclick="copyToClipboard(this.id)" "/>' +
' <label>Product Name:'+ i +' ' + '<img src="cr05.jpg" alt="cross prime" width="100" height="100"> '+ ' </label>' +
' </div>';
}
result.innerHTML = links;
}
`

How to use numeral.JS in this situation?

I am trying to use numeral.js to format my listener variable so numbers could be easily readable. But after I tried to use numeral.js the way it is, my function stops working. Can anyone please advise on what's wrong?
Trackster.renderTracks = function(tracks) {
var $trackList = $("#track-list");
$trackList.empty();
for (var trackIndex = 0; trackIndex < tracks.length; trackIndex++) {
var track = tracks[trackIndex];
var mediumAlbumArt = track.image[1]["#text"];
var formatListeners = numeral(track.listeners).format('0,0');
var htmlTrackRow =
'<div class="row track">' +
' <div class="col-xs-1 col-xs-offset-1 play-button">' +
' <a href="'+ track.url + '" target="_blank">' +
' <i class="fa fa-play-circle-o fa-2x"></i>' +
' </a>' +
' </div>' +
' <div class="col-xs-4">' + track.name + '</div>' +
' <div class="col-xs-2">' + track.artist + '</div>' +
' <div class="col-xs-2"><img src="' + mediumAlbumArt + '"/></div>' +
' <div class="col-xs-2">' + formatListeners + '</div>' +
'</div>';
$trackList.append(htmlTrackRow);
}
};
Full Github Code is https://github.com/tfan1210/Trackster
Thanks!

Duplicate item appearing in DIV

I have a problem with my code. I am pushing items into a new array and displaying two of them in a DIV. For some reason its showing the same item twice rather than showing two separate items. Hoping someone can help me out with this. I just need a way to prevent the same recipe from being able to show twice in the DIV.
var categoryItems = [];
var recipeTitle = $('#recipeTitle').text();
$.each(recipe_data, function(i, item){
if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); }
});
var similarRecipe = '';
var randomRecipe = {};
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit: Please take a look at this fiddle for an example. It should not show the same recipe twice when refreshing, rather show two different recipes from the category. My problem is that is is sometimes it is showing the same one twice when you refresh. https://jsfiddle.net/wn4fmm5r/
you are generating one random Recipe and displaying same twice into your for loop
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
try including your statement for generating random recipe inside loop.
for(var i = 0; i < categoryItems.length; i += 2) {
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit for no repeating ----
var counter;
for (var i = 0; i < categoryItems.length; i += 2) {
var item = Math.floor(Math.random() * categoryItems.length);
if (!counter) {
counter = item;
} else {
if (counter == item) {
item = Math.floor(Math.random() * categoryItems.length);
counter = item;
}
}
randomRecipe = categoryItems[item];
similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>'];
$('#recipeSimilar').append(similarRecipe);
}

Dynamic Pictures are Not Showing up

I have list of restaurants and I have to append pictures of each restaurant, which is coming from a database. For this I made div's id dynamic but the pictures not append on that div. If I make the div's id static then it shows the picture coming from the server. The problem is with making the div id dynamic. Please help me. Here is my sample code:
$("#list").empty();
$.each(data, function (i, item) {
if (data[i].has_logo == 1) {
$('#pic' + i).css("background-image", "url('http://www.thefoodhive.com/web_root/provider_uploads/" + data[i].id + "/logo.jpg')");
}
if (data[i].has_menu == 0) {
status = 'Call Now';
} else {
status = 'Order Now';
}
if (data[i].from_time == '' || data[i].from_time == null) {
data[i].from_time = 'NA';
data[i].to_time = '';
}
content = '<div ><div class="container"><div id="pic' + i + '" class="left"></div><div class="right"><div class="rightno">' + data[i].name + '</div></h4></p><i>Address:' + data[i].address + ',Timing:' + data[i].from_time + '-' + data[i].to_time + '</i><br><center><div style="float: right;"></div></div> <div class="bottom"><div class="btnleft" style="float: left;"><input class="callbttn" value="CALL NOW"type="button"></input></div><div class="btnright" style="float: left;"><input class="callbttn" value="' + status + '" type="button" onclick="getdata(\'' + data[i].id + '\',\'' + data[i].has_menu + '\',\'' + data[i].phone_no + '\');"></input></div></div>';
You are applying style to a div that doesn't exists yet...
Try to apply the background inline, like this:
content = '<div ><div class="container"><div id="pic' + i + '"
class="left" style="background-image:url(http://www.thefoodhive.com/web_root/provider_uploads/' + data[i].id + '/logo.jpg">...

Categories

Resources