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

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);
});

Related

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.

How to open a chat tab by clicking on contact?

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 JS 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">
<div class="status"><div class="online"></div></div>
<div class="user-photo"></div>
<div class="unread-wrap"><div class="unread">2</div></div>
<div class="contact-name">111111111</div>
<button onclick="createConversation(0)">Open Chat Tab</button>
</div>
...
</div>
<ul id="ConversationsHeaderList">
</ul>
<script type="text/javascript" src="---.js"></script>
2nd Piece (JS)
var friendsList = document.getElementById("contact-list").getElementsByClass("contact-line").innerHTML;
var conversations = [];
function createConversation(contactindex) {
var auxvar = '<button><div class="ConversationHeader">' + friendsList[contactindex].getElementsByClass("contact-name").innerHTML + '</div></button>' + '<div class="status">' + friendsList[contactindex].getElementsByClass("status").innerHTML +'</div>' + '<div class="unread-wrap">' + friendsList[contactindex].getElementsByClass("unread-wrap").innerHTML + '</div>';
conversations.push('<li>' + auxvar + '<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>' + '</li>');
document.getElementById("ConversationsHeaderList").innerHTML = conversations;
}
Somehow, I can´t make it create something like this:
<ul id="ConversationsHeaderList">
<li class="ConversationsHeader">
<button><div class="ConversationHeader">111111111</div></button>
<div class="status"><div class="online"></div></div>
<div class="unread-wrap"><div class="unread">2</div></div>
<div class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></div>
</li>
</ul>

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');,...

Javascript append only one of kind type

What I should add to code bellow to:
If there is more same hrefs inside .item a show only one input with it (in my case show only one input with value img/united-airlines.jpg and one with img/american-airlines.jpg)
Place after the input how much that hrefs they are (in case bellow 2 img/united-airlines.jpg and 1 img/american-airlines.jpg)
Here is html:
<div class="wrap">
<div class="item">
<a href="img/american-airlines.jpg">
American Airlines
</a>
</div>
<div class="item">
<a href="img/united-airlines.jpg">
United Airlines
</a>
</div>
<div class="item">
<a href="img/united-airlines.jpg">
United Airlines
</a>
</div>
</div>
Here is my script:
$(".wrap").find(".item a").each(function () {
var xx = ( $(this).attr('href'));
$("body").append('<label><input type="checkbox" value="' + xx +'">' + xx + '</label>');;
});
Codepen is here: http://codepen.io/anon/pen/RRwEvd?editors=1010
Here is a fixed pen: http://codepen.io/omerts/pen/YWzgjQ?editors=1010
$(".wrap").find(".item a").each(function () {
var xx = ( $(this).attr('href'));
if (!$('input[value="'+ xx +'"]').length) {
$("body").append('<label><input type="checkbox" value="' + xx +'">' + xx + ' (<span>1</span>) </ label>');
} else {
var currentCount = $('input[value="'+ xx +'"]').next('span')
var newCount = parseInt(currentCount.text()) + 1
currentCount.text(newCount)
}
});

How to hide an element based on another existing

I have a jQuery code that looks for a specific div element.
If the element exist I define a variable and use parseFloat() function. Since there are going to be more than one element with the same class I've created an array.
So far I've managed to hide the element called: div.ifc-balance-div; however I am not quite sure how I can hide the div.ribbon-yellow, in case the element does not have the variable savePrice.
(function($) {
"use strict";
$(document).ready(function() {
var j = 0,
savePrices = jQuery('.special-price .price .price').map(function() {
return parseFloat(jQuery(this).text().replace(/[^0-9\.]+/g, ""), 10);
}).get();
if(j < savePrices.length){
++j;
}
for (var i = 0; i < savePrices.length; ++i) {
if (Number(savePrices[i]) > 0) {
var ifcBalance = Number(savePrices[i]) / 1,
m = parseFloat(ifcBalance).toFixed(0);
$('div.ifc-balance-div' + (i + 1)).html('<p class="dynamic-badge-txt"><b>£' + m + ' OFF</b></p>');
$('div.ribbon-yellow').html('<div class="badge-ends-message">ENDS TUESDAY</div>');
}
else {
$('div.ifc-balance-div' + (i + 1)).hide();
}
}
});
})(jQuery);
Here is a sample of the HTML Code:
one having Save Price:
Text
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-15510">
<span class="price"><span class="currency">£</span>599</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-15510">
<span class="price"><span class="currency">£</span>300</span> </span>
</p>
</div>
From
£299
One without save price:
<div class="ribbon-yellow"></div>
<div>
</div></div></div>
<a href="#" title="#">
<img src="#" alt="#">
</a>
</div>
<div class="item__detail">
<a href="#" title="#" class="item__link">
<p class="product-name item__name">Text</p>
</a>
<div class="price-range">
<span class="price-label">From </span>
<span class="price"><span class="price"><span class="currency">£</span>299</span></span>
</div>
</div>
</div>

Categories