Change class after changing list - javascript

I have a dual list in which data is printing a ul li pattern from a JSON file. You can move any li to any side list. I am stuck at a point.
I want to enable a property that the <p> tag content only in <li> in right-list gets display: block and not the left-list side <li>. I have tried different JS code but they didn't work for me .
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p style="display: none" class="show">
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>


Add CSS and remove inline style display none from p tag in JS.
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p>
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
/********************************/
/********************************/
/********************************/
/* ADD THIS */
.dual-list.list-left .well li.list-group-item p {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-6">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="dual-list list-right col-6">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group" id="La">
<li class="list-group-item" id="rl">point_in_first_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_first_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">point_in_second_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_second_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">trapezium_draw_slope_area_equ
<p>
Simple collapsible
</p>
<div id="demo_trapezium_draw_slope_area_equ" class="collapse">
20, strong, true, true
</div>
<p></p>
</li>
</ul>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>

Related

Change List Toggle in in jquery

I have this code in which I have two lists. This helps to make the list items go right or left by clicking the arrow button. I want to make a change in it so that to toggle an active class on click of ul > body to only one item in the list at a time. When the item goes to the right lis its active class gets removed. Currently you can can select multiple item in list.
I have worked on various changes in this JS and jQuery but failed to get the desired result.
$(function() {
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.list-arrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('.dual-list .selector').click(function() {
var $checkBox = $(this);
if (!$checkBox.hasClass('selected')) {
$checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
$checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
} else {
$checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
$checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
.dual-list .list-group {
margin-top: 8px;
}
.list-left li,
.list-right li {
cursor: pointer;
}
.list-arrows {
padding-top: 100px;
}
.list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">bootstrap-duallist github</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>

You need to removeClass of siblings too. Reference
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
$(function() {
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
$('.list-arrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('.dual-list .selector').click(function() {
var $checkBox = $(this);
if (!$checkBox.hasClass('selected')) {
$checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
$checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
} else {
$checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
$checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
.dual-list .list-group {
margin-top: 8px;
}
.list-left li,
.list-right li {
cursor: pointer;
}
.list-arrows {
padding-top: 100px;
}
.list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<br />
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">bootstrap-duallist github</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>

how to add and remove attributes click event in jquery?

function myFunction(e) {
var currentTab = $(e).data("target");
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
This inputs open in first click, second click closes.
I want to delete when I close the added attributes when I open. can you help me please ?

function myFunction(e) {
var currentTab = $(e).data("target");
var filters = ['filterMode', 'filterBegin','filterEnd'];
if($(currentTab).is(':visible')){
$(currentTab).children('input').removeAttr('value');
$(currentTab).find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).hide('slow');
}else{
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).find('input').map(function(index,input){
$(input).attr("name", filters[index]);
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).show('slow').siblings().hide('slow');
}
}
solution of my question, that's it. Thank's a lot

function myFunction(e) {
var currentTab = $(e).data("target");
// check element visible
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}
//end element visiblity check
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
console.log("hidden");
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
Just use your known id to check the visibility as follows.
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}

How to prevent input fields from duplication?

When uploading any file, it's appearing all input fields as the same value even appearing the clear and change button. Also if click the clear button, it's cleared all fields.
How it works each field uniquely?
Demo: https://jsfiddle.net/sanjida96xq2/5gLqthrj/12/
View Snapshot
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

I've fixed your JS fiddle example here -
https://jsfiddle.net/5gLqthrj/27/
So what had to be updated?
All your code showing the popover, updating the file, etc, used generic $('.image-preview') jQuery selector code. However, all 3 file uploaders used that class, so whenever you used that code, all THREE would get selected and updated. You need to be more specific and only select the one clicked, of course.
So how to do that?
There are different ways but here's a simple solution:
When an event (like click, or hover, both of which you are using) is bound in jQuery, you can reference $(this) (or $(event.currentTarget)) to figure out exactly WHICH element was clicked. Then, instead of updating all elements with that class, you only update this. You also have a few other selectors that needed updating with a similar not-specific-enough selector problem, so instead of doing a wholesale $('.selector-here') grab, I changed the code to only search for that selector WITHIN the relevant element using .find, e.g. $(this).find('.selector-here')
Hopefully this makes sense to you :)
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$(this).popover('show');
},
function () {
$(this).popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
var $preview = $(this).closest('.image-preview');
$preview.attr("data-content","").popover('hide');
$preview.find('.image-preview-filename').val("");
$preview.find('.image-preview-clear').hide();
$preview.find('.image-preview-input input:file').val("");
$preview.find(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
var $preview = $(this).closest('.image-preview');
reader.onload = function (e) {
$preview.find(".image-preview-input-title").text("Change");
$preview.find(".image-preview-clear").show();
$preview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$preview.attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

Jquery Append :checked Selector

what I need to do is when I click in test1 checkbox show the div in show-content the div id item 1 :
<div class="show-content">
<div id="item1">
test1
</div>
when I click in test2 checkbox show the div in show-content the div id item 2 :
<div class="show-content">
<div id="item2">
test2
</div>
jsfiddle: http://jsfiddle.net/P3zMu/271/
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>

First of all, you have multiple elements with the same id, and Id show never exists more than once. use class if needed.
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
I've added the code above. Hope this is what your looking for.
Demo
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

Your duplicating ID's, not ideal. But will still work in this case.
Below I'm initially setting the display:none on your sections.
And then just use toggle class on them, and finding the same id inside the show-content div.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
var id = $(this).closest('[id]').attr('id');
$('.show-content #' + id).toggle($(this).is(':checked'));
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1" style="display:none">
test1
</div>
<div id="item2" style="display:none">
test2
</div>
</div>

Instead of multiple same id's you can use custom data attribute and then toggle those elements based on checkbox.
$('.show-content > div').hide();
$(".bill-type input[type='checkbox']").change(function() {
var id = $(this).parent('li').attr('id');
$('.show-content > div[data-target="' + id + '"]').toggle($(this).is(':checked'))
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div data-target="item1">test1</div>
<div data-target="item2">test2</div>
</div>

Try this
multiple same ids, not good one .so change with class name
HIDE all the show-content children before showing particular item
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).closest('li');
$('.show-content').find('div').hide();
if ($(this).is(':checked')) {
$('.show-content').find('div[class="'+$li.attr('id')+'"]').show()
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
.test1 {
border: 1px solid red;
}
.show-content div{
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

One simple solution using data attributes and CSS:
$('[data-checked-toggle]').each(function(i) {
var thisCheckbox = $(this);
var thisTarget = $( thisCheckbox.data('checkedToggle') );
thisCheckbox.on('change', function(e) {
thisTarget.toggleClass('is-visible', thisCheckbox.is(':checked'));
}).trigger('change');
});
.show-content > div {
display: none;
}
.show-content > div.is-visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label for="checkbox1">
<input id="checkbox1" type="checkbox" data-checked-toggle="#item1" /> test1
</label>
</p>
<p>
<label for="checkbox2">
<input id="checkbox2" type="checkbox" data-checked-toggle="#item2" /> test2
</label>
</p>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
Also on JSFiddle.
This way you have great control:
inside HTML you define which element is controlled by checkbox, anywhere on page
inside CSS you decide how to present the element, it does not have to be invisible - is easy when you add/remove class

Here is a sample code. i just added two id on checkbox.
<html>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" id="checkbox1" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" id="checkbox2" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
<script>
$(document).ready(function () {
$('#checkbox1').on('change', function () {
var checkbox1 = $('#checkbox1').is(':checked')
if (checkbox1) {
$(".show-content > #item1").hide();
} else {
$(".show-content > #item1").show();
}
});
$('#checkbox2').on('change', function () {
var checkbox2 = $('#checkbox2').is(':checked')
if (checkbox2) {
$(".show-content > #item2").hide();
} else {
$(".show-content > #item2").show();
}
});
})
</script>

dropdown value is not selected (jquery function is not firing)

I somehow can't seem to figure this one out.
I have set of radio buttons and on click of each, I am populating a dropdown (bootstrap dropdown) with different data. On click of dropdown, i select the text at top. The code works just fine till i don't select a different radio button. Once i click on the radio button and re-populate the first dropdown, the click event stops firing.....any ideas will be helpful. Here's my simplified code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// The functions to be executed on loading the document
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
</script>
<script>
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = 'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = 'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
}
$("#regionDropdown li a").click(function (e) {
alert('b');
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>

Thanks for the ideas guys. As it happens, with .html() call the DOM refreshes and all events get lost. Based on your suggestions I changed to code to reattach the event handlers and it worked! Here's the code anyone who might be facing similar problems.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
bindClick();
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
function bindClick() {
//unbind all event handlers - for safety sake, usually removed by html() call
$(".dropdown-menu li a").unbind();
//bind again
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
}
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
bindClick();
}
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>

Categories

Resources