Develop Reference

jQuery UI Todo List not working, need some guidance

I am woking with jQuery UI and I made an attempt to create a "to do list" app. I have it functioning up to a point, but the task won't display correctly in the sort div I have attempted to create. It's supposed to display as a "bar" with a delete button and a completed option. But it currently displays as text. Am I supposed to incorporate jQuery directly inline in the html as well?
Here is my fiddle of the app in it's current state:
Todo List App FIDDLE
I will display only the jQuery portion of the coding. The complete version is on the Fiddle.
$("document").ready(function() {
$('#due_date').datepicker();
$('#add_task').button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() {
$('#new_task').dialog('open'); }); // end click
$('#new_task').dialog({ width: 350,
height: 300,
modal: true,
autoOpen: false,
close: function() {
$('#new_task input').val(' '); /*clear fields*/
}, buttons: {
"Add Task" : function() {
var task_name = $('#task').val();
var due_date = $('#due_date').val();
var begin_li = '<li><span class="done">%</span><span class="delete">x</span>';
var task_li = '<span class="task">' + task_name + '</span>';
var date_li = '<span class="due_date">' + due_date + '</span>';
var end_li = '</li>';
$('#task_list').prepend(begin_li + task_li + date_li + end_li);
$('#task_list').hide().slideDown(250).find('li:first')
.animate({ 'background-color':'rgb(255,255,204)' },250)
.animate({ 'background-color':'white'},750)
.animate;
// end animate
$(this).dialog('close');
}, "Cancel" : function() {
$(this).dialog('close');
}
}
});
// end dialog
//Marking as complete
$('#task_list').on('click', '.done', function() {
var task_item = $(this).parent('li');
var $this = $(this);
$this.detach();
$('#completed_list').prepend($this);
$this.slideDown();
});
});
//Sortable
$('.sortlist').sortable({
connectWith: '.sortlist',
cursor: 'pointer',
placeholder: 'ui-state-highlight',
cancel: '.delete,.done'
});
//Delete
$('.sortlist').on('click','.delete', function() {
task_item.effect('puff', function() {
$(this).remove();
});
});
Help and guidance is greatly appreciated!

One problem is with your click event. You are only moving the .done span element to the completed list. Try this:
$('#task_list').on('click', '.done', function () {
var $this = $(this);
var task_item = $this.parent('li');
$this.detach();
$('#completed_list').prepend(task_item);
task_item.slideDown();
});
In this case, the span.done is still being removed, but the whole li element is moved to the lower list.
There is also a problem in your CSS, corrected code below:
#task_list li, #completed_list li {
border: 1px solid rgba (0, 0, 0, 0.3);
padding-top: .1em;
line-height: 170%;
margin-top: .2em;
}
The original code had an extra curly brace after rgba, which presumably had a knock on effect on subsequent code.
EDIT
The delete function is also a little faulty. Here's the corrected code:
$('.sortlist').on('click', '.delete', function () {
var task_item = $(this).parent('li');
task_item.effect('puff', function () {
$(this).remove();
});
});
(basically, task_item wasn't defined).
Regarding the title, the problem is that id attributes must be unique, but in your HTML, 2 elements have id="task". If you change your input tag to something like:
<input type="text" name="task_title" id="task_title">
...and your jQuery code to:
var task_name = $('#task_title').val();
...the title should appear.

Have some problems with my javascript

i have some problems with my script , i used JqueryUI tooltip but it doesn't work .
Sample demo is given below.
http://jsfiddle.net/VFZL7/.
$(function() {
$("a[id*='product_wrap']").tooltip({
content: function(){return $(this).html().replace('150_','')},
track: true,
});
});
I want my tooltip indicates the image petplusvn.com/files/sanpham/16/150.jpg instead of petplusvn.com/files/sanpham/16/150_1.jpg.

You can use regular expressions to replace both URLs ( in src and data-original )
$(function() {
$("a[id*='product_wrap']").tooltip({
content: function(){
var $html = $(this).html().replace(/150_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,
});
});
http://jsfiddle.net/7Y8Au/

Bootstrap Tooltip - How can I access "this"

I have created a function to show bootstrap tooltips based on the id of the link the user is hovering over.
Alerting this.id is blank inside the title function - do I need to pass this through and if so how? (this) doesn't work and I've tried a few other methods to no avail. Thank you!
$(document).ready(function(){
$('.tooltiplink').tooltip({
html: true,
title: function() {
return $('#' + this.id).html();
}
});
});

Use $(this). There is no need for using $('#' + this.id).
$(this) is already the element you're looking for.
$(document).ready(function(){
$('.tooltiplink').tooltip({
html: true,
title: function() {
return $(this).html();
}
});
});

Accessing Table Row From Popover

I currently have a bootstrap popover holding a button. The popover shows only when the mouse is over a table's tr.
What I want to do is to be able to access the elements for that row, is this possible.
Popover code:
$('.popup').popover(
{
placement: 'top',
trigger: 'manual',
delay: { show: 350, hide: 100 },
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks"
}
).parent().delegate('#quickDeleteBtn', 'click', function() {
alert($(this).closest('tr').children('td').text()); // ???
});
var timer,
popover_parent;
function hidePopover(elem) {
$(elem).popover('hide');
}
$('.popup').hover(
function() {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
popover_parent = self
//$('.popup').attr("data-content","WOOHOOOO!");
$(self).popover('show');
},
function() {
var self = this;
timer = setTimeout(function(){hidePopover(self)},250);
});
$(document).on({
mouseenter: function() {
clearTimeout(timer);
},
mouseleave: function() {
var self = this;
timer = setTimeout(function(){hidePopover(popover_parent)},250);
}
}, '.popover');
HTML:
<div class="hide" id="shortcuts">
Delete
</div>
javascript that implements popover on row:
rows += '<tr class="popup datarow" rel="popover">';
Does anyone know what I'm doing wrong here and how I am supposed to access the child elements of the tr I'm hovering over?
JSFiddle: http://jsfiddle.net/C5BjY/8/

For some reason I couldn't get closest() to work as it should. Using parent().parent() to get to the containing .popover divider, then using prev() to get the previous tr element seems to do the trick however.
Just change:
alert($(this).closest('tr').children('td').text());
To:
alert($(this).parent().parent().prev('tr').children('td').text());
JSFiddle example.
As a side note, as your Fiddle uses jQuery 1.10.1 you should change delegate() to on():
on('click', '#quickDeleteBtn', function(index) { ... });

Here I have fixed it.
You just have to pass the container option in which the popover element is added for the popover
$('.popup').each(function (index) {
console.log(index + ": " + $(this).text());
$(this).popover({
placement: 'top',
trigger: 'manual',
delay: {
show: 350,
hide: 100
},
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks",
container: '#' + this.id
});
});

In your button click alert, $(this) refers to the button itself. In the DOM hierarchy, the popover html is nowhere near your hovered tr.
Add a handler to the list item to store itself in a global variable and access that from the click event. See the forked fiddle here.
First we declare a global (at the very top):
var hovered;
Then we add a mouseover handler to the list item. Note that using 'on' means every newly generated list item will also receive this handler:
$('body').on('mouseover', '.popup', function() {
hovered = $(this);
});
Then we can alert the needed data from within the button click event:
alert(hovered.text());

See here JS Fiddle
by removing the delegate and using the id to find the button and attaching it to a click handler by making the popover makes it easier to track it
$(self).popover('show');
$('#quickDeleteBtn').click(function(){
alert($(self).text());
});
also note
$('#shortcuts').remove();
because you were using the button in the popover with the same ID in the #shortcuts we couldn't select it first, now we remove it we can

You already have the correct element in your code. Just reuse the popover_parent variable and you are all set :) FIDDLE
alert($(popover_parent).text());
Or you could do something around like this :
$('.popup').hover(
function () {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
$('#quickDeleteBtn').data('target', '');
popover_parent = self;
//$('.popup').attr("data-content","WOOHOOOO!");
$('#quickDeleteBtn').data('target', $(self));
$(self).popover('show');
},
function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(self)
}, 250);
});
$(document).on({
mouseenter: function () {
clearTimeout(timer);
},
mouseleave: function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(popover_parent)
}, 250);
}
}, '.popover');
I just store the element clicked in your #quickDeleteBtn then use the link.
FIDDLE HERE

Hide/Show different links

I have a script that works on one link on jsfiddle.
I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/
It works to show and hide but i cant make it show one and other. It shows everything.
If i press Link one I want to show ".open-container-One"
And if I press Link two i just want to show "open-container-Two"
Hope you understand my issue.
jsCode:
$(document).ready(function() {
var $div = $('.test');
var height = $div.height();
$div.hide().css({
height: 0
});
$('a').click(function() {
if ($div.is(':visible')) {
$div.animate({
height: 0
}, {
duration: 500,
complete: function() {
$div.hide();
}
});
} else {
$div.show().animate({
height: height
}, {
duration: 500
});
}
return false;
});
});​

Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.
$(function() {
var elems = $('.test').hide();
$('a').click(function(e) {
e.preventDefault();
var selEl = elems.eq($(this).closest('li').index());
selEl.slideToggle(600);
elems.not(selEl).slideUp(600);
});
});​
FIDDLE

Although I like #adeneo's answer, I prefer this method using selectors rather than elements :
$(".test").hide();
$('.list a').each(function(i) {
$(this).on("click", function() {
$(".test").slideUp(0).eq(i).slideDown(400, function() {
$(".close a").on("click", function() {
$(".test").slideUp();
}); // on click close
}); // after slideDown (shown div)
}); // on click link
}); // each
The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.
See JSFIDDLE

Give class to the anchor tag,
Link 01
Link 02
give the appropriate class as id to the div tag as
<div id="link1" class="test">
...
...
</div>
<div id="link2" class="test">
...
...
</div>
Do the below change in your javascript function
$('a').click(function() {
$('div.test').hide();
var showDivClass = $(this).attr("class");
$("#" + showDivClass).show().animate({
height: height
}, {
duration: 500
});
$('div.test').not("#" + showDivClass).hide().animate({
height: 0
}, {
duration: 500
});
});
Update and test.

Please provide the id to anchor tag which will be same as the class you need to show/hide.
and replace the $div with the id tag