dynamically create items in drop down list in bootstrap - javascript

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/

Related

Search box, can not click on result 'a' element

I made an search box that use ajax like this :
$(document).ready(function(){
$('.search-box input[type="search"]').on("keyup", function() {
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $("div.dropdown-menu");
if( inputVal.length) {
$.get("/ajax/search/users", {term: inputVal} ).done( function( data ) {
resultDropdown.empty();
const users = jQuery.parseJSON(data);
users.forEach(element => {
$slug = element['slug'];
resultDropdown.append("<a class='dropdown-item' href='/" + $slug + "'></a>")
});
resultDropdown.dropdown('toggle');
});
} else {
resultDropdown.empty();
resultDropdown.removeClass('show');
}
});
});
but when I try to 'click' on my 'a' that doesn't change my windows.location to the href.
<div class="dropdown show">
<div class="dropdown-menu overflow-auto show" aria-expanded="true">
<a class="dropdown-item" href="/accounttest-1"></a>
<a class="dropdown-item" href="/accounttest-2"></a>
</div>
</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>

get child id from parent javascript onclick

I have the script bellow and i want to get the id of the child removed
<div class="right respleft">
<div class="section-title" id="divin">Ajout d'un champ</div>
<form class="tiny_form" id="form-step2">
<input type="text" id="fiel" placeholder="Nom du champ" /><br/>
<select class="form-control" id="champs">
</select>
<i class="fa fa-plus"></i><br/>
<div id="extender"></div>
</form>
</div>
<div class="sep seppage"></div>
<div class="clear"></div>
<div id="bottom-submit" class="inner clear">
<input type="submit" class="page-next center btn btn-lg btn-default" value="Créer" />
</div>
{% endblock %}
{% block javascripts %}
<script>
//add input
$('a#add_btn').click(function () {
var x = document.getElementById("fiel");
var selected= x.value;
var c = document.getElementById("champs");
// var option = document.createElement("option");
var strUser = document.getElementById("champs").value;
var valChamps=document.getElementById("fiel").value;
$('<p><input type="text" class="highlight_orange" name="items[]" id="' + strUser+ '" value="' + valChamps+ '" />' +
'<a class="delete" href="#step2" id="' + strUser + '"><i class="fa fa-trash-o"></i></a></p>').fadeIn("slow").appendTo('#extender');
c.remove(c.selectedIndex);
i++;
return false;
});
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
var item = $(this).closest('input');
var id = item.attr('id');
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
function addList(){
var select = document.getElementById("champs");
for(var i = 100; i > 0; --i) {
var option = document.createElement('option');
option.text = 'champ libre '+i;
option.value =i;
select.add(option, 0);
}
}
addList();
</script>
my problems is how to get the id of the removed input text after clicking on remove button.
this is picture of the output
output
Thanks for your helps
You can use siblings method to get the id of input element
//fadeout selected item and remove
$("#form-step2").on('click', '.dynamic-link', function () {
var myId = $(this).siblings('input[type=text]').attr('id');
alert(myId)
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
You can use getAttribute() function:
// your stuff
var myId = c.getAttribute("id");
c.remove(c.selectedIndex);
// more stuff
EDIT
Maybe you need it here:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).attr('id');
$(this).empty();
return false;
});
});
Be more specific please
EDIT2
That's the solution:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).find('input[type=text]').attr('id');
$(this).empty();
return false;
});
});
See it working: http://jsfiddle.net/vWPJf/57/

Toggling button classes and text

I am trying to change text and icons with jquery. When you click at the button it changes, but when you click the button again it struggles. The icon and the text does not change back to default.
Code behind
string box = "<div class=\"alter-Wrp\"> <div class=\"alert alert-danger {0}\">{1}</div></div>";
if(count > 0)
litAlert.Text += String.Format(box);
asp.page
<button class="btn btn-dangerr btn-lg" type="button"><span class="glyphicon glyphicon-bell beee"></span>
<span class="text">Show Alarm</span> </button>
<asp:Literal ID="litAlert" runat="server"></asp:Literal>
Jquery
$('.btn-dangerr').click( function(e) {
var tgl = $('.btn-dangerr');
var box2 = $('.alter-Wrp');
var icon = $('.glyphicon');
var text = $('.text');
var toggleClass = '.beee';
icon.addClass('glyphicon-bell');
text.text('Show Alarm');
box2.slideToggle(function (){
if (tgl.hasClass(toggleClass)) {
icon.removeClass('glyphicon-bell').addClass('glyphicon-fire');
text.text('Hide Alarm');
} else {
e.preventDefault();
}
$('.btn-dangerr').toggleClass(toggleClass);
});
});
http://jsfiddle.net/w8Yjz/25/
Pretty sure this is what you're trying to do:
$('.btn-dangerr').click(function (e) {
$('.alter-Wrp').slideToggle();
$('.beee').toggleClass('glyphicon-bell glyphicon-fire');
if ($('.beee').hasClass('glyphicon-fire')) {
$('.text').text('Hide Alarm');
} else {
$('.text').text('Show Alarm');
}
});
Fiddle

How can I go to the Next and Previous value in a json array?

I've been beating my head against the wall with this one for days now. I have a list of items that when clicked, will move that indivual item to a div. Based on which item is clicked, I'm trying to go the the Next and Previous items in my list (json).
I'm kind of new to this and I just can't quite get this to work no matter what I try.
Here is the jsfiddle code. Thanks!
HTML:
<audio id="audio-player" name="audio-player" src="" ></audio>
<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">NEXT</li>
</ul>
</div>
</a>
<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">PREV</li>
</ul>
</div>
</a>
<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​​
Javascript an Jquery:
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append(
$("<li></li>").append( $("<a></a>")
.attr({"href":v.id,"data-file":v.trackFile})
.html(v.trackName)
)
);
});
$("#player-handwriting-title").empty().append($ul);
$("#player-handwriting-title a").click(function() {
var name = $(this).html(),
filename = $(this).attr("data-file");
filename2 = "upload-form/upload/" + filename;
$('#player-digital-title').html($(this).html());
document.getElementById('audio-player').src = filename2;
$("#audio-player")[0].play();
return false;
});
var myID = 0;
$("#next-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});
});
​
Added a fiddle
http://jsfiddle.net/kabichill/JzL97/
check out..Hope its wat u expected...
try something like
var myID = 0;
$("#next-bt").click(function() {
myID++;
if(myID > treeObj.root.length) { myID = 0; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
myID--;
if(myID < 0) { myID = treeObj.root.length; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});

Categories

Resources