We Keep Coding

Change DIV content based on Toggle button clicked

If user click "Twin Bed" or "King Bed", Content inside "demand-message" have to change either "high demand" or "Only ??? rooms left".
ID will be same for button because of existing logic. Now my message to display on "demand-message" is not changing if i click "King Bed". It displays correctly for "Twin Bed".
Is it possible to change message by getting ID with data-bed-type attribute to match and change the message (either high demand or No. of rooms left)?
HTML:
<div class="col-lg-4 col-md-12 col-sm-12 col-12 left-container">
<div class="demand-message--wrapper">
<div class="demand-message"></div>
</div>
<div class="left-column">
<div class="btn-group">
<button type="button" data-bed-container-id="deluxe-balcony-room" data-bed-max="190" data-bed-type="twin">Twin Bed</button>
<button type="button" data-bed-container-id="deluxe-balcony-room" data-bed-max="90" data-bed-type="king">King Bed</button>
</div>
</div>
JS:
function onToggleBed(e) {
var thisButton = $(e.currentTarget);
var bedTypeSelected = thisButton.data('bed-type');
var bedValueSelected = thisButton.data('bed-value');
var roomContianerId = thisButton.data('bed-container-id');
var buttonMaxRoom = thisButton.data('bed-max');
var message = '';
if (buttonMaxRoom < 100) {
message = 'Only ' + buttonMaxRoom + ' rooms left';
} else if (buttonMaxRoom > 100) {
message = 'In high demand';
}
if (message == '') {
$('#' + roomContianerId + ' .demand-message').hide();
} else {
$('#' + roomContianerId + ' .demand-message').show();
$('#' + roomContianerId + ' .demand-message').html(message);
}
}

As I mentioned in my comment, hypens will removed and turned into camelCase.
In this case use:
var bedTypeSelected = thisButton.data('bedType');
Let's console.log(thisButton.data()); to see your data items.

How to add next previous buttons to popup?

I need to load XML data to next and previous buttons on the popup box. When button click, my code is fail to load the XML data. How can I implement the code.
Here is the script
function xmlParser(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let tag = $(this).prop("tagName");
let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
let head = '<div>' + $(this).find("head").text() + '</div>';
let html = `<div class="col-sm-4 random" id="random">
<a href="#${tag}" id="openModalBtn">
<div>${image}</div>
<h5>${head}</h5>
</a>
</div>`;
let popup = `<div id="${tag}" class="overlay">
<div class="popup">
‹
›
<h6>${head}</h6>
<a class="close" href="#">×</a>
<div>${image2}</div>
</div>
</div>`;
$("#xmldata").append(html);
$("#popup").append(popup);
});
}
Plunker

Firstly div id is being duplicated if you use directly tag name. So use index in for loop and do some simple calculation to get prev & next items, something like:
$(xml).children().each(function (idx) {
let tag = $(this).prop("tagName");
let nextIdx = idx + 1;
let prevIdx = idx - 1;
//to make cyclic rotation
nextIdx = nextIdx == total ? 0 : nextIdx;
prevIdx = prevIdx == -1 ? (total -1) : prevIdx;
//..........check plunker code
http://next.plnkr.co/edit/Sj188FthvFu6H5uv?open=lib%2Fscript.js

JQuery append doesn't load css for toggle button

I'm trying to use a toggle button with jquery appended content. The appended content uses Labelauty jQuery Plugin to load the check boxes and its working fine.
But the toggle button is not loading the relevant css properly.
Here is my html code for the panel which includes the toggle button.
<div class="col-md-6">
<div class="panel">
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion">
<h4>Test<i class="fa fa-thumbs-o-down"></i> <small>CASES</small>
<div class="toggle-wrap w-checkbox">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle()">
<label class="toggle-label w-form-label" for="Toggle-Switch"> </label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</h4>
</div>
<br>
<button type="button" class="btn btn-info float-right" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>
<!--TestPlan Panel-->
<div class="Panel">
<div class="col-md-13">
<div class="panel">
<div class="panel-body container-fluid">
<h4>Test<i class="fa fa-thumbs-o-down"></i> <small>PLAN</small></h4>
<!-- Start list -->
<ul id="testplan" class="list-group"></ul>
</div>
<!-- End list -->
</div>
</div>
</div>
Which output this
before jquery append
Here is my jquery to append content
//Load TestCase List to Accordion
var testSuiteList;
var currentTestSuite;
function loadtestcases(testSuite, testcases) {
currentTestSuite = testSuite;
var testcases = testcases.split(",");
// $("#testcases").empty();
$("#testcases div:not(:first)").remove();
var id = 0;
// $("#testcases").append("<h4>Test<i class='fa fa-thumbs-o-down'></i> <small>CASES</small></h4>")
testcases.forEach(function(entry) {
id = id + 1;
$("#testcases").append("<div class='accordion__item js-accordion-item'>" +
"<div class='accordion-header js-accordion-header'>" +
"<input type=\"checkbox\" class='to-labelauty-icon' name=\"inputLableautyNoLabeledCheckbox\" data-plugin=\"labelauty\" data-label=\"false\" id=\"labelauty-" + id + "\" value=\"" + entry + "\"> " + entry + "</div>" +
"<div class='accordion-body js-accordion-body'>" +
"<div class='accordion-body__contents'>" +
"data-table" +
"</div>" +
"</div>" +
"</div>" +
"<div class='accordion__item js-accordion-item active'>" +
"</div>")
});
//accordion js for appended div
var accordion = (function() {
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if (settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if (settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function() {
accordion.init({
speed: 300,
oneOpen: true
});
$(":checkbox").labelauty({
label: false
});
});
}
//Load the selected testcases on TestPlan
function loadplan() {
currentTestSuite;
//Map the selected testcases to an array
var selectedtclist = [];
$('input[class="to-labelauty-icon labelauty"]:checked').each(function() {
selectedtclist.push(this.value);
});
for (var i = 0; i < selectedtclist.length; i++) {
var tc_name = selectedtclist[i];
var searchWord = currentTestSuite + " " + "|" + " " + tc_name;
// see if element(s) exists that matches by checking length
var exists = $('#testplan li:contains(' + searchWord + ')').length;
if (!exists) {
//Append selected testcases to TestPlan
$("#testplan").append("<li class='list-group-item list-group-item-info'>" + currentTestSuite + " " + "|" + " " + tc_name + "</li>");
}
};
};
which output this
after loading jquery appended content
How can I load the styles for toggle button properly?

You use append() for the selector $("#testplan"), but I cannot find that ID id="testplan" for any element in your HTML code, so therefore JS can't find it and thus cannot "appand" anything to it.

How to make a dropdown show values from top instead of where I left it?

On my web form application, I have shown a dashboard with six boxes each with a separate dropdown showing values from a database table. This is for my user's ease of accessibility as they will choose approximately six menu items which they visit most frequently. The dropdown is working fine and show the selected menu items appropriately.
However, the problem is that none of the dropdown show values afresh as it must be. Because once a value is selected from it or just the mouse is scrolled down on it without making any selection, it remember that position. Now when that first dropdwon is revisited again either after selecting a value from another dropdown or just scrolling down the mouse on that another dropdown, the position of the first dropdown remain exactly where it was left before.
I want each and every dropdown to show values from its top and not where user left it before. The code is available here.
//
//
//Menu items are taken from database
if (obj.data.length > 0) {
var lielm = '';
var AccountantHeader = false;
var ReportHeader = false;
var OtherHeader = false;
var accountantItems = [];
var reportsItems = [];
var otherItems = [];
$.each(obj.data, function (i, m) {
if (m.Menu_Item_Name == 'Report Financial' || m.Menu_Item_Name == 'Cover Sheet' || m.Menu_Item_Name == 'Letters' || m.Menu_Item_Name == 'Invites')
{
accountantsItems.push(m);
}
else if (m.Menu_Item_Name == 'Income Statement' || m.Menu_Item_Name == 'Balance' || m.Menu_Item_Name == 'Income' || m.Menu_Item_Name == 'Ledger')
{
reportsItems.push(m);
}
else
{
otherItems.push(m);
}
});
$.each(accountantItems, function (index, m) {
if (!AccountantHeader) {
lielm += '<li class="no-hover"><strong>Accountants</strong></li>';
AccountantHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$.each(reportsItems, function (index, m) {
if (!ReportHeader) {
lielm += '<li class="no-hover"><strong>Reports</strong></li>';
ReportHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$.each(otherItems, function (index, m) {
if (!OtherHeader) {
lielm += '<li class="no-hover"><strong>Other</strong></li>';
OtherHeader = true;
}
lielm += '<li data-value="' + m.Menu_URL + '" title="' + m.Menu_Item_Name.replace('<strong>', '').replace('</strong>', '') + '">' + m.Menu_Item_Name + '</li>';
});
$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').html(lielm);
$(edt).next('.dropdownContain').children('.dropOut').children('.widget-options').children('li').click(function () {
var pId = $(edt).parent().parent().attr('id');
var mId = $('#' + pId + ' .menu-id').val() || 0;
var mnu = { UserId: uId, Name: this.outerText, Url: $(this).data('value'), ID: mId }
//
//
// Update dashboard
Here is the HTML belong to just a single box (one out of the six sections I have made for dropdowns)
<div class="row">
<div class="box" id="box0">
<div class="drop">
<div class="edit"><span><i class="fa fa-pencil fa-lg"></i></span></div>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul class="widget-options">
</ul>
</div>
</div>
</div>
<a class="menu-href" href="javascript:">
<input type="hidden" class="menu-id" />
<span class="menu-icon fa fa-2x"> </span>
<div class="clearfx"></div>
<label class="menu-text"> </label>
</a>
</div>
Any help in this regard will highly be appreciated.

How to split an array into a multidimensional array?

So I have a JSON feed that returns a list of job titles. I would like the split the parsed data so that they are split into nodes of 3. So for example, right now I am appending all the ones into HTML that looks like:
<div class="slide">
<div class="jobs-list">
Title 1
Title 2
Title 3
Title 4
Title 5
</div>
</div>
I would like the output to look like:
<div class="slide slide1">
<div class="jobs-list">
Title 1
Title 2
Title 3
</div>
</div>
<div class="slide slide2">
<div class="jobs-list">
Title 4
Title 5
</div>
</div>
Here is my current JS
$.get('sample-json/9.json', function (data) {
var data = $.parseJSON(data);
console.log(data);
if (data.result.length === 0) {
alert("No Data. Show Error Screen.");
} else {
count = 0;
count++;
$("#careers .slides").append('<div class="slide slide' + count + '"></div>');
$('.slide' + count).append('<div class="jobs-list"></div>');
$(data.result).each(function (i, d) {
$('.slide' + count).find(".jobs-list").append(
'<a class="job cf" href="#">'+ d.type + '</a>');
});
}
});
Any pointers on how I should go about doing this?

Do you know the modulo operator? http://en.wikipedia.org/wiki/Modulo_operation
var currentBlock;
jobs.each(function(i, d){
if(i % 3 == 0){
//make a new block
currentBlock = ...
$("#careers .slides").append(currentBlock)
}
// add stuff to the current block
currentBlock.append(...)
})

If you process your JSON into this HTML structure (similar to what you already did):
<div class="slides">
Title 1
Title 2
Title 3
Title 4
Title 5
</div>
Then you can manipulate it afterwards into the structure you want, using this JS:
var count = 1;
while ($("div.slides > a.job").length) {
$("div.slides").append("<div class='slide slide" + count + "'></div>");
for (var i = 0; i < 3; i++) {
$("div.slides > a.job:first").appendTo($("div.slide" + count));
}
count++;
}
$("div.slide").wrapInner("<div class='jobs-list'></div>");
fiddle: http://jsfiddle.net/Vcjs4/

I was able to solve the problem using a modulus operator.
$.get('sample-json/9.json', function(data) {
var data = $.parseJSON(data);
if( data.result.length === 0 ) {
alert("No Data. Show Error Screen.");
} else {
count = 0;
$( data.result).each(function(i,d){
if(i % 6 == 0){
count++;
$("#careers .slides").append('<div class="slide slide' + count + '"></div>');
$('.slide' + count).append('<div class="jobs-list"></div>');
}
$(".slide" + count).find(".jobs-list").append(
'<a class="job cf" href="#" target="_blank">' + d.title + '</a>'
);
});
}
});