I'm trying to add data to an empty var, but data is not getting stored.
When calling hotel_list, it shows empty. What am I missing? Thanks!
var hotelData = JSON.parse(data);
function hotelList(){
var hotel_list = '';
for (i = 0; i < hotelData.length; i++) {
function list(index, hotel) {
hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
document.getElementById("hotel-listing").innerHTML = hotel_list;
};
};
};
document.addEventListener('DOMContentLoaded', function() {
hotelList();
});
var data = '[{"name": "h1"}, {"name": "h2"}]';
var hotelData = JSON.parse(data);
function hotelList(){
var hotel_list = '';
(hotelData || []).forEach(function (hotel, index) {
hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
});
document.getElementById("hotel-listing").innerHTML = hotel_list;
};
document.addEventListener('DOMContentLoaded', function() {
hotelList();
});
<div id="hotel-listing"></div>
Related
I am trying to get a value from a dropdown list. I have the dropdown list and I have the value that I want but I don't know how to link them to each other. So the value of the category should go in the dropdown list and then the image value from that string should be the outcome.
This is the JSON file array called ill.json
...
[{"id":"7","category":"Lente collectie 2021","image":"Teddy_bears_10.png"},{"id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"}
...
The category value goes into the dropdown list and then the outcome should be the image value:
This is my dropdown
...
const req = new XMLHttpRequest();
req.open('GET', 'ill.json', true);
req.send();
req.onload = function() {
const json = JSON.parse(req.responseText);
let dropdown = "";
let html = "";
//FILLING DROPDOWN WITH CATEGORYs
var result = json.reduce(function (r, a) {
r[a.category] = r[a.category] || [];
r[a.category].push(a);
return r;
}, Object.create(null));
let keys = Object.keys(result)
keys.forEach((key) => {
dropdown += "<select id='select'>"
dropdown += "<option value='" + key + "'>"
dropdown += key
dropdown += "</option>"
dropdown += "</select"
})
document.getElementsByClassName('dropdown')[0].innerHTML = dropdown;
...
And this is how I got the images
...
//get all images
json.forEach(function(val) {
html += "<div class='illustratie-item'>";
html += "<img class='dt-filelist-image' src='" + val.image + "'/>"
html += "</div><br>";
});
document.getElementsByClassName('illustratie-wrapper')[0].innerHTML = html;
...
If I get that right, it should be as easy as this:
var categorySelect = document.querySelector('.dropdown');
categorySelect.addEventListener('change', function(evt) {
var item = json.find(function(item) {
return item.id === evt.target.value;
});
console.log(item.image); // there's your image
});
Check the below snippet.
var images = [{"id":"7","category":"Lente collectie 2020","image":"Teddy_bears_10.png"},{"id":"11","category":"Lente collectie 2021","image":"Individual_floral_elements_01.png"}];
var dropdown = '';
dropdown += '<select id="select">';
Object.keys(images).forEach(function(key) {
dropdown += '<option value="' + images[key].id + '">';
dropdown += images[key].category;
dropdown += '</option>';
});
dropdown += '</select>';
document.getElementsByClassName('dropdown')[0].innerHTML = dropdown;
var categorySelect = document.querySelector('#select');
categorySelect.addEventListener('change', function(evt) {
var item = images.find(function(item) {
return item.id === evt.target.value;
});
console.log( item.image );
});
<div class="dropdown"></div>
I am currently using the slick-lightbox plugin https://github.com/jongacnik/slick-lightbox. I am trying to load content into it dynamically after an AJAX call.But the carousel does not get updated .
$('.slider-lightbox').on('click', function (e) {
var pageKey = 2;
var itemId = '562A4B65A09A4215927346F8ECF67759';
var url = '/api/threesixtyviewapi/GetAllCommunityGalleryAjax';
$.post(url, { page: pageKey, itemId: itemId }, function (data, status) {
var pageNumber = data.page;
var newsItems = data.items;
if (data.length > 0) {
var imgGalleryBlock = '';
for (i = 0; i < data.length; i++) {
var imageUrl = data[i].ImageUrl;
var videoUrl = data[i].VideoUrl;
var thumbnail = data[i].VideoThumbnailUrl;
var isVideo = data[i].Is360View;
var pendingCount = data[i].pendingCount;
if (isVideo == true) {
imgGalleryBlock += '<li class="video active"><a href=';
imgGalleryBlock += videoUrl;
imgGalleryBlock += ' width="400px" target="_blank"><img src=';
imgGalleryBlock += thumbnail;
imgGalleryBlock += ' alt=""/><img class="play-btn" src="/images/video-icon.svg"></a></li>';
}
else {
imgGalleryBlock += '<li class="image active"><a href=';
imgGalleryBlock += imageUrl;
imgGalleryBlock += ' width="400px" target="_blank"><img src=';
imgGalleryBlock += imageUrl;
imgGalleryBlock += ' alt=""/></a></li>';
}
}
$('ul.slider-lightbox').append(imgGalleryBlock);
window.onload = timedRefresh(000);
pageKey++;
$('.img-gallery-main-btn').attr('data-key', pageKey);
if (pendingCount <= 6) {
$('.img-gallery-main-btn').hide();
}
}
else {
$('.img-gallery-main-btn').hide();
}
});
});
The problem with the plugin is that there is not a 'refresh' method so though I am able to load the content in the DOM,it does not reflect in the carousel.
Please help.
I think you should dispose and after initialize slick with your selector when your ajax done.
$('WhateverYourSelector').slickLightbox({
itemSelector: 'ExampleIdOrClassOrNameOrBlaBla'
});
Or
$('WhateverYourSelector').slick();
I have:
$('#createStockOrder').click(function () {
modal('create-stock-order', {}, function () {
var $modal = $(this);
var submitted = false;
var model = [];
$('.glyphicon-plus').click(function () {
var product_id = $('#productSelect option:selected').text(),
size_id = $('#sizeSelect option:selected').text(),
colour_id = $('#colourSelect option:selected').text(),
quantity = $('#quantity').val();
// Get index of the element where all the fields matches
var index = getObjectIndex(model, product_id, size_id, colour_id);
// If object found in the array
if (index !== false) {
// Update the quantity in the same element
model[index].quantity = quantity;
} else {
// Add the element in the array
model.push({
product_id: product_id,
size_id: size_id,
colour_id: colour_id,
quantity: quantity
});
}
printStock(model);
});
var form = document.getElementById('create_sale');
var $form = $(form);
$form.on('submit', function (e) {
e.preventDefault();
if (!submitted) {
submitted = true;
$('#create_sale .btn-primary').addClass('disabled');
var formData = new FormData(form);
qwest.post(form.action, formData)
.then(function (resp) {
$modal.modal('hide');
})
.catch(function (xhr, response, e) {
var html = '';
$.each(response, function (i, v) {
html += '<p>' + v + '</p>';
});
$('#create_sale .alert').html(html).removeClass('hide');
$('#create_sale .btn-primary').removeClass('disabled');
submitted = false;
});
}
})
}, {width: 1000});
});
// Currently the function is Static, but it can be changed to dynamic
// by using nested loop and a flag to store the match status
function getObjectIndex(arr, product_id, size_id, colour_id) {
// Loop over array to find the matching element/object
for (var i = 0; i < arr.length; i++) {
var obj = arr[i];
if (obj.product_id === product_id && obj.size_id === size_id && obj.colour_id === colour_id) {
// When all key-value matches return the array index
return i;
}
}
// When no match found, return false
return false;
}
function printStock(model) {
var html = '';
var total_row_quantity = 0;
var total_row_value = 0;
$.each(model, function (i1, v1) {
html += '<tr>';
$.each(v1, function (i2, v2) {
html += '<td>' + v2 + '</td>';
$('#product_totals tr').each(function(i3, v3){
var product_code = $('td', v3).eq(0).html();
if(product_code == v2) {
total_row_quantity += parseInt(model[i1].quantity);
total_row_value += parseFloat($('td', v3).eq(2).html()*model[i1].quantity);
$('td', v3).eq(1).html(total_row_quantity);
$('td', v3).eq(3).html(accounting.formatMoney(total_row_value, ''));
} else {
total_row_quantity = 0;
total_row_value = 0;
}
})
});
html += '</tr>';
});
$('#stock_order tbody').html(html);
}
The HTML is:
<tbody id="product_totals">
<tr data-id="1">
<td>JW1501</td>
<td class="code-quantity-total">0</td>
<td>79.00</td>
<td class="code-cost-total">0</td>
</tr>
<tr data-id="2">
<td>JW1502</td>
<td class="code-quantity-total">0</td>
<td>99.00</td>
<td class="code-cost-total">0</td>
</tr>
<tr data-id="3">
<td>JW1501-1</td>
<td class="code-quantity-total">0</td>
<td>20.00</td>
<td class="code-cost-total">0</td>
</tr>
<tr data-id="4">
<td>JW1502-2</td>
<td class="code-quantity-total">0</td>
<td>25.00</td>
<td class="code-cost-total">0</td>
</tr>
</tbody>
The list of rows (JW1501, JW1502) is dynamic.
The problem I am having is that if a variant of e.g. JW1502 is added, only the total quantity and value is calculated for that one. Any previous different variants of JW1502 are ignored.
How can I fix this?
Example content of var model:
[
{"product_id":"JW1501","size_id":"70A","colour_id":"小豹纹","quantity":"1"},
{"product_id":"JW1501","size_id":"75B","colour_id":"小豹纹","quantity":"2"},
{"product_id":"JW1502","size_id":"85A","colour_id":"黑色","quantity":"1"}
]
The above for JW1501 would show the incorrect quantity of 2, not 3.
...
$('#product_totals tr').each(function (i3, v3) {
console.log(v1, v2, v3)
...
Outputs:
Object {product_id: "JW1501", size_id: "70A", colour_id: "小豹纹", quantity: "2"}
"JW1501"
<tr data-id="1"><td>JW1501</td><td class="code-quantity-total">2</td><td>79.00</td><td class="code-cost-total">158.00</td></tr>
I have completely changed your printStock function to achieve your goal:
function printStock(model) {
$("#product_totals tr").each(function(){
var id = $("td:eq(0)", this).text().trim();
var price = parseFloat($("td:eq(2)", this).text());
var count = 0;
$.each(model, function(i, item){
if (item.product_id == id) count += (+item.quantity);
});
$("td:eq(1)", this).text(count);
$("td:eq(3)", this).text((count * price).toFixed(2));
});
var rows = $.map(model, function(item){
return [
"<td>" + item.product_id + "</td>",
"<td>" + item.size_id + "</td>",
"<td>" + item.colour_id + "</td>",
"<td>" + item.quantity + "</td>"
].join("");
});
var html = "<tr>" + rows.join("</tr><tr>") + "</tr>";
$('#stock_order tbody').html(html);
}
The main difference is that my code groups items in model by product_id for further counting.
Also refer my fiddle.
$(document).ready(function () {
var numbers = ['sachin', 'raaj', 'rahul', 'mahesh', 'sandip'];
$('#btn').click(function ()
{
var c = $("#ad_list option:selected").text();
numbers = jQuery.grep(numbers, function (value) {
return value != c;
}); >
});
var option = '';
for (i = 0; i < numbers.length; i++) {
option += '<option value="' + i + '">' + numbers[i] + '</option>'; >
}
$('#ad_list').append(option);
});
below is html code dropdownlist showing element in array
<label>ADD:</label>
<select name="ADD_list" id="ad_list"></select>
<input type="submit" id="btn" />
You need to update your option after removing the selected element:
function updateOption(numbers) {
$("#ad_list").empty();
var option = '';
for (i = 0; i < numbers.length; i++) {
option += '<option value="' + i + '">' + numbers[i] + '</option>';
}
$('#ad_list').append(option);
}
$(document).ready(function () {
var numbers = ['sachin', 'raaj', 'rahul', 'mahesh', 'sandip'];
$('#btn').click(function () {
var c = $("#ad_list option:selected").text();
numbers = jQuery.grep(numbers, function (value) {
return value != c;
});
updateOption(numbers);
});
updateOption(numbers);
});
Fiddle Demo
On clicking the td class="bgimg", I'm calling another function. How do I add a class to the td which I clicked?
/*This function creates a list of tabs*/
BCL.onSearchResponse = function(jsonData) {
BCL.jsonData = jsonData;
var str = "<table id=\"playlistTable\" cellspacing=\"1\"><tbody><tr>";
var html = "";
for (var i = 0; i < jsonData["items"].length; i++) {
var playlist = jsonData["items"][i];
html = "<td class=\"bgimg\" onclick=\"BCL.onPlaylistSelect(" + i +")\">{{name}}</td>";
str += BCL.markup(html,playlist);
}
str += "</tr></tbody></table>";
//console.log(str);
document.getElementById("results").innerHTML = str;
// load the first playlist
BCL.onPlaylistSelect(0);
}
function hasClass(element,clss) {
return element.className.match(new RegExp('(\\s|^)'+clss+'(\\s|$)'));
}
function addClass(element,clss) {
if (!this.hasClass(element,clss)) element.className += " "+clss;
}
BCL.onPlaylistSelect = function(something, element) {
element.addClass("myClass");
//do stuff
};
BCL.onSearchResponse = function(jsonData) {
BCL.jsonData = jsonData;
var str = "<table id=\"playlistTable\" cellspacing=\"1\"><tbody><tr>";
var html = "";
for (var i = 0; i < jsonData["items"].length; i++) {
var playlist = jsonData["items"][i];
html = "<td class=\"bgimg\" onclick=\"BCL.onPlaylistSelect(" + i +", this)\">{{name}}</td>";
str += BCL.markup(html,playlist);
}
str += "</tr></tbody></table>";
//console.log(str);
document.getElementById("results").innerHTML = str;
// load the first playlist
BCL.onPlaylistSelect(0);
};