We Keep Coding

Cloned bootstrap-selectpicker selections off by 1

When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.
For example:
If I click "New Castle" in the original dropdown, then "New Castle" is selected
If I click "New Castle" in the cloned dropdown, then "Kent" is selected
The error I get is:
bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined
Why might this be happening?
A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/
Below is my code:
var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
addselectpicker(count);
count++;
});
function addselectpicker(juriscount) {
juriscount = parseInt(juriscount)
var picker = $('#jurisdictionpicker');
var clone = picker.clone();
var pickercount = juriscount + 1;
clone.attr("id",'jurisdiction' + juriscount);
clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
clone.find("[data-id='jurisdiction_']").hide();
clone.appendTo(".juris_name");
clone.find('.selectpicker').selectpicker();
clone.find(":input").attr("placeholder", "Enter a State, County");
}
HTML
<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>

Your main problem is when trying to do var clone = picker.clone();, that code is not actually cloning your original HTML markup for your select element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">, when you use the class selectpicker the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone() the bootstrap select element and then calling selectpicker() on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>

Hide div if does not have HTML attribute

I have the following code, its supposed to reorder my divs within #list. And it does that just fine. Now what I want to add is: if a div does not have the attribute "data-l-disc" don't add it/hide it.
<select id="selectid">
<option id="valid1" value="def">Default order</option>
<option id="valid2" value="hl">h-l</option>
</select>
<div id="list">
---------the follow div is used about 50*-------------
<div class="dbl" data-l-disc="1">
---------blabla (like 10 other divs are in here)----------
</div>
</div>
jQuery(document).ready(function( $ ) {
$('select').on('change', function() {
if(document.getElementById('selectid').value == "hl") {
var dList = $(".dbl");
dList.sort(function(a, b){ return $(b).data("l-disc")-$(a).data("l-disc")});
$("#list").html(dList);
}
})
});

you can hide it by using
$(".dbl").not("[data-l-disc]").hide()

Remove div from html with javascript

This is my code. It is in a php file. It doesn't quite do what I want. It hides one option and displays the other, but what I need to do is not just the option to be hidden visually, but not to display at all in the html. Now if you click view source it shows all the divs. I need it when I click one option, the others to disappear from the html and view page source, just the selected to be in there. Any ideas on that?
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="have" style="display:block;">1</div>
<div id="look" style="display:none;">2</div>
<div id="code" style="display:none;">3</div>
<script>
function showstuff(element){
document.getElementById("have").style.display = element=="have"?"block":"none";
document.getElementById("look").style.display = element=="look"?"block":"none";
document.getElementById("code").style.display = element=="code"?"block":"none";
}
</script>

You can create a div to put the active option on it.
Something like this
<select name="type" onchange="showstuff(this.value);">
<option value="code">Code</option>
<option value="look">Look</option>
<option value="have" selected>Have</option>
</select>
<div id="optionContainer">
</div>
<script>
//Object with the options. you can access for example have with options['have'] or options.have
var options = {'have':'<div id="have"><b>1</b></div>',
'look':'<div id="have"><b>2</b></div>',
'code':'<div id="have"><b>3</b></div>'};
function showstuff(element){
//Replace the inner HTML of the div optionContainer with the string in the option
document.getElementById("optionContainer").innerHTML = options[element];
}
</script>
I created this jsfiddle to see it in action

Using jquery methods- show(), hide() and remove(). One can use $("#id").remove() to remove the html from the rendered page.
https://api.jquery.com/remove/

addClass to div on change of dropdown selection

I have the following dropdown:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
Below this I have the following divs:
<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>
These are set to display:none using css
I'm trying to make it so when I select the name from the dropdown, the class "visible" is added to the corresponding div - and then removed again if the selection is changed again.
Here is what I have tried so far, but with no luck:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val()).addClass('visible');
});
});

Here is how I would do this:
html:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="nothing">Select One</option>
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="Toni">toni</div>
<div class="singer_profile_overview" id="Jack">jack</div>
<div class="singer_profile_overview" id="James">james</div>
jquery:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
var $this = $(this);
$('.singer_profile_overview').removeClass('visible');
$('#' + $this.val()).addClass('visible');
});
});
Couple of notes:
It is a good practice to store $(this) in a local variable, I usually call it $this.
You had an upper case / lower case problem in your original code. The id of the class to update needs to match the id you call in your selector
Remove the visible class from every <div> prior to applying one.
And there is still one problem, if you click your dropdown and select the first option, the event will not fire because nothing changed. That is why I added a 'Select One' option.
And here is a fiddle.

Try this. You also need to convert the value to lowerCase() to get the exact match.
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">toni</div>
<div class="singer_profile_overview" id="jack">jack</div>
<div class="singer_profile_overview" id="james">james</div>
<style>
.singer_profile_overview
{
display:none;
}
.visible
{
display: block
}
</style>
<script>
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('.singer_profile_overview').removeClass('visible'); // hide all divs by removing class visible
$('#' + $(this).val().toLowerCase()).addClass('visible'); // find the matching div and add class visible to it
});
});
</script>
Example : http://jsfiddle.net/RxguB/204/

It is because the value of the dropdown are capitalized, while your ids are lowercase. Consider the following:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val().toLowerCase()).addClass('visible');
});
});
Or alternatively, you can manually change the values to lower case, or the ids to be capitalized to match the values.

To answer the question as it was asked:
$("#about_performance_lead_singer").on("change", function(){
$(".singer_profile_overview").removeClass("visible");
$("#" + $(this).val().toLowerCase()).addClass("visible");
});
However, if you're only using the class "visible" to toggle their display, you can replace
removeClass("visible")
with
hide()
and
addClass("visible")
with
show()

Use the :selected selector to find the option that was selected. We can get its value by calling the prop method and passing in value as an attribute. Since the ids we are trying to get are lowercase, we use the toLowerCase() method.
The div we're trying to get is of the class .singer_profile_overview. We should use the filter function to get the ids. We store the result of this filter in a jQuery variable and finally add a class to it.
$("#about_performance_lead_singer").change(function () {
var selectedValue = $(":selected").prop("value").toLowerCase();
var selectedDiv = $(".singer_profile_overview").filter(function() {
return $(this).prop("id") == selectedValue;
});
selectedDiv.addClass('visible');
});
.visible {
color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">Toni</div>
<div class="singer_profile_overview" id="jack">Jack</div>
<div class="singer_profile_overview" id="james">James</div>

javascript - adding one div at a time when the add more is clicked

How can I append a div once only every time the add more is clicked?
right now it copies everything inside the div and doubles it under..
http://jsfiddle.net/gkf5T/
<script>
function addInput(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = document.getElementById(divName).innerHTML;
document.getElementById(divName).appendChild(newdiv);
}
</script>
<div id="add_more_cat">
<select name="category">
<option selected="selected" value="1">1</option>
</select>
</div>
+ Add more

You are trying to clone the same tag every time and you add the new element to the same tag too. What you could probably do is create a template tag, clone the template and add the clone to a new tag instead. That way, each time you click on 'Add more' you'll end up adding only one more select.
Try this fiddle here http://jsfiddle.net/gkf5T/1/
<script>
function addInput(divName, template){
var newdiv = document.createElement('div');
newdiv.innerHTML = document.getElementById(divName).innerHTML;
document.getElementById(template).appendChild(newdiv);
}
</script>
<div id="template">
<select name="category">
<option selected="selected" value="1">1</option>
</select>
</div>
<div id="add_more_cat">
</div>
+ Add more

You can use cloneNode
<script>
function addInput(divName){
var refEl = document.getElementById(divName);// refEl can be anything ex: document.body
var clone = refEl.cloneNode(true);
refEl.parentNode.insertBefore(clone, refEl.nextSibling);
}
</script>
<div id="add_more_cat">
<select name="category">
<option selected="selected" value="1">1</option>
</select>
</div>
+ Add more
try it here : http://jsfiddle.net/zLKXf/

Assume you have an empty div
<div id="display></div>
Assume (yes ass-u-me) you have a row you want to insert over and over
<div id="add_more_cat">some html text whatever even extra divs</div>
In jQuery you could
var cloned = $("#add_more_cat").clone();
cloned.attr('id', someUnique); // this makes sure each area is addressable
$("#display").append(cloned);
$("#display".show(); // sometimes its best to hide first if doing a loop appends. So if so use the hide before the loop
A working example is on my github media data