Following is a part of my to-do list application. The delete function is not working properly
function deleteTodoItem(e, item) {
$(item).parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function(e) {
var item = this;
deleteTodoItem(e, item)
})
});
function deleteTodoItem(elem) {
elem.parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
deleteTodoItem($(this))
})
});
short code
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
$(this).parent().remove();
})
});
Related
I want to add fade-in and fade-out transitions in this script, so i want to insert fadeOut(1000) fadeIn(1000) in the script.
Here is the script:
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
this is jQuery script for switch between grid and list views to display content.
This is the site, here i implemented this script: http://bbelog-megagrid.blogspot.com View the HTML Sources there.
This is a same example script transitions added:
$(document).ready(function () {
var elem=$('ul');
$('#viewcontrols a').on('click',function(e) {
if ($(this).hasClass('gridview')) {
elem.fadeOut(1000, function () {
elem.removeClass('list').addClass('grid');
elem.fadeIn(1000);
});
}
else if($(this).hasClass('listview')) {
elem.fadeOut(1000, function () {
elem.removeClass('grid').addClass('list');
elem.fadeIn(1000);
});
}
});
});
I want to modify the first script like this one.
you can add those like this
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
$bar.fadeOut(1000);
$dat.fadeIn(1000);
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
$dat.fadeOut(1000);
$bar.fadeIn(1000);
jQuery.cookie("dat_style", 1);
return false
});
As it stands the remove function doesn't work. Any suggestions?
var toggle = new function() {
$(document).on('click', 'img', function () {
$(this).parent().toggle('slide');
})
}
var remove = new function() {
$(document).on('click', 'img',
setTimeout(function () {
$(this).parent().remove();
}, 1000);
)
}
The function your are looking for is .queue(). It will execute a provided callback after the previous animation has finished:
$(document).on('click', 'img', function() {
var $entry = $(this).parent();
$entry.toggle('slide').queue(function(next) {
$entry.remove();
next();
});
});
Working example: http://jsfiddle.net/rbBgS/
I want to send a visitor to a new page after they drag three coins into three different jars, but I am unsure of how to trigger the new page after they drag the coins into the jars.
I'm hoping that something like this will work:
http://jsfiddle.net/F8L44/
$(init);
function init() {
$('#makeMeDraggable1').draggable();
$('#makeMeDroppable1').droppable({
drop: function () {
$("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
}
});
$('#makeMeDraggable2').draggable();
$('#makeMeDroppable2').droppable({
drop: function () {
$("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
}
});
$('#makeMeDraggable3').draggable();
$('#makeMeDroppable3').droppable({
drop: function () {
$("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
}
});
}
$(init);
function init () {
var drops = 0,
redirectIfDone = function () {
if (drops === 3) {
window.location = 'http://www.google.com';
}
};
$('#makeMeDraggable1').draggable();
$('#makeMeDroppable1').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
}
});
$('#makeMeDraggable2').draggable();
$('#makeMeDroppable2').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
}
});
$('#makeMeDraggable3').draggable();
$('#makeMeDroppable3').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
}
});
}
i'm using selectable jquery, i want to cater the value for selectable once the use select or unselect the item. My problem is, the last value of unselectable won't update.
Full code here http://jsfiddle.net/duQH6/ When I select Mon and Tue, then I unselect the Tue, the value is updated, but then when I click Mon, the value is not updated. Please advice.
Here my jquery code
$(function() {
$("#selectday1").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
$('document').ready(function(){
$( "#selectday1" ).selectable({
selected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
$( "#selectday1" ).selectable({
unselected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
});
Thanks..
The problem is, you are updating the days value within the each loop, so when you unselect the last element the loop callback is never executed, that is why it is happening.
The days value is supposed to be updated once the each() loop is completed.
$(document).ready(function () {
$("#selectday1").selectable({
selected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
},
unselected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
}
});
});
Demo: Fiddle
But it can be simplified to
jQuery(function ($) {
function serialize(event, ui) {
var result = $(this).find(".ui-selected").map(function () {
return this.id;
}).get();
$("#days").val(result.join(','))
}
$("#selectday1").selectable({
selected: serialize,
unselected: serialize
});
});
Demo: Fiddle
I am using this code:
$(document).ready(function () {
$("#step1_next").validate({
submitHandler: function(form) {
$.post('step2.php', $("#step1_next").serialize(), function(data) {
$('#step2_div').html(data);
$("#step2_form").on("submit", function() {
$.post('../model/step2.php', $("#step2_form").serialize(), function(data) {
$('#step2_controller').html(data);
});
return false;
});
});
}
});
});
Basically, what I wanted to do is that when step2.php is rendered, another ajax function is attached onto step2_form (inside step2.php).
This code doesn't work probably because "step2_form" isn't loaded yet. What can I do?
Use event delegation using .on()
$(document).ready(function () {
$("#step1_next").validate({
submitHandler: function(form) {
$.post('step2.php', $("#step1_next").serialize(), function(data) {
$('#step2_div').html(data);
$(document).on("submit", "#step2_form", function() {
$.post('../model/step2.php', $("#step2_form").serialize(), function(data) {
$('#step2_controller').html(data);
});
return false;
});
});
}
});
});