Develop Reference

How to hide the parents of several elements with the same class?

I am trying to use .hide() from jQuery to hide some the parents of the li's that has the same class. No success so far. I see the other things like .addClass works fine, but .hide() is not working on this one?
Can someone give me a hand?
This is my code:
add()
function add() {
var element = document.getElementById("tasks");
var name = "acb"
$(element).append(
'<div class="d-flex mt-4">' +
'<span class="col-1">' +
'<li class="not-done" onclick="done(this)">' + name + '</li>' +
'</span>' +
'<span class="col-3">' +
'<button type="button" class="btn-edit">Edit</button>' +
'</span>' +
'</div>'
)
}
$("#show-done").click(function() {
$("li.not-done").parent().parent().hide();
// $("li.done").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks">
<div class="d-flex mt-4">
<span class="col-1">
<li class="done" onclick="done(this)">xys</li>
</span>
<span class="col-3">
<button type="button" class="btn-edit">Edit</button>
</span>
</div>
</div>
<button id="show-done">show</button>

i want to associate links to respective article on dynamically created p element

here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});

Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen

Clean way to create dom elements based on data from array?

I have an array full of objects that have the same keys, but different values. These objects need to be turned into divs with various sub elements. The following code works, but seems messy and hard to maintain.
pim.buildProducts = function(array) {
// for each item in the array
productHTML = '';
compareBoxHTML = '<div class="checkbox compare">' +
'<label data-placement="right" data-toggle="tooltip" title="Add to Compare"><span class="compare-text">Compare</span><input type="checkbox" value="compare"></label>' +
'</div>';
for(i = 0; i < array.length; i++) {
// build image
image = '<div class="image"><img src="' + array[i].image + '" /></div>';
// build description
desc = '<div class="desc"><h4>' + array[i].id + '</h4>' +
'<h5>' + array[i].description + '</h5>';
// build icons
icons = '<div class="pim-icons"><a class="cart" href="' + array[i].url + '"><span class="glyphicon glyphicon-shopping-cart"></span></a>';
if(array[i].catalog) {
icons += '<a class="file" href="' + array[i].catalog + '"><span class="glyphicon glyphicon-file"></span></a>';
}
icons += '</div>';
productHTML += '<div class="product">' + image + desc + icons + '</div>';
}
return productHTML;
};
Are there better ways of doing this, or other options that I could pursue?
Thanks!
Walter

As far as I know this is the cleanest way to do it.
First of all you should create all html like this;
<div hidden="hidden" id="mainDiv">
<div class="checkbox compare">
<label data-placement="right" data-toggle="tooltip" title="Add to Compare">
<span class="compare-text">Compare</span>
<input type="checkbox" value="compare">
</label>
</div>
<div class="image">
<a href="">
<img src="">
</a>
</div>
</div>
After that you should make the parent div hidden, and clone it to an object with .clone(). After that you just simply change values of the element like;
<script>
function fillData(array)
{
for(var i ; i<array.length;i++)
{
var element = $("#mainDiv").clone();
element.attr("hidden","");
element.find("img").attr("id",array[i].url);
$(document).append(element);
}
}
</script>
and append to where ever you want.

You could use document.createElement and the other DOM methods instead of writing HTML, but that may be even more verbose than using an HTML string.
Another option would be to use a template function like what lodash provides, which would make the HTML a lot cleaner.
The JS becomes:
pim.buildProducts = function(array) {
var tplHtml = document.getElementById('productsTpl').innerHTML;
var tpl = _.template(tplHtml);
return tpl({ products: array });
}
And you could put the template in your HTML file:
<script type="text/template" id="productsTpl">
<% products.forEach(function(item) { %>
<div class="product">
<div class="image">
<a href="<%= item.url %>">
<img src="<%= item.image %>" />
</a>
</div>
<div class="desc">
<h4><%= item.id %></h4>
<h5><%= item.description %></h5>
<div class="pim-icons">
<a class="cart" href="<%= item.url %>">
<span class="glyphicon glyphicon-shopping-cart"></span>
</a>
<% if (item.catalog) { %>
<a class="file" href="<%= item.catalog %>">
<span class="glyphicon glyphicon-file"></span>
</a>
<% } %>
</div>
</div>
</div>
<% }) %>
</script>

Take a look to document.createElement function and all others for DOM handling

Append HTML to row if condition true, make sure there's still 3 columns to a row

I want to add the HTML of a column into a row, and have 3 columns per row. I do not wish to display all of the images in my array, and if they are not supposed to be displayed, I do not wish for the column number to tick over.
This should be really easy, but I'm getting really confused. My current code is just giving me an infinite loop getting stuck on an image where it is not supposed to display.
function loadImages()
{
var data = <?php echo json_encode($data); ?>;
data = $.map(data, function(value, index) {
return [value];
});
console.log(data);
for(var i = 0; i < data.length; i++)
{
data[i] = $.map(data[i], function(value, index) {
return [value];
});
}
var div = document.getElementById('imageBox');
var img = 0;
var row = 0;
while(img < data.length)
{
div.innerHTML += '<div class="row gallery-row" id="row' + row + '"></div>';
var col = 0;
while(SOMETHING OR OTHER)
{
if(!!data[img])
{
var html = [
'<div class="col-sm-4">',
' <a data-toggle="modal" data-target="#imageModal" onclick="" href="#" id=a' + img + '>',
' <img class="img-responsive img-gallery" src="" id=img' + img + '>',
' </a>',
'</div>'
].join('');
var valid = data[img][1][4].split(": ")[1];
if(valid == "True")
{
var imgName = data[img][0];
var name = data[img][1][0];
var location = data[img][1][1];
var desc = data[img][1][2];
document.getElementById('row'+ String(row)).innerHTML += html;
document.getElementById('img' + String(img)).setAttribute('src', imgName);
document.getElementById('a' + String(img)).setAttribute('onclick', "javascript:loadModalImage('" + imgName + "', '" + name + "', '" + location + "', '" + desc + "')");
col++;
}
img++;
}
}
row++;
}
}
function loadImageData(imageName, imageLocation, imageDesc)
{
var imgName = document.getElementById('img-name');
var imgDesc = document.getElementById('img-desc');
imgName.innerHTML = "Taken by <b>" + imageName + "</b> at <b>" + imageLocation + "</b>.<br>";
imgDesc.innerHTML = imageDesc;
}
function loadModalImage(image, imageName, imageLocation, imageDesc)
{
var modalImage = document.getElementById('imageModalImage');
modalImage.setAttribute("src", image);
loadImageData(imageName, imageLocation, imageDesc);
}
And the HTML:
<div class="box" name="box" id="imageBox">
<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-img">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<img class="img-responsive imageModalImage" id="imageModalImage" src="">
<p id="img-name"></p>
<p id="img-desc"></p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
As I said, I'm sure this should be an easy fix. Any help is still greatly appreciated, as I've just completely confused myself trying to solve this.

I want to upload only a single file using Blueimp File Uploader

I'm using Blueimp File Upload, and I want to upload only a single file. When I click on choose file for the 2nd time after one file is uploaded, the 2nd file gets append below.And what I want is to replace the old file when the new file is selected for 2nd time. Code for this is as below:
Form
<form id="import_form">
<div class="row">
<div class="col-md-12">
<div class="row upload_text" id="category_import" style="background: #eee; padding: 10px 0;">
<div class="col-md-12">
<span style="color: #888;"><i class="fa fa-file"></i> Choose File</span>
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary btn-sm" id="import_link">Import</button>
Download Demo File
</div>
<input type="file" name="files" id="add_upload_file" style="visibility: hidden; height:0; padding: 0;" />
</div>
<div class="clear"></div>
</div>
<div class="row loader" style="display: none;">
<div class="col-md-12">
<p><i class="hi hi-refresh text-info fa-spin"></i> Please wait while file is being uploaded.</p>
</div>
<div class="cleafix"></div>
</div>
</div>
</div>
Javascript for Blueimp
<script>
$(document).ready(function(){
$("#attach_file").click(function(e) {
e.preventDefault();
$("#add_upload_file").click();
});
var i = 0, a_ele;
$('#add_upload_file').fileupload({
url: '{{route("uploadCategory")}}',
autoUpload: true,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
acceptFileTypes: /(\.|\/)(xlsx?|csv)$/i,
submit: function(e, data) {
if (!$(".attachment").is(":visible"))
$(".attachment").css({display: 'block'});
var html = "<div class='col-md-12 attachment_box_wrapper'>" +
"<div class='attachment_box' id='attachment_" + i + "'>" +
"<div class='file_name'>" +
data.files[0].name +
"</div>" +
"<div class='file_progress'>" +
'<div class="progress progress-striped active">' +
'<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
'</div>' +
'</div>' +
'<div class="cancel_upload" id="' + data.files[0].name + '"><i class="fa fa-times"></i></div>' +
"</div>" +
"</div>" +
"<div class='clearfix'></div>";
$(".upload_text").append(html);
data.context = $("#attachment_" + i);
i++;
$(".message_wrapper").css("height", "calc(100% - " + $(".upload_text").outerHeight() + "px)");
},
processfail: function(e, data) {
alert(data.files[data.index].name + "\n" + data.files[data.index].error);
},
progress: function(e, data) {
var percent = parseInt(data.loaded / data.total * 100, 10);
$(data.context).find(".progress .progress-bar").attr("aria-valuenow", percent).css("width", percent + "%").html(percent + "%");
},
done: function(e, data) {
$(data.context).find(".progress").remove();
},
fail: function(e, data) {
console.log(data);
}
});
});
</script>

I had the same problem. I fixed it without using options.
$('#add_upload_file').fileupload({
url: "",
add: function (e, data) {
if($(".attachment_box").length > 0) { //Just count file listing div
alert("Only single file can be uploaded")
return;
}
},
formData: {
},
progress: function (e, data) {
},
done: function (e, responseJSON) {
}
});