Develop Reference

Cannot Bind dynamically generated input radio on click

I am trying to make a dropdown based off of some dynamically generated radio inputs that i cannot control. I have it working in a codepen, but those radio inputs are not being dynamically generated. I feel like I am close, but may be having some syntax issues. Any suggestions?
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $select.find(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", "input[name='radio']", function (e) {
console.log($(this));
$select.removeClass("no-selection");
return $select.toggleClass("is-open");
$(this).parent().addClass("checked");
});
});
}).call(this);
SCSS:
.cart-dropdown-select {
position: relative;
display: inline-block;
padding: 6px 24px 6px 6px;
box-shadow: 0 0 0 1px #000;
border-radius: 4px;
&.no-selection {
label:first-of-type {
display: block;
height: auto;
}
.radio:first-of-type {
display: block;
}
}
.radio, .enabled{
display: none;
}
&.is-open {
input + label {
margin-top: 3px;
&:first-of-type {
margin-top: 0;
}
&::after {
content: "\A"; // hack to force linebreak
white-space: pre;
}
}
.radio, .enabled{
display: block;
}
}
&.is-open input,
&.is-open input + label,
input:checked,
input:checked + label, .checked{
display: block;
height: auto;
}
input,
input + label {
display: block;
height: 0;
overflow: hidden;
}
&::after {
position: absolute;
content: '';
display: block;
width: 12px;
height: 12px;
border: 6px solid #fff;
border-top-color: blue;
top: 11px;
right: 6px;
cursor: pointer;
font-size: 9px;
box-sizing: border-box;
}
input[type="radio"] {
display: none;
opacity: 0;
width: 0;
height: 0;
+ label {
position: relative;
color: blue;
&:hover {
color: grey;
cursor: pointer;
}
}
&:disabled {
+ label {
color: blue;
padding-left: 0;
&::before {
display: none;
}
}
}
&:checked {
+ label {
color: grey;
&::before {
background: $pop;
}
}
}
}
}
HTML (layout example):
<div class='cart-dropdown-select is-open no-selection'>
<div class="radio">
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
</div>
<div class="radio">
<input id='foo1' name='radios' type='radio' value='foo1'>
<label for='foo1'>Foo1</label>
</div>
<div class="radio">
<input id='foo2' name='radios' type='radio' value='foo2'>
<label for='foo2'>Foo2</label>
</div>
<div class="radio">
<input id='foo3' name='radios' type='radio' value='foo3'>
<label for='foo3'>Foo3</label>
</div>
</div>
Also a link to the codepen, again this content in the codepen is not being dynamically driven, so it works fine there.
https://codepen.io/ascarb1/pen/LKdKjE

I ended up changing a bit of the HTML around so the bind can happen within a class that is not being dynamically loaded. This seems to have worked. Feel free to leave feedback if there is still a better solution:
jQuery:
(function () {
return $('.cart-dropdown-select').each(function (idx, el) {
var $select, $trigger, $radio;
$select = $(el);
$trigger = $select.find('.trigger');
$radio = $(".radio");
$select.removeClass("is-open");
$select.on("click", function (e) {
return $select.toggleClass("is-open");
});
$select.on("click", ".enabled input", function() {
$select.toggleClass("no-selection");
$(this).parentsUntil($radio).toggleClass("checked");
return $select.toggleClass("is-open");
});
});
}).call(this);
HTML (Example):
<div class='cart-dropdown-select is-open no-selection'>
<input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
<label for='disabled'>Select Option</label>
<div class="radio">
<label class="enabled" for='foo1'>
<input id='foo1' name='radios' type='radio' value='foo1'>
Foo1</label>
</div>
<div class="radio">
<label class="enabled" for='foo2'>
<input id='foo2' name='radios' type='radio' value='foo2'>
Foo2</label>
</div>
<div class="radio">
<label class="enabled" for='foo3'>
<input id='foo3' name='radios' type='radio' value='foo3'>
Foo3</label>
</div>
</div>
The SCSS did not change.

JQuery addClass not working on anchor tag on click event

addClass() is not working on jQuery on click event. My code looks like this.
init: function () {
ShareData.config.pageNo = 1;
ShareData.ajaxCall();
$(document).on('click', 'ul#pagination li a', function () {
ShareData.config.pageNo = $(this).text();
ShareData.ajaxCall();
$("ul#pagination li a.clickedLink").removeClass("clickedLink");
$(this).addClass('clickedLink');
});
},
var pageLink = "";
for (var i = 1; i <= totalPage; i++) {
if (i == 1) {
pageLink += "<li><a href='#' class='clickedLink'>" + i + "</a></li>";
} else {
pageLink += "<li><a href='#' class=''>" + i + "</a></li>";
}
}
document.getElementById('pagination').innerHTML = pageLink;
.pagination ul li a.clickedLink {
background-color: #BBB;
}
.pagination ul li a{
color: #000;
height: 24px;
line-height: 24px;
width: 24px;
text-align: center;
display: inline-block;
text-decoration: none;
border: 1px solid #000;
background: #FFF;
text-shadow: none;
}
.pagination ul li {
float: left;
}
<div class="pagination">
<ul id="pagination">
</ul>
</div>
And output is like this
Everything is working fine on load while, i need to change the background of recently clicked anchor tag.

Here you go with a solution https://jsfiddle.net/dk5n4695/2/
$('a').click(function(){
$('a[class="clickedLink"]').removeClass('clickedLink');
$(this).addClass('clickedLink');
});
.clickedLink {
background-color: #BBB;
}
ul li a{
color: #000;
height: 24px;
line-height: 24px;
width: 24px;
text-align: center;
display: inline-block;
text-decoration: none;
border: 1px solid #000;
background: #FFF;
text-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

$('ul#pagination li a').on('click', function () {
$("ul#pagination li a.clickedLink").removeClass("clickedLink");
$(this).addClass('clickedLink');
});
.clickedLink{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
<ul id="pagination">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

Try below and see if it works.
init: function () {
ShareData.config.pageNo = 1;
ShareData.ajaxCall();
$(document).on('click', 'ul.pagination li a', function () {
ShareData.config.pageNo = $(this).text();
ShareData.ajaxCall();
$("ul.pagination li a.clickedLink").removeClass("clickedLink");
$(this).addClass('clickedLink');
});
},

Multiselect dropdown in Asp.Net

I have a requirement to design the dropdown with multiselect option with checkbox using ASP.NET controls and also i need to select checkboxes while binding the values on the dropdown. Please help

you can use following open source library to get your goal its simple and really amazing
http://wenzhixin.net.cn/p/multiple-select/

Please check this, I developed this similar dropdown for my project.
//Multiple Dropdown Select
$('.multiDrop').on('click', function (e) {
e.stopPropagation();
$(this).next('ul').slideToggle();
});
$(document).on('click', function (){
if (!$(event.target).closest('.wrapMulDrop').length) {
$('.wrapMulDrop ul').slideUp();
}
});
$('.wrapMulDrop ul li input[type="checkbox"]').on('change', function () {
var x = $('.wrapMulDrop ul li input[type="checkbox"]:checked').length;
if (x != "") {
$('.multiDrop').html(x + " " + "selected");
} else if (x < 1) {
$('.multiDrop').html('Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>');
}
});
.wrapMulDrop {
width: 50%;
display: inline-block;
position: relative;
}
.multiDrop {
width: 100%;
padding: 5%;
background-color: transparent;
border: 1px solid #ccc;
color: #999;
text-align: left;
}
.multiDrop:focus {
outline: none;
}
.wrapMulDrop ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
z-index: 5;
display: none;
}
.wrapMulDrop ul li {
list-style-type: none;
background-color: #e5801d;
padding: 1% 6%;
}
.wrapMulDrop ul li:hover {
background-color: #33414e;
}
.wrapMulDrop ul li label {
width: 100% !important;
cursor: pointer;
margin: 0 !important;
color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapMulDrop">
<button type="button" class="multiDrop">Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>
</button>
<ul>
<li>
<input type="checkbox" id="list1">
<label for="list1">Template 1</label>
</li>
<li>
<input type="checkbox" id="list2">
<label for="list2">Template 2</label>
</li>
<li>
<input type="checkbox" id="list3">
<label for="list3">Template 3</label>
</li>
<li>
<input type="checkbox" id="list4">
<label for="list4">Template 4</label>
</li>
</ul>
</div>

Cannot change DIV text when a UL LI is clicked on

I would like to attempt to add functionality to my UL LI list, such that when an LI item is clicked on, the div's text will change to the selected value of the LI click, however, nothing seems to happen.
Here is the markup and code in question:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
}
</script>
</head>
<body>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>

Since the target div is at the parent level of the clicked li, you can use .closest() to target the required div element.
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('div.select').text($(this).html());
});
Example : http://jsfiddle.net/DinoMyte/bvtngh57/150/

Try like this
$(".select ul li").on("click", function() {
$(this).closest("div").contents().first().replaceWith($(this).text());
})
DEMO

$(".select ul li").click(function(e) {
$(this).parents('.select').html($(this).html())
});
Please try this instead of
$(".select ul li").click(function(e) {
$(this).find('.select').val($(this).html())
});
This might help you

Use closest() function to get the parent .select, then use filter() function and condition this.nodeType == 3 to select only the text, inside the div. Replace it with value, using following.
$(".select").click(function() {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
$(this).closest('.select').contents().filter(function(){
return this.nodeType == 3;
})[0].textContent = $(this).html()
});
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170, 170, 170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br>
<br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br>
<br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>

Change
$(this).find('.select').val($(this).html());
to
$(this).parent().parent().html($(this).html());
window.onload = function() {
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
// Remove this code
//$(this).find('.select').val($(this).html());
// Add this line
$(this).parent().parent().html($(this).html());
});
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select" id="numbers">Select Box1
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">Select Box2
<ul>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">Select Box3
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>

You should use extra class hide so you can control the flow of hide/show and try to give your default text a class for example default so you can target it and update it without touching the html of the select with following code :
$(this).parents('.select').find('.default').text( $(this).text() );
Hope this helps.
Snippet
$(function(){
$("body").on('click', '.select',function (e) {
$(this).find('ul li').toggleClass('hide');
});
$("body").on('click', '.select ul li', function(e) {
$(this).parents('.select').find('.default').text( $(this).text() );
});
})
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background:url(arrow.png) no-repeat scroll right top;
border:1px solid rgb(170,170,170);
width:180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
padding: 1px;
}
.select ul li.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="numbers">
<span class='default'>Select Box1</span>
<ul>
<li class="hide">1234</li>
<li class="hide">5678</li>
<li class="hide">0123</li>
</ul>
</div>
<br><br>
<div class="select" id="letters">
<span class='default'>Select Box2</span>
<ul>
<li class="hide">abcd</li>
<li class="hide">efgh</li>
<li class="hide">ijkl</li>
</ul>
</div>
<br><br>
<div class="select" id="fruits">
<span class='default'>Select Box3</span>
<ul>
<li class="hide">apples</li>
<li class="hide">bananas</li>
<li class="hide">oranges</li>
</ul>
</div>

Use javascript variable in html and css

<form action="/key" method="POST">
<label>key_1:</label><br/>
<input type="text" name="a" pattern="^[a-zA-Z]+$" required/><br />
<label>key_2: </label><br />
<input type="text" name="b" pattern="^[a-zA-Z]+$" required/><br />
<input type="submit" name="submit" value="REQUEST" />
</form>
var socket = io.connect();
jQuery(function($) {
var aCounter = $('li.a'),
bCounter = $('li.b'),
aCounterPercentage = $('li.a span'),
bCounterPercentage = $('li.b span'),
aList = $('#a ul'),
bList = $('#b ul');
socket.on('percentages', function(data) {
aCounter
.css("width", data.a + '%');
aCounterPercentage
.text(Math.round(data.a * 10) / 10 + '%');
bCounter
.css("width", data.b + '%');
bCounterPercentage
.text(Math.round(data.b * 10) / 10 + '%');
});
socket.on('a', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
aList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
socket.on('b', function(data) {
$('<img />')
.attr('src', data.avatar)
.load(function() {
bList
.prepend($('<li>')
.prepend($('<p>').text(data.user + ': ' + data.text))
.prepend($(this)));
});
});
});
body {
font: 100% Helvetica, Arial, sans-serif
}
ul.percentage {
width: 100%;
float: left
}
ul.percentage li {
display: block;
width: 0;
padding: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
float: left;
clear: left
}
ul.percentage li.a {
background: #ff0066;
color: #fff
}
ul.percentage li.b {
background: #000;
color: #fff
}
ul.percentage li span {
float: right;
display: block
}
ul.tweets {
float: left;
clear: both
}
#stream {
float: left;
clear: both;
width: 100%
}
#stream ul {
list-style: none
}
#stream ul li {
float: left;
clear: left;
width: 100%;
border-bottom: 1px solid #ccc;
: 5px;
padding: 5px 0
}
#stream ul li:nth-child(even) {
background: #f8f5f6;
}
#stream ul li img {
float: left;
margin-right: 10px;
padding: 5px
}
#a {
width: 45%;
float: left
}
#b {
width: 45%;
float: right
}
<h1>GRAPH BASED ON THE KEYWORD</h1>
<ul class="percentage">
<li class="a">
a
<span>0</span>
</li>
<li class="b">
b
<span>0</span>
</li>
</ul>
<section id="stream">
<section id="a">
<h2>tweets of A</h2>
<ul></ul>
</section>
<section id="b">
<h2>tweets of B</h2>
<ul></ul>
</section>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
this is my code i am going to fetch the a and b value and will be assigned what i will give in my from.html input box can anybody help me how i have to do it. that variable should display in my ul and li class .

If you have some inputs let's say
<input type="text" id="inputA" name="inputA">
<input type="text" id="inputB" name="inputB">
and then you want to introduce the values in the list, I would recommend use some ids and classes.
<ul id="ab_list" class="percentage">
<li id="li_a">
<span class="val">a</span>
<span class="per">0</span>
</li>
<li id="li_b">
<span class="val">b</span>
<span class="per">0</span>
</li>
</ul>
So you can then easily use jQuery to do
<script>
var data_a = $("#inputA").val();
var data_b = $("#inputB").val();
$("#ab_list #li_a .val").html(data_a);
$("#ab_list #li_b .val").html(data_b);
<script>
Here you have an initial jsfiddle from where you can continue with your research/work http://jsfiddle.net/pfkx2nm7/. Of course you would need some kind of event (button click, key enter, form submit...etc) to submit your changes in the input box.
I hope it helps :)