Develop Reference

Problem with add attr to img and set path

I have a little problem becouse I read values of labels and after that i want to set img src dependent on value label
Here some code and i see that is img attr don't add
getState generate divs with content
At the end is ajax call function where i get values from database and write them to the dynamically generated labels
The main problem now is then that don't read a values of labels correct becouse I got 3 labels with 3 diffrent states like "Active","Standby","Error" and it set for all Emergency Stop icon
function ChangeImage() {
let labels = $('label[data-id]');
$.each(labels, function (i, x) {
var states = $(x).text();
console.log(states);
if (states == "Active") {
var Active = "Images/kafle/zebatakActive.svg";
$(this).closest('img').attr("src", Active);
} else if (states == "Standby") {
var Standby = "Images/kafle/kafle_zebatka-01.svg"
$(this).closest('img').attr("src", Standby);
} else if (states == "Error") {
var error = "Images/kafle/kafle_zebatka-01.svg";
$(this).closest('img').attr("src", error);
} else if (states == "Setting") {
var Settings = "Images/kafel/kafle_zebatka-03.svg"
$(this).closest('img').attr("src", Settings);
} else {
var Emergency = "Images/kafle/kafle_status-yel-yel.svg";
$(this).closest('img').attr("src", Emergency);
}
});
}
function getState() {
try {
$.ajax({
type: "POST",
url: "Default.aspx/jsrequest",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#ajax").empty();
$.each(data, function () {
$("#ajax").append('<div id="ajaxcontent"></div>');
$("#ajaxcontent").addClass("ajaxcontent");
$.each(this, function (k,v) {
$("#ajaxcontent").append('<div class="view">' + ' <label id="IdOfMachine">' + v.MachineId + '</label>'
+ '<label class="MachineState" name="Values" data-id= "' + v.MachineId + ' " > ' + v.CurrentStatus + '</label > '
+ '<img class="ChangeImg" data-id="' + v.MachineId + '"> ' + '</img > '
+ '<label id="MachineName">' + v.MachineName + '</label>' + '</div>');
});
});
},
error: function (response) {
alert("cos źle")
}
});
} catch (err) { }
}
public static List<StateOfMachine> jsrequest()
{
List<StateOfMachine> MachineState = new List<StateOfMachine>();
string DBInfo = #"Data Source=STACJA45;Initial Catalog=AutoRefresh;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
string sqlrequest = "Select MachineID,CurrentStatus,MachineName from MachineStates";
SqlConnection connection = new SqlConnection(DBInfo);
SqlCommand command = new SqlCommand(sqlrequest, connection);
connection.Open();
SqlDataReader DataReader = command.ExecuteReader();
while (DataReader.Read()) {
StateOfMachine machines = new StateOfMachine();
machines.MachineId = DataReader["MachineID"].ToString();
machines.MachineName = DataReader["MachineName"].ToString();
machines.CurrentStatus = DataReader["CurrentStatus"].ToString();
MachineState.Add(machines);
}
DataReader.Close();
command.Dispose();
connection.Close();
return MachineState;
}

first of all, welcome to StackOverflow :)
2 things in your code to avoid in the future:
DRY: Don't Repeat Yourself - every time you're writing the same thing over and over, you're doing it wrong :)
To be precise, always use === instead of == the later will give true for 1 == "1" and it's better to avoid it since the start.
Relating to your issue, apart for repeating yourself and the use of == you are specifying $(this) and that is ok as long as you pass a jQuery event because it's a self function, the object this is not what you are assuming.
your code could be changed to something as:
function ChangeImage() {
var labels = $('label[data-id]');
$.each(labels, function (i, x) {
var url = '';
var path = 'Images/kafle';
var state = $(x).text();
switch(state) {
case "Active": url = path + "/zebatakActive.svg"; break;
case "Standby": url = path + "/kafle_zebatka-01.svg"; break;
case "Error": url = path + "/kafle_zebatka-01.svg"; break;
case "Setting": url = path + "/kafle_zebatka-03.svg"; break;
default: url = path + "/kafle_status-yel-yel.svg"; break;
}
$('img[data-id="' + state + '"]').attr("src", url);
console.log({path, state, url});
});
}
code edited from comments

remove closet() and put find()
function ChangeImage() {
let labels = $('label[data-id]');
$.each(labels, function (i, x) {
var states = $(x).text();
switch(states)
{
case "Active":
$(this).find('img').attr("src","Images/kafle/zebatakActive.svg");
break;
case "Standby":
$(this).find('img').attr("src", "Images/kafle/kafle_zebatka-01.svg");
break;
case "Error":
$(this).find('img').attr("src", "Images/kafle/kafle_zebatka-01.svg");
break;
case "Setting":
$(this).find('img').attr("src", "Images/kafel/kafle_zebatka-03.svg");
break;
default:
$(this).find('img').attr("src", "Images/kafle/kafle_status-yel-yel.svg");
break;
}
});
}

SOLUTION:
If you are using HTML as in the following code snippet, you can use siblings([selector]) to read the matching sibling element and to change the src of the image.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<img src="#" class="image" height="100" width="100">
<label data-id="1" class="image-link">Active</label>
</div>
<div>
<img src="#" class="image" height="100" width="100">
<label data-id="2" class="image-link">Emergency</label>
</div>
<button onclick="changeImage()">Change</button>
<script>
function changeImage() {
let labels = $('label[data-id]');
$.each(labels, function (i, x) {
var states = $(x).text();
if (states == "Active") {
var Active = "https://atlas-content-cdn.pixelsquid.com/stock-images/golden-soccer-ball-3yLR9z1-600.jpg";
$(this).siblings('img').attr( {"src": Active });
} else {
var Emergency = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
$(this).siblings('img').attr("src", Emergency);
}
});
}
</script>
</body>
</html>

Is there way to get the corresponding item using next and next all expression of jquery

I have module regarding getting the right corresponding parent item and parent child, so to get the each item and the child I use the next and nextAll expression of jquery. I will share to you guys my output right now, and the output I want to be.
This is my output right now (Which this output is wrong)
The output should be look like this
My output in my web app. as you can see on my highlighted items there is no children however in my console log when I submit the button the highlighted item repeat the output on the first item ordered
To append the item to that list I use this code.
$("tr#productClicked").click(function () {
var menu_name = $(this).closest("tr").find(".menu_name").text();
var menu_price = $(this).closest("tr").find(".menu_price").text();
var chain_id = $(this).closest("tr").find(".chain_id").text();
var menu_image = $(this).closest("tr").find(".menu_image").attr('src');
swal({
title: "Are you sure to add " + menu_name + " ?",
text: "Once you will add it will automatically send to the cart",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willInsert) => {
if (willInsert) {
swal("Successfully Added to your form.", {
icon: "success",
});
if(chain_id == 0) {
$("tbody#tbody_noun_chaining_order").
append("<tr class='condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td class='total'>"+menu_price+"</td><td><button class='removeorderWithOutCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
}
else
{
$.ajax({
url:'/get_noun_group_combination',
type:'get',
data:{chain_id:chain_id},
success:function(response){
var noun_chaining = response[0].noun_chaining;
$("tbody#tbody_noun_chaining_order").
append("<tr class='condimentParent' style='background-color:'black !important',color:'white !important' '><td></td><td>"+menu_name+"</td><td class='total'>"+menu_price+"</td><td><button class='removeorderWithCondi btn btn-danger form-control'><i class='far fa-trash-alt'></i></button></td></tr>");
$.each(noun_chaining, function (index, el) {
var stringify_noun_chaining = jQuery.parseJSON(JSON.stringify(el));
// console.log(stringify['menu_cat_image']);
var Qty = stringify_noun_chaining['Qty'];
var Condiments = stringify_noun_chaining['Condiments'];
var Price = stringify_noun_chaining['Price'];
var allow_to_open_condiments = stringify_noun_chaining['allow_to_open_condiments'];
var condiments_section_id = stringify_noun_chaining['condiments_section_id'];
$("tbody#tbody_noun_chaining_order").
append("<tr class='editCondiments'>\
<td class='condiments_order_quantity'>"+Qty+"</td>\
<td>*"+Condiments+"</td><td class='total'>"+Price+"</td>\
<td class='allow_to_open_condiments_conditional' style='display:none;'>"+allow_to_open_condiments+"</td>\
<td class='condi_section_id' style='display:none;'>"+condiments_section_id+"</td>\
</tr>");
})
},
error:function(response){
console.log(response);
}
});
}
}
});
This is my add to cart button when inserting the item to the database.
$('button#add_to_cart').on('click',function () {
var customer_id = $('#hidden_customer_id').val();
$parent = $(this).closest("tr.condimentParent");
var menu= $('#noun_chaining_order').find('tr.condimentParent');
menu.next('.condimentParent').add(menu).each(function(){
if(menu.length > 0 ) {
var $tds_menu = $(this).find("td");
Qty_menu = $tds_menu.eq(0).text(),
Item_menu = $tds_menu.eq(1).text(),
Price_menu = $tds_menu.eq(2).text();
console.log(Item_menu);
var condiments= $('#noun_chaining_order').find('tr.editCondiments');
condiments.nextAll('.editCondiments').add(condiments).each(function(){
var $tds_condiments = $(this).find("td");
Qty_condiments = $tds_condiments.eq(0).text(),
Item_condiments = $tds_condiments.eq(1).text(),
Price_condiments = $tds_condiments.eq(2).text();
console.log(Item_condiments);
});
}
});
});

To solved my problem i use multiple add
$('button#add_to_cart').on('click',function () {
var customer_id = $('#hidden_customer_id').val();
$parent = $(this).closest("tr.condimentParent");
var condiments= $('#noun_chaining_order').find('tr.editCondiments');
var menu= $('#noun_chaining_order').find('tr.condimentParent');
menu.next('.condimentParent').add(menu).add(condiments).each(function(){
var $tds_menu = $(this).find("td");
Qty_menu = $tds_menu.eq(0).text(),
Item_menu = $tds_menu.eq(1).text(),
Price_menu = $tds_menu.eq(2).text();
console.log(Item_menu);
// condiments.nextAll('.editCondiments').add(condiments).each(function(){
// var $tds_condiments = $(this).find("td");
// Qty_condiments = $tds_condiments.eq(0).text(),
// Item_condiments = $tds_condiments.eq(1).text(),
// Price_condiments = $tds_condiments.eq(2).text();
// console.log(Item_condiments);
// });
});
});

Anchor tag not working with dynamic table

The anchor link is not working when I construct a dynamic table with javascript.
Code:
$(".genareteEmail").click(
function() {
alert("sdsds");
var incidentNo = $(this).attr('dataId');
$.ajax({
url : "generate?incident=" + incidentNo,
method : 'GET',
success : function(data) {
var subject = data;
var content = subject.split("END");
try {
var outlookApp = new ActiveXObject(
"Outlook.Application");
var nameSpace = outlookApp
.getNameSpace("MAPI");
mailFolder = nameSpace
.getDefaultFolder(6);
mailItem = mailFolder.Items
.add('IPM.Note.FormA');
mailItem.Subject = content[3];
mailItem.cc = content[2];
mailItem.To = content[1];
mailItem.HTMLBody += content[0];
var insp = mailItem.GetInspector;
var mySigline = mailItem.HTMLBody;
mailItem.display(0);
} catch (e) {
alert(e);
// act on any error that you get
}
}
});
});
$("#btnSubmit").click(function(){
callMe();
});
function callMe() {
$.ajax({
url : "ajaxTicketInfo",
type : 'GET',
error : function() {
},
success : function(result) {
var ticketCount = result.length;
var mytable = $('<table></table>');//.attr({ id: "basicTable" });
var rows = ticketCount;
var cols = 2;
var tr = [];
$('<tr></tr>').html("<th>Incidents</th><th>Mail Generation</th>").appendTo(mytable);
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').appendTo(mytable);
for (var j = 0; j < cols; j++) {
if(j== 0){
$('<td></td>').text(result[i] + " "+ Math.random()).appendTo(row);
}else{
//var aTag = $('<a></a>').attr({ dataId: result[i] });
$('<td></td>').html('<a class="genareteEmail" href="#" dataId ="'+result[i]+'">Generate Email</a>').appendTo(row);
/* $('<td></td>').text("Generate Mail").append(row); */
}
}
}
$("#box").html(mytable);
},
cache: false
});
};
setInterval(callMe, 900000);
});
<body>
<h1>Acknowledgement Mail Generation</h1>
<div>
<div>
Next Refresh will be in <span id="time">05:00</span> minutes!
</div>
<div>
<button id = "btnSubmit">Refresh</button>
</div>
</div>
HTML Code:
<div id="box">
<table>
<tbody>
<tr><th>Incidents</th><th>Mail Generation</th></tr>
<tr><td>INC000013610276 0.15926314527814805</td><td>
<a class="generateEmail" href="#" dataid="INC000013610276">Generate
Email</a></td></tr>
<tr><td>INC000013608353 0.7894190043310691</td><td>
<a class="generateEmail" href="#" dataid="INC000013608353">Generate
Email</a></td></tr>
<tr><td>INC000013594620 0.8572899023472066</td><td>
<a class="generateEmail" href="#" dataid="INC000013594620">Generate
Email</a></td></tr>
<tr><td>INC000013592053 0.02202170976246076</td><td>
<a class="generateEmail" href="#" dataid="INC000013592053">Generate Email</a>
</td>
</tr>
</tbody>
</table>
</div>
As per my code when I click the corresponding anchor link the .genarateEmail jquery need to be executed. But the click functionality is not working.
Can anybody help me where I made wrong while creating the dynamic table.

All the events should be bound once the document is ready. Hence include your method within the document ready as commented by #Mark B
$(document).ready(function(){
$(".genareteEmail").click( function(){
//Your logic
})
})

Update multiple progress bars when posting multiple files and form elements via ajax

How do you update multiple progress bars when posting a form via ajax? Here is the code I have but I can't figure it out:
Form code:
<form id="upload-form" class="no-padding" method="post" enctype="multipart/form-data">
<p><label for="folder">Create folder:</label><input type="text" name="folder" placeholder="Enter a folder name"></p>
<p><label for="file">Create file:</label><input type="text" name="file" placeholder="Enter a file name with extension (e.g. home.php)"></p>
<p class="no-margin">Upload file(s):</p>
<div class="custom-upload">
<input id="upload" type="file" name="upload[]" multiple>
<div class="fake-file">
<a class="browse text-center"><i class="fa fa-list"></i> Browse</a><input placeholder="No file(s) selected..." disabled="disabled" >
</div>
</div>
<div id="selectedFiles" class='selectedFiles'></div>
<?php echo "<input name='url' hidden value='" . $_SERVER['REQUEST_URI'] ."'>";?>
<button id="submit" name="submit"><i class="fa fa-upload"></i> Upload</button>
<p id="uploading" class='success text-right' hidden>Please be patient while your files are uploading.</p>
</form>
Javascript code:
var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#upload').addEventListener('change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
var files, filesToUpload;
// populates files into array (filesToUpload) and displays selected files to the user
function handleFileSelect(e) {
if(!e.target.files) return;
selDiv.innerHTML = "";
var files = e.target.files;
filesToUpload = Array.prototype.slice.call(files);
if (files.length > 0) {
selDiv.innerHTML += '<p id="file-upload-paragraph" class="no-padding no-margin">Files selected for upload. Click the <b>x</b> to cancel file upload for a specific file:</p>';
}
for(var i = 0; i < files.length; i++) {
var f = files[i];
selDiv.innerHTML += '<div class="selectedFiles"><i class="fa fa-remove"></i><progress id="progress' + i + '" class="text-right" value="0" hidden></progress><span class="file-holder">' + f.name + ' <i class="fa fa-file"></i></span></div>';
}
}
// removes user selected file before upload
$(document).on('click', '.cancel', function () {
filesToUpload.splice($(".cancel").index(this), 1);
$(this).closest('div').remove();
if (filesToUpload.length == 0) {
$('#file-upload-paragraph').remove();
$('.custom-upload input[type=file]').val('');
}
$('.custom-upload input[type=file]').next().find('input').val(filesToUpload.length + ' files selected!');
});
// sets progress bar for each loaded file
$('#upload-form').submit(function(e){
e.preventDefault();
var url = location.href;
$("#upload").remove();
$(".cancel").hide();
$("progress").show();
var data = new FormData($('form')[0]);
if (filesToUpload.length != 0) {
for (var i = 0, j = filesToUpload.length; i < j; i++) {
data.append("upload[]", filesToUpload[i]);
}
}
$.ajax({
url: url,
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
xhr: function(progress) {
for (var i = 0, j = filesToUpload.length; i < j; i++) {
var progressBar = 'progress' + i;
if(document.getElementById(progressBar) == null) {
j++;
continue;
}
var xhr = new XMLHttpRequest();
(function(progressBar) {
xhr.upload.onprogress = function(e) {
$('#' + progressBar).attr({value: e.loaded, max: e.total});
};
}(progressBar));
}
return xhr;
},
success: function(res){
if(!res.error) location.reload(true);
}
});
});
PHP code:
// function call
uploadFiles(count($_FILES["upload"]["name"]), $_FILES["upload"]["tmp_name"], $_FILES["upload"]["name"], $path);
// function that uploads selected files
function uploadFiles($total, $tmpFiles, $uploadedFiles, $path) {
for($i=0; $i < $total; $i++) {
$tmpFilePath = $tmpFiles[$i];
if ($tmpFilePath != ""){
$newFilePath = "$path/" . $uploadedFiles[$i];
if(file_exists($newFilePath)) {
unlink($newFilePath);
}
move_uploaded_file($tmpFilePath, $newFilePath);
}
}
}
Here is a picture of the form, just in case:
Form image
Thanks in advance for any help.

I don't know if anyone will be looking to do the same thing but I found my own answer. Basically, replace my initial code for catching when the form is submitted with the following:
// sets progress bar for each loaded file
$('#upload-form').submit(function(e){
e.preventDefault(); // removes the default behavior of the form button
var url = location.href; // returns the current location
$("#upload").remove(); // removes the file upload box which is replaced with an array in my other code
$(".cancel").hide(); // hides the cancel buttons
$("progress").show(); // shows the hidden progress bars
// checks to see if files were selected for being uploaded
if (filesToUpload.length != 0) {
var progressBars = [];
// this loop accounts for files that were deleted after selection
for (var i = 0, j = filesToUpload.length; i < j; i++) {
if(document.getElementById('progress' + i) == null) {
j++;
continue;
}
progressBars.push(i);
}
// call to postNext function
postNext(0, progressBars, url);
// executes when only the other form elements are submitted with no file upload
} else {
var data = new FormData($('form')[0]);
$.ajax({
url: url,
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
success: function(res){
if(!res.error) location.reload(true);
}
});
}
});
// posts each file separately
function postNext(i, progressBars, url) {
// continues as long as there are more files to display progress bars
if (i < progressBars.length) {
var index = progressBars[i];
var data = new FormData($('form')[0]);
// after first ajax send, resets form so only the remaining file uploads are resubmitted
if (i == 0) {
$("#upload-form")[0].reset();
}
data.append("upload[]", filesToUpload[i]); //append the next file
$.ajax({
url: url, // url for post
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
xhr: function(progress) {
// set the progress for a given progress bar
var xhr = new XMLHttpRequest();
var progressBar = 'progress' + index;
(function(progressBar) {
xhr.upload.onprogress = function(e) {
$('#' + progressBar).attr({value: e.loaded, max: e.total});
};
}(progressBar));
return xhr;
},
beforeSend: postNext(i + 1, progressBars, url) // begins next progress bar
});
}
}
// refreshes the page only after all ajax requests are completed
$(document).bind("ajaxSend", function () {
console.log("waiting for all requests to complete...");
}).bind("ajaxStop", function () {
location.reload(true);
});

jQuery close button isnt working

I have the following code:
function getdata(id){
$.ajax({
type: "POST",
url: "mapa_llamadas.php",
data: { 'id' : id },
success: function(data) {
var resultado = $.parseJSON(data);
var html = '';
var contador = 0;
for (var columna in resultado){
contador++;
if(contador == 12){
contador = 1;
}
var num_parcela = resultado[columna]['num_parcela'];
var finca_registral = resultado[columna]['finca_registral'];
var ref_catastral = resultado[columna]['ref_catastral'];
var uso_1 = resultado[columna]['uso_1'];
var uso_2 = resultado[columna]['uso_2'];
var sup_m2_parcela = resultado[columna]['sup_m2_parcela'];
var edif = resultado[columna]['edif'];
var aprov_neto_m2 = resultado[columna]['aprov_neto_m2'];
var situacion = resultado[columna]['situacion'];
var adjudicatario = resultado[columna]['adjudicatario'];
var coord = resultado[columna]['coord'];
html += '<ul><li><strong>Número de parcela:</strong> '+num_parcela+'</li><li><strong>Finca registral:</strong> '+finca_registral+'</li><li><strong>Referencia catastral:</strong> '+ref_catastral+'</li><li><strong>Uso 1:</strong> '+uso_1+'</li><li><strong>Uso 2:</strong> '+uso_2+'</li><li><strong>Superficie:</strong> '+sup_m2_parcela+' m<sup>2</sup></li><li><strong>Edificio:</strong> '+edif+'</li><li><strong>Aprovechamiento neto:</strong> '+aprov_neto_m2+' m<sup>2</sup></li><li><strong>Situación:</strong> '+situacion+'</li><li><strong>Adjudicatario:</strong> '+adjudicatario+'</li></ul>';
///alert(contador + "index:" + columna + "\n value" + resultado[columna]['num_parcela']);
}
$('#mostrarparcela').html('<button title="Cerrar ventana" class="mfp-close"><i class="mfp-close-icn">×</i></button>'+html);
}
});
}
This exact line isnt working (it should close the window that appears):
$('#mostrarparcela').html('<button title="Cerrar ventana" class="mfp-close"><i class="mfp-close-icn">×</i></button>'+html);
#mostrarparcela are a number of <area></area> tags in my html file.
What am I missing?

You have to add close function to button.
Try with
<button title="Cerrar ventana" class="mfp-close" onclick="javascript:window.close();"><i class="mfp-close"><i class="mfp-close-icn">×</i></button>

I have found what I was missing, this is what I needed to add to make the close button functionality work:
$('#mostrarparcela').html('<button id="close" title="Cerrar ventana" class="mfp-close"><i class="mfp-close-icn">×</i></button>'+html);
$( "#close" ).click(function() {
var magnificPopup = $.magnificPopup.instance;
magnificPopup.close();
});