Develop Reference

Replaceing the content of a div funtion which also is changing class

<div class="button button1" id="content" onclick="toggleClass(event);">Stay Updated</div>
<script>
function toggleClass(evt) {
var btn = evt.target;
if (btn.className == "button button1") {
btn.className = "info";
btn.onclick = null;
} else {
btn.className = "button button1";
}
}
</script>
Trying to change the content of the div after the click has happened and during the change in class.

You should try creating a text node using document.createTextNode which will take care of character escaping as well.
function toggleClass(event) {
var btn = evt.target;
//Clears the div
while(btn.firstChild){
btn.removeChild(btn.firstChild);
}
if (btn.className == "button button1") {
btn.className = "info";
btn.onclick = null;
//Append hello to the div
btn.appendChild(document.createTextNode('World'));
} else {
btn.className = "button button1";
btn.appendChild(document.createTextNode('Hello'));
}
}
<div class="button button1" id="content" onclick="toggleClass(event);">Stay Updated</div>

HTML5 Session Storage for list

How would I define sessionStorage for a dropdown list? I have the following, but I get "someTitle is not defined"
Not sure what I'm doing wrong.
Javascript
function save_page(form) {
if (supports_html5_storage()) {
var title = $('.btn-group-month ul li > a').attr('title');
sessionStorage.setItem("someTitle", title);
}
}
function load_page(form) {
if (supports_html5_storage()) {
var title = sessionStorage.getItem("someTitle");
$('.btn-group-month ul li > a').attr('title', title);
}
}
html
<div class="btn-group btn-group-month">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Month</span>
</button>
<ul class="dropdown-menu dropdown-menu-month">
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
</div>
fiddle

In the code, you are reading the incorrect data. This:
var title = $('.btn-group-month ul li > a').attr('title');
will read the title attribute for the first link in the list. But that's not the value that you want. That value will always be "January" and it will corrupt the values of the rest of the list (as specified by metal03326 in the comments).
What you want to read (and set) is the value of the first span in the button, as that is the selected value. To do that, you need to change the selector a little:
var title = $('.btn-group-month button > span:first()').text();
That will read the selected value correctly. Now to set it again when the new page loads, you need to modify that span too:
var title = sessionStorage.getItem("someTitle");
if (title) {
$('.btn-group-month button > span:first()').text(title);
}
You can see the whole code here, but it won't work as it doesn't support sessionStorage while on sandbox mode. So you can see it working on this JSFiddle too.
function supports_html5_storage() {
try {
return 'sessionStorage' in window && window['sessionStorage'] !== null;
} catch (e) {
return false;
}
}
function save_page(form) {
if (supports_html5_storage()) {
var storage = window.sessionStorage;
// AM - new selector
var title = $('.btn-group-month button > span:first()').text();
sessionStorage.setItem("someTitle", title);
form.filter(':input').each(function(ind,elem) {
if (elem.name && elem.value) {
storage.setItem(elem.name,elem.value);
}
else {
//storage.someTitle=$('ul.dropdown-menu-month li').find('a').attr('title');
}
});
} else {
alert("HTML5 storage not available");
}
}
function load_page(form)
{
if (supports_html5_storage()) {
var title = sessionStorage.getItem("someTitle");
// AM - new selector
if (title) {
$('.btn-group-month button > span:first()').text(title);
}
var storage = window.sessionStorage;
form.filter(':input').each(function(ind,elem) {
if (elem.name) {
$('.edit-image-container img.img-verify').attr('src',storage.galleryImg);
elem.value = storage.getItem(elem.name);
} else {
//
}
});
}
}
// Enable dropdown to display chosen value
$('.dropdown-menu li').click(function(){
var elementVal = $(this).text();
$(this).closest('.input-append').find('#appendedInputButton').val(elementVal);
});
// Dropdown picker
$('.dropdown-menu').on( 'click', 'li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
// AM - Save form
save_page($("form"));
return false;
});
// AM - Load form
load_page($("form"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="btn-group btn-group-month">
<button type="button" name="dropdownval" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Month</span><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-month" name="month">
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
</div>
</form>

jquery get value of each button

I'm trying to get the value of each button, but what i get is the value of the first button. This is my content
<div class="my_btn">
<button id="id_button" value="page-1">Page One</button>
<button id="id_button" value="page-2">Page Two</button>
<button id="id_button" value="page-3">Page Three</button>
<button id="id_button" value="page-4">Page Four</button>
</div>
and this is my script
jQuery('.my_btn').on('click',function(){
var my_content = jQuery('#id_button').val();
var my_link = '<li>Link</li>';
if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(my_link);
} else {
tinyMCE.execCommand('mceInsertContent', false, my_link);
}
});
Basically this is a wordpress function. I'm trying to add different links inside the textarea box.
Thanks in advance

Apply the event listener to the buttons instead of the wrapper, then get the value with this.value.
jQuery('.my_btn button').on('click',function(){
var my_content = this.value;
var my_link = '<li>Link</li>';
if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(my_link);
} else {
tinyMCE.execCommand('mceInsertContent', false, my_link);
}
});
Also, you should use unique values for each id attribute. While it won't effect this script, if you try to select by id then it will only affect the first element with that id.
jQuery('.my_btn button').on('click',function(){
var my_content = this.value;
alert(my_content);
/*var my_link = '<li>Link</li>';
if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(my_link);
} else {
tinyMCE.execCommand('mceInsertContent', false, my_link);
}*/
});
<div class="my_btn">
<button id="id_button_1" value="page-1">Page One</button>
<button id="id_button_2" value="page-2">Page Two</button>
<button id="id_button_3" value="page-3">Page Three</button>
<button id="id_button_4" value="page-4">Page Four</button>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

first off id_button should be a class because it is on multiple elements
second your first jquery command should look like this, this way it will handle the button click and get the correct value
jQuery('.my_btn').on('click', '.id_button',function(){
var my_content = $(this).val();
var my_link = '<li>Link</li>';
if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(my_link);
} else {
tinyMCE.execCommand('mceInsertContent', false, my_link);
}
});

dynamically create items in drop down list in bootstrap

Small part of my html code :
<div class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Platforms <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id = "buttonsPlace">
</ul>
</div>
In my js file :
for (i = 0; i < platformList.length; i++) {
var li = $("<li/>" , { id : "plat"+i,class : "dropdown" text : platformList[i] } )
//var text = document.createTextNode(platformList[i]);
//li.appendChild(text);
//btn.data("platform", platformList[i] );
$("#buttonsPlace").append(li);
console.log("hiding");
$("#plat" + i).hide();
}
However the menu is appearing but the menu items are not. where am i going wrong

Try This
$(function() {
var change = function( txt ) {
$("#ID").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
Demo
For Li Click
$("ul").on('click', 'li', function () {
var id = this.id;
//play with the id
});

$(function(){
$('.dropdown-toggle').click(function(){
var countRows = $('ul.dropdown-menu li').size();
$('.dropdown-menu').append('<li>Row '+countRows+'</li>');
countRows++;
});
});
Here is the jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/
$('#drowdown-link1').click(function(e){
e.preventDefault();
window.location.href = 'http://example.com';
});
Here is another jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/4/

How can I change the visible / hidden property of a button with javascript?

On my page I have the following theme change buttons:
<button class="small theme" name="darkBlue" onclick="setThemeColor(this)">
<span style="color: white; font-weight: bold;">#</span>
</button>
<button class="small theme" name="black" onclick="setThemeColor(this)">
<span style="color:black; font-weight:bold;">#</span>
</button>
I have this javascript:
<script type="text/javascript">
if (localStorage.themeColor) {
document.getElementsByTagName('html')[0].className = localStorage.themeColor;
}
function setThemeColor(button) {
localStorage.themeColor = button.name;
document.getElementsByTagName('html')[0].className = button.name;
var themeButtons = document.querySelectorAll(".theme");
for (var themeButton in themeButtons) {
themeButtons[themeButton].disabled = false;
}
button.disabled = true;
}
</script>
This always shows the two buttons but I would like to so that instead of the
current button being disabled then the button is not visible. Can someone
suggest how I could do this?

function setThemeColor(button) {
localStorage.themeColor = button.name;
document.getElementsByTagName('html')[0].className = button.name;
var themeButtons = document.querySelectorAll(".theme");
for (var themeButton in themeButtons) {
themeButtons[themeButton].disabled = false; // Re-included from original code
themeButtons[themeButton].style.visibility="visible" // Corrected from original answer
}
button.disabled = true;
button.style.visibility="hidden" // Added/Moved from above after noted I'd messed up the logic
}