We Keep Coding

How to properly display the checked attributes in another div with different styles?

I am very new to jQuery. The first part of the code is to check the inputs and after checked it should display the checked items the below format. How can do this with the help of jquery.
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
After checked it should displays in this format.
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<a href="">
<span class="ic-close"></span>
</a>
</div>
</li>
</ul>
</div>
I tried like this.It was working fine for the names but got no idea how can display this user image attached with name and also there is a cancel icon too near the name.I am only being able to display name with this code.
<script>
$('input[type="checkbox"]').on('change', function () {
var name = $(this).attr('data-name');
var image = $(this).attr('data-image');
if ($(this).prop('checked')) {
$('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
$('#checked-images').append("<img src='image'")
} else {
$('#checked-names p[data-name="' + name + '"]').remove();
$('#checked-images').remove()
}
});
</script>
UPDATE
With this close button I want to remove this from checked list(which works great) as well as I want to uncheck this from checked in input.
$('body').on('click', '.ic-close', function() {
$(this).closest('li').remove()
$(this).closest('li').prop('checked',false) #didn't worked
});

This script below might be helpful for you. I only added an ID to the user-list and removed the a tag from the close button in your HTML. The JavaScript appends the HTML you wish with the name and the image to the list. If you click the close span, the item will be removed.
UPDATE:
To uncheck the checkbox by closing its user-list item, you have to add an attribute like data-name="Initiator" to the checkbox. In the JavaScript if have added two lines into the click listener of the ic-close item, see below.
$('input[type="checkbox"]').on('change', function() {
var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();
if($(this).prop('checked')) {
$('ul#user-list').append(
'<li id="' + name + '">' +
'<div class="approval--member">' +
'<img src="' + image_url + '" class="user--image" />' +
'<div class="w-100">' +
'<h6 class="approval--name">Name</h6>' +
'<p>' + name + '</p>' +
'</div>' +
'<span class="ic-close">Close</span>' +
'</div>' +
'</li>');
} else {
$('ul#user-list #' + name).remove();
}
$('body').on('click', '.ic-close', function() {
var name = $(this).closest('li').find('.approval--name ~ p' ).text();
$('input[data-name="' + name + '"]').prop( "checked", false );
$(this).closest('li').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input data-name="Initiator" name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul id="user-list" class="approval approval_scrolltab mt-3">
</ul>
</div>

Simply check if you really need jQuery, in 2020 the pure Javascript have the majority of the jQuery fonctions : http://youmightnotneedjquery.com/
You can get the checked attribute via an event like this :
var checkbox = document.querySelector('[type="checkbox"]');
// Event Listener:
checkbox.addEventListener('change', function(event) {
alert(event.target.checked);
if(event.target.checked) {
// Do want do you want when checked
}
});
I don't understand very well what you expected but I hope that it could help you.

Multiple Bootstrap tabs remaining active when generated with jQuery

I have the following divs with special attributes that I am selecting with jQuery
<div data-tab-name="Description">
<!-- content -->
</div>
<div data-tab-name="Video">
<!-- content -->
</div>
<div data-tab-name="Reviews">
<!-- content -->
</div>
I am then taking those divs and turning them into individual Bootstrap tabs (& nav-tabs) and attempting to set the first tab-pane & nav-tab to active. This is the result:
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#description">Description</a>
</li>
<li>
<a data-toggle="tab" href="#video">Video</a>
</li>
<li>
<a data-toggle="tab" href="#reviews">Reviews</a>
</li>
</ul>
<div class="row tab-content">
<div class="tab-pane fade in active" id="description">
<!-- Content -->
</div>
<div class="tab-pane fade" id="video">
<!-- Content -->
</div>
<div class="tab-pane fade" id="reviews">
<!-- Content -->
</div>
</div>
Whenever I run the code it structures it as I intended, which is what w3school's boostrap tab example shows (Dynamic Tabs), but multiple tabs are staying active when I switch between them which prevents them from being clicked twice.
What would I need to do to make it behave as it normally does when entering the html for the tabs directly? https://codepen.io/BBell/pen/RBLmEr
I'm not sure why stacksnippet is showing a script error, but it continues to show even if I remove the JS (http://recordit.co/8mazS35U9r). Here is a backup codepen that worked better for me:
https://codepen.io/BBell/pen/VBzJXz
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' +
encodedName +
'">' +
name +
"</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$(".nav-tabs a:first").tab("show");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>

The main issue is that when you do it dynamically like you do the li elements all get class of active but it should be only one active. Look # the example your provided as a working one inspect element on the tabs ... you will see that once you select a an tab/li it would get the active class and the previous one would loose it. In your example that class gets set to all so you can't again click on them.
Here is a working version with basically going around bootstrap js:
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' + encodedName + '">' + name + "</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$('a[data-toggle="tab"]').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass("active");
$('li').not(this.parentNode).removeClass('active')
$('.iseo-item-page div').removeClass('active in')
$(this.hash).addClass('active in')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>

JQuery create chat tab by clicking on contact from contact list

I'd love if you could help me out w/ this issue I'm having. I'm trying to create a list of contacts, like the following, and then be able to open a chat tab for that contact. Somehow,it seems like the JQuery isn´t working, I'd appreciate if you could give me a hand.
1st piece (HTML contact)
<div id="contact-list">
<div class="contact-line">
<button class="contact-name">111111111</button>
<div class="status"><div class="online"></div></div>
<div class="user-photo"></div>
<div class="unread-wrap"><div class="unread">2</div></div>
</div>
.....
</div>
<ul id="ConversationsHeaderList">
</ul>
2nd Piece (JQuery)
<script type="text/javascript">
$('.contact-name').click( function() {
var $chatHeaderContent1 = $(this).parent().html();
var $chatHeaderContent2 = $chatHeaderContent1 + '<button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>';
$('#ConversationsHeaderList').append($chatHeaderContent2);
});
</script>
Somehow, I can´t make it create something like this:
<ul id="ConversationsHeaderList">
<li class="ConversationsHeader">
<button class="contact-name">Friend 1</button>
<div class="status"><div class="online"></div></div>
<div class="user-photo"></div>
<div class="unread-wrap"><div class="unread">1</div></div>
<button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>
</li>
</ul>

Try this, you just have to wrap the content in li element
<script type="text/javascript">
$('.contact-name').click( function() {
var $chatHeaderContent1 = $(this).parent().html();
var $chatHeaderContent2 = '<li class="ConversationsHeader">' + $chatHeaderContent1 + '<button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>' + '</li>';
$('#ConversationsHeaderList').append($chatHeaderContent2);
});
</script>

Weather app with multiple locations in JavaScript / jQuery

I'm new here and I'm a beginner in programming.
I need help with my weather app. I'm using metaweather api for displaying weather, but i need to display weather for multiple location.
This is how i display weather for only one city, but i dont know how to pass more cities?!
Please help!
Here it's code (HTML)
<main>
<section>
<div class="container">
<div id="main_panel">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="app">
<img class="img-responsive img-rounded" src="images/warszawa.jpg" alt="Warszawa">
<span id="warsaw">
<span class="location">
Unknown
<i class="fa fa-map-marker"></i>
<span class="today">Today</span>
</span>
</span>
<span class="weather">
<span class="temperature">
0<sup>°</sup>
<span class="unit">c</span>
</span>
<span class="weather-icon"></span>
<h3 class="weather-state"></h3>
</span>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="app">
<img class="img-responsive img-rounded" src="images/berlin.jpg" alt="Berlin">
<span id="berlin">
<span class="location">
Unknown
<i class="fa fa-map-marker"></i>
<span class="today">Today</span>
</span>
</span>
<span class="weather">
<span class="temperature">
0<sup>°</sup>
<span class="unit">c</span>
</span>
<h3 class="weather-state"></h3>
<span class="weather-icon"></span>
</span>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="app">
<img class="img-responsive img-rounded" src="images/lizbona.jpg" alt="Lizbona">
<span id="location">
Unknown
<i class="fa fa-map-marker"></i>
<span class="today">Today</span>
</span>
<span class="weather">
<span id="temperature">
0<sup>°</sup>
<span class="unit">c</span>
</span>
<h3 class="weather-state"></h3>
<span class="weather-icon"></span>
</span>
</div>
</div>
</div>
</div>
</section>
</main>
And here it is JavaScript
var temperature = [];
var cityName = 'warsaw';
var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/";
var weatherAPIUrl = weatherSiteUrl + "api/";
var cityLocation = weatherAPIUrl + "location/search/?query=";
var iconUrl = "https://www.metaweather.com/";
function drawWeather() {
$.getJSON(cityLocation + cityName, function(data) {
$.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) {
$('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location
$('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state
temperature[0] = Math.floor(data.consolidated_weather[0].the_temp);
$('.temperature').html(temperature[0] + '<sup>°</sup><span class="unit">c</span>'); // Temperature
var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg';
$('.weather-icon').html('<img src=' + weatherImg + '>');
});
});
};
drawWeather();

Instead of hardcoding 'warsaw' pass the location to the function
var temperature = [];
var weatherSiteUrl = "http://cors-anywhere.herokuapp.com/https://www.metaweather.com/";
var weatherAPIUrl = weatherSiteUrl + "api/";
var cityLocation = weatherAPIUrl + "location/search/?query=";
var iconUrl = "https://www.metaweather.com/";
function drawWeather(cityName) {
$.getJSON(cityLocation + cityName, function(data) {
$.getJSON(weatherAPIUrl + 'location/' + data[0].woeid, function(data) {
$('.location').html(cityName + '<i class="fa fa-map-marker"></i>'); // Name of location
$('.weather-state').html(data.consolidated_weather[0].weather_state_name); //Weather state
temperature[0] = Math.floor(data.consolidated_weather[0].the_temp);
$('.temperature').html(temperature[0] + '<sup>°</sup><span class="unit">c</span>'); // Temperature
var weatherImg = iconUrl + 'static/img/weather/' + data.consolidated_weather[0].weather_state_abbr + '.svg';
$('.weather-icon').html('<img src=' + weatherImg + '>');
});
});
};
Then instead of drawWeather(); run the function using drawWeather('warsaw');, drawWeather('berlin');,...

jQuery: How to get parent element properties of dyanmically created elements

I am dynamically creating a list and inputting the list into multiple section elements, however, I want a "data-" property on the li elements to have the parent section's h3 title. HTML structure is below and my JS I have so far is below as well. If you see in the JS below I am trying to make a variable of 'productTitle'. This is where I am trying to get the current List's parent's section h3.
HTML
<div id="GuestMemberTicketsContainer">
<span class="zInput"><input title="1" data-productattendee="Senior" /></span>
<span class="zInput"><input title="2" data-productattendee="Senior"/></span>
<span class="zInput"><input title="3" data-productattendee="Senior"/></span>
<span class="zInput"><input title="4" data-productattendee="Senior" /></span>
<span class="zInput"><input title="1" data-productattendee="Adult" /></span>
<span class="zInput"><input title="2" data-productattendee="Adult"/></span>
<span class="zInput"><input title="3" data-productattendee="Adult"/></span>
<span class="zInput"><input title="4" data-productattendee="Adult" /></span>
</div>
<section id="sectionOne">
<h3>Section One Header</h3>
<div id="attendeePickerOne" class="picker">
<!--Dynamic UL get's generated here-->
</div>
</section>
<section id="sectionTwo">
<h3>Section Two Header</h3>
<div id="attendeePickerTwo" class="picker">
<!--Dynamic UL get's generated here-->
</div>
</section>
JS
$(document).ready(function () {
/*==============Testing dynamically adding items to list============*/
$("#GuestMemberTicketsContainer .zInput").click(function() {
var attendeeListMember = $(".picker");
var list = '<ul class="attendeeList" style="display:table">';
var itemValue = $(this).find("input").attr("title");
var attendeeTitle = $(this).find("input").data("productattendee");
//productTitle is needs to get the list's immediate section H3.
var productTitle = $(attendeeListMember).parents("section").find("h3").text();
for (var i = 0; i < itemValue; i++) {
$(this).find("input").attr("title") + i + '</li>';
var li = '<li class="zInput zCheckbox" title="' + attendeeTitle + ' "data-productname="' + productTitle + '"><span class="museumTitle" style="display: table-cell;vertical-align:middle;">' + attendeeTitle + " " + (i + 1) +
'<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>' +
'<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>' +
'</li>';
list += li;
}
list += '</div>';
$(attendeeListMember).append(list);
//console.log($(finalList).parents("section").find(".titleBar").text());
// $(list).zInput();
});
});
Desired HTML output
<section id="sectionOne">
<h3>Section One Header</h3>
<div id="attendeePickerOne" class="picker">
<ul>
<li class="zInput zCheckbox" title="Adult1" data-productname="Section One Header">
<span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
</li>
<li class="zInput zCheckbox" title="Adult2" data-productname="Section One Header">
<span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
</li>
</ul>
</div>
</section>
<section id="sectionTwo">
<h3>Section Two Header</h3>
<div id="attendeePickerTwo" class="picker">
<ul>
<li class="zInput zCheckbox" title="Adult1" data-productname="Section Two Header">
<span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 1</span>
<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
</li>
<li class="zInput zCheckbox" title="Adult2" data-productname="Section Two Header">
<span class="museumTitle" style="display: table-cell;vertical-align:middle;">Adult 2</span>
<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>
<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>
</li>
</ul>
</div>
</section>

You can get the parent node of the "li" element with element.parentNode
Then you can get the text of any node with element.textContent
If you need to select the H3 element, you can use the getElementbyTag as well.

Here's what I came up with: jsBin
Approach was to change the event handler to .change(), on the input itself, and the IDs of the sections matched the data attribute value.
Not sure if this is exactly what you needed as question was a little unclear.
$("#GuestMemberTicketsContainer .zInput input").change(function() {
var list = '<ul class="attendeeList" style="display:table">';
var itemValue = $(this).attr("title");
var attendeeTitle = $(this).data("productattendee");
//productTitle is needs to get the list's immediate section H3.
var productTitle = $("#"+attendeeTitle).find('h3').text();
for (var i = 0; i < itemValue; i++) {
$(this).attr("title") + i + '</li>';
var li = '<li class="zInput zCheckbox" title="' + attendeeTitle + ' "data-productname="' + productTitle + '"><span class="museumTitle" style="display: table-cell;vertical-align:middle;">' + attendeeTitle + " " + (i + 1) +
'<span class="museumPrice" style="display:table-cell;vertical-align:middle;">7.00</span>' +
'<span class="museumSubTitle" style="display:table-cell;vertical-align:middle;">Add Ticket</span>' +
'</li>';
list += li;
}
console.log(attendeeTitle, productTitle)
list += '</div>';
$("#"+attendeeTitle).find('ul').remove();
$("#"+attendeeTitle).append(list);
});