Could really use some help with troubleshooting my jQuery UI Todo List - it's just not

Question

Could really use some help with troubleshooting my jQuery UI Todo List - it's just not

I've been working on a new project using jQuery UI to create a "to do list" application. So far, I've managed to get it up and running, but I'm having trouble displaying the tasks correctly in the designated div. Instead of showing up as a bar with a delete button and completed option, they are just appearing as plain text. Should I be including jQuery directly within the HTML as well?

If you'd like to see the current state of my app, check it out on this fiddle:

Todo List App FIDDLE

For simplicity, I'll only include the jQuery portion of the code here. The complete version can be found on the Fiddle link.

$("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: {
    - Code continues from here -

Your help and guidance on resolving this issue would be greatly appreciated!

javascript jquery html css jquery-ui

Answer 1

Answer №1

One issue arises with the click event in your code. You are simply transferring the .done span element to the completed list. Here's a revised approach:

$('#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 scenario, while the span.done is still removed, the entire li element is moved to the lower list.

The CSS also needs fixing, see updated 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 contained an extra curly brace after rgba, potentially impacting subsequent code as well.

EDIT The delete function requires some adjustments too. Here's the corrected version:

$('.sortlist').on('click', '.delete', function () {
    var task_item = $(this).parent('li');
    task_item.effect('puff', function () {
        $(this).remove();
    });
});

(Essentially, task_item was not properly defined).

Concerning the title, there appears to be an issue with duplicate id attributes in your HTML. Both elements have id="task". To fix this, you can modify your input tag like so:

<input type="text" name="task_title" id="task_title">

...and update your jQuery code to:

var task_name = $('#task_title').val();

By making these adjustments, the title should now display correctly.

Answer 2

One issue arises with the click event in your code. You are simply transferring the .done span element to the completed list. Here's a revised approach:

$('#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 scenario, while the span.done is still removed, the entire li element is moved to the lower list.

The CSS also needs fixing, see updated 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 contained an extra curly brace after rgba, potentially impacting subsequent code as well.

EDIT The delete function requires some adjustments too. Here's the corrected version:

$('.sortlist').on('click', '.delete', function () {
    var task_item = $(this).parent('li');
    task_item.effect('puff', function () {
        $(this).remove();
    });
});

(Essentially, task_item was not properly defined).

Concerning the title, there appears to be an issue with duplicate id attributes in your HTML. Both elements have id="task". To fix this, you can modify your input tag like so:

<input type="text" name="task_title" id="task_title">

...and update your jQuery code to:

var task_name = $('#task_title').val();

By making these adjustments, the title should now display correctly.

Could really use some help with troubleshooting my jQuery UI Todo List - it's just not

Answer №1

Similar questions

avoid inserting into a specific field with a specific name

Encountered an issue while trying to establish a connection between node.js and MongoDB

What causes the error "searchInput" to be undefined?

Scraping data from Mass Lottery's website with the help of Beautiful Soup

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

Using .load() function in jQuery prevents .mouseenter() from functioning properly on loaded content

Restrict the number of button clicks to only once every 5 minutes

Can someone provide guidance on incorporating a checkbox into my WordPress site?

jQuery plugin that controls scrolling speed using the mousewheel

How can I prevent dataTable resizing?

Issue with JQuery on("submit") event not triggered upon first click

The assertion that 'd3Ctrl' is not a valid function, but instead is undefined

Ways to declare a function within the events onMouseOver and onMouseOut

Modify the array value and access it outside of an asynchronous function

Mouseover Effect with Jquery Dropdown Menu

What are the steps for leveraging a proxy with NodeJS and Selenium?

Creating an HTML form that dynamically populates a second select dropdown from a MySQL database, depending on the value selected

What is the CSS/HTML code to position text at the bottom of an image overlay in a card design?

Exploring Style Attribute Manipulation using vanilla JavaScript on Firefox

Putting the `href` attribute around an `input` of