I am using following code to create a list dynamically. It works fine but when I click the particular list item, then the selected row's font color should turn yellow. How can I do it?
Thanks in advance.
$('#DateListView').children().remove('li');
//Make a new list
var parent = document.getElementById('DateListView');
for (var menuid = 0; menuid < weekStartDates.length; menuid++) {
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem_' + weekStartDates[menuid]);
listItem.innerHTML = "<div data-role='button' style='margin-left:10px;font-size:15px'data-theme ='c' id='" + menuId + "'>" + Hai +"</div>";
parent.appendChild(listItem);
}
var list = document.getElementById('DateListView');
$(list).listview("refresh");
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
is this a typo? $('#DateListView li ") should have matching single or double quotes
This:
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Should be:
$('#DateListView li').bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
or:
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Also you might want to call the refresh after your added markup
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup
UPDATE:
$("#DateListView li").bind("click", function() {
$(this).attr("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup
Related
For some reason I'm having a hard time implementing draggable (either jquery's or draggabilly) on JSON/jquery-created elements.
This is my jQuery along with the JSON.
var setTotal = function (){
var total = 0;
$('.block').each(function(){
total = total+parseInt($(this).data('cost'));
});
$('.totalSum').html(total);
};
window.onload = function(){
$.getJSON( "ajax/test.json", function( data ) {
$.each( data.createButton, function( key, val ) {
var button = $('<button class="btn" id="' + val.name +'" style="background: ' + val.color + '">' + val.name + '</button>');
button.on("click", function(){
//console.log("button " + val.name + " was clicked!");
var block = $('<div id="draggable" class="block ' + val.name + '-piece">'+ val.name + '<div class="close">-</div></div>');
block.data('cost', val.cost);
block.on("click", ".close", function(){
$(this).parent().remove();
// call set total to refresh it when item is removed
setTotal();
});
$('#boxes').append(block);
// call set total to calculate total blocks' cost
setTotal();
});
$('#field').append(button);
});
});
};
and this is how it's called in the html document;
<!-- Grab Google CDN's jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Grab draggable -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"></script>
<!-- My own scripts -->
<script src="js/main.js" type="text/javascript"></script>
<script>
var $draggable = $('#draggable').draggabilly({
// options...
});
</script>
<!-- End scripts -->
Now for some reason I can't target the ID (for testing only) nor the class (block) of the block variable. Does anyone know why? The draggable works fine with any other element on the page.
Sincerely, Sebastian
Two things :
you are appending multiple elements with id="draggable". Ids should be unique.
there's no evidence of invoking draggabilly on the appended elements.
Draggabilly needs to be invoked on :
any blocks that already exist on page load
dynamically created blocks after they have been appended
Personally, I would write the code something like this :
window.onload = function() {
var draggabilly_options = {
// options...
};
function create_button(key, val) {
$('<button/>', {
'id': val.name,
'class': 'btn',
'style': 'background-color:' + val.color,
'html': val.name,
})
.appendTo("#field")
.on('click', create_block.bind(val));
}
function create_block() {
$('<div/>' {
'class': 'block ' + this.name + '-piece',
'html': this.name + '<div class="close">-</div>'
})
.appendTo('#boxes')
.draggabilly(draggabilly_options) //invoke draggabilly on the div.block just added
.data('cost', this.cost)
.find('.close')
.on('click', close);
}
function close() {
$(this).closest(".block").remove();
setTotal();
}
function setTotal() {
var total = 0;
$(".block").each(function() {
total += parseInt($(this).data('cost'));
});
$('.totalSum').html(total);
};
$.getJSON( "ajax/test.json", function(data) {
$.each(data.createButton, create_button);
setTotal();
});
//You need this only if the page loads with any "draggable" blocks already in place.
$("#boxes .block").draggabilly(draggabilly_options);
};
Thank you for all responses. I took some advice from your code you published and put it like this;
// Start this after window is loaded
window.onload = function(){
// Init draggabilly
var draggabilly_options = {
// Dragabilly options
containment: '#boxes',
grid: [ 100, 100 ]
};
and also defined it further down in the button click function like so;
button.on("click", function(){
var block = $('<div id="block-' + val.id + '" class="block ' + val.name + '-piece"></div>');
var close = $('<div class="close">-</div>');
$(block).append(close);
block.data('cost', val.cost);
block.draggabilly(draggabilly_options);
This appeared to solve it for me! Thank you for the help and answers, they solved my problem :)
I am trying to get a close button to close 2 LIs but they're in 2 different ULs - LIs generated by jQuery dynamically.
When someone enters an item / qty and clicks add they are rendered into a new LI but when they include the pricing, it renders in a different LI
So pressing the "X" in the Item/Qty to close the specific LI wont affect the price corresponding to that item.
Also the "Clear" button works fine just the individual LIs
Any suggestions on fixing this issue without having to add the "X" on the price LI as well?
I hope my explanation makes sense, you can see the code here
$(document).ready(function () {
// Adds typed items and qty to the list
$('#add').on('click', function () {
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li>' + '<div class="delete"></div>' + qty + ' ' + item + '</li>');
var price = $('#price').val();
$('#list-b').append('<li>' + '$' + price + '</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function (event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Deletes/fades out 'li' when X is clicked
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li');
listItem.fadeOut(500, function () {
listItem.remove();
});
});
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function () {
var li = $('li');
li.fadeOut(500, function () {
$(li).remove('li');
});
$('#list').val('').focus();
});
});
You would need to remove the li with the same sibling index from the next ul:
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.fadeOut(500, function () {
$(this).remove();
});
});
Demo: http://codepen.io/anon/pen/emdyqX
$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li');
var ind = listItem.index();
listItem.fadeOut(500, function() {
listItem.remove();
});
$('#list-b').find('li').eq(ind).fadeOut(500, function() {
$(this).remove();
});
});
http://codepen.io/anon/pen/OPRzKx
i want to remove the an item from server side also , so i need id of item that is gone to trash div, below method is called on when dropped to trash div.
drop: function(e, selected) {
var $current_container, $original_container, $previous_container;
if (_this.options.enableTrash) {
alert(original_container_class);
$original_container = $("." + original_container_class);
$current_container = $("." + current_container_class);
$previous_container = $("." + previous_container_class);
$selected = $(selected.helper);
$current_container.trigger("ss-trashed", $selected);
$selected.remove();
$original_container.trigger("ss-rearrange").removeClass(original_container_class);
$current_container.trigger("ss-rearrange").removeClass(current_container_class);
return $previous_container.trigger("ss-arrange").removeClass(previous_container_class);
}
}
FIDDLE:
http://jsfiddle.net/LNysC/2244/
Try this
$('.trash').on('ss-trashed', function (e, selected) {
console.log($(selected).attr('id'))
})
DEMO: http://jsfiddle.net/LNysC/2245/
I have a jQuery selectable list that has a handle to select an item from one list and put it in another "selected" list. This works fine in Firefox but does not work at all in Chrome and IE. I am not able to click an item to move it to the selected list. See my fiddle in Firefox, which works fine, and then view it in IE or Chrome and notice that it no longer works as expected. (click the plus sign to add a column to the selected list).
jQuery code to move to selected list:
$(function () {
$(".list")
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-plus'></span></div>")
.selectable({
handle: ".handle",
stop: function () {
var result = $("#select-result");
$("ul li div").click(function () {
var index = $("ul li div").index(this);
var listLiText = $("ul.list li").eq(index).text();
var listLiID = $("ul.list li").eq(index).attr('id');
$("ul.list li").eq(index).css('background-color', '#669966');
$("ul.list li").eq(index).css('color', '#FFFFFF');
if ($("#select-result #" + listLiID).length == 0) {
result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
}
sortColumns();
});
}
});
});
JS Fiddle (try first in FF then in IE or Chrome):
http://jsfiddle.net/kmbonin82/NkgC2/17/
I found your problem: You are using an "click" after you have already "stopped" the click event on selectable. You cannot click after it has stopped a selectable click. If you comment out the click, as below, then it fixes your main problem. Then, you need to change your selectors from "ul li div" to ".list li" because you are not selecting from your "list".
stop: function () {
var result = $("#select-result");
//$(".list li").click(function () { -----------PROBLEM-----------
var index = $(".list li").index(this); //Changed to .list li
var listLiText = $(".list li").eq(index).text(); //Changed to .list li
var listLiID = $(".list li").eq(index).attr('id'); //Changed to .list li
$(".list li").eq(index).css('background-color', '#669966'); //Changed to .list li
$(".list li").eq(index).css('color', '#FFFFFF'); //Changed to .list li
if ($("#select-result #" + listLiID).length == 0) {
result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
}
sortColumns();
//});
}
Your updated JS Fiddle: http://jsfiddle.net/NkgC2/30/
Your code should execute after the page is ready:
(function($) {
$(document).ready(function() {
// your code here
});
})(jQuery);
I am making tree with the help of jquery in the tree whenever there is more than one child for a particular child i want to gave a toggle effect.it means that there should be a plus icon on click of it tree should expand and minus image should come on click of minus tree should collapse and plus image should come.
how to develop this any working example of tree node will be helpful
In this manner i have used your function
function createSpanImageNode(spnNew) {
var spnImage = document.createElement("span");
spnImage.id = spnNew + "_" + "spn1";
$(spnImage).addClass('SpanPlus');
spnImage.setAttribute('onclick', 'toogleNode("' + spnImage.id + '")');
return spnImage;
}
function toogleNode(spnID) {
debugger;
var dv = $("#" + spnID).parents("div:first");
var chkUl = $(dv).find('ul').length;
if (chkUl > 0) {
if ($("#" + spnID).hasClass('SpanPlus'))
$("#" + spnID).removeClass('SpanPlus').addClass('SpanMinus');
else
$("#" + spnID).removeClass('SpanMinus').addClass('SpanPlus');
$(dv).find('ul').animate({ height: 'toggle' });
}
}
the two actions that it should perform are
1)remove the class with the span and add the class with minus.
2)it should toggle the ul.
both is not working????
http://api.jquery.com/toggle/
<script type="text/javascript">
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
for full menu you can find here
http://blog.adlivetech.com/how-to-make-vertical-menu-with-plus-minus-toggle/