Grow your CSS skills. Land your dream job.

To-do-list Site issues

  • # January 8, 2013 at 1:09 pm

    Hi all! (again)

    So I’m working on a to-do-list site in order to learn a bit of JavaScript and I’m a little stuck. If you head to [here](http://todo.lukeseager.com “to-do-today”) you can see the site as it stands. If you add some things to do you can see the checkboxes can be checked and unchecked, great!

    But, try adding another to-do and all the checkboxes will uncheck!

    Firstly, Is there a fix for this?

    But, ideally, I wanted to use an icon font for the checkboxes, using the [checkbox hack](http://css-tricks.com/the-checkbox-hack/ “checkbox hack”), but that requires an ID to link to a label, which will only work for the first to-do. Not good.

    Then I thought about doing it in JavaScript, putting a span or something in there, which almost worked, but it seems like you can’t use an onclick event when you’ve added code from JavaScript, because it’s not in the DOM on page load? Or so I read.

    So I’m a little stuck for ideas as to how to get these statuses checked and un-checked without them resetting when someone adds a new thing to-do!

    Any ideas/suggestions would be amazing.

    # January 8, 2013 at 1:29 pm

    I’m not sure if I can be of any help with your main issue here, but as to attaching event handlers to content injected via JavaScript, the jQuery .on() event handler attachment is what you want. Check out the jQuery documentation [here](http://api.jquery.com/on/) for more info on that.

    Seems to me the old .live() method was easier to understand, but I’m a bit of a JS newbie, so meh.

    For the checkbox icons, however, why not just use background images (or a sprite, actually) alternated based on the :checked selector, as Chris goes over [here](http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/)?

    Also, might I humbly suggest adding some more obvious indication that the to-do has been completed upon checking, like changing the urgency icon out, changing the row background color, or even collapsing that row or moving it down the list or into a “Completed” section that autopopulates?

    Edited to add: Awesome concept you’ve got going on, by the way. I really love the look and feel of the web app so far.

    # January 8, 2013 at 2:03 pm

    Thanks! Will take a look at the jQuery .on() handler :)

    Yea, I did originally use a slightly different checkbox hack, but as I say they all require a label connected to the input with an ID, which will only work for the first to-do, because it’s an ID.

    Thanks for the suggestions on the completed to-do’s, will definitely try something like that out! Thanks for the kind words :)

    # January 8, 2013 at 2:20 pm

    >Thanks! Will take a look at the jQuery .on() handler :)

    No problem!

    >Yea, I did originally use a slightly different checkbox hack, but as I say they all require a label connected to the input with an ID, which will only work for the first to-do, because it’s an ID.

    I’m sorry if I’m not understanding this completely, but where are you finding a requirement for an ID on the input? If we’re just focusing on replacing the checkbox graphic here, it’s super simple to do, you don’t even need a class. It would look something like this (a very much simplified piece of code, but you get the idea):

    input[type=checkbox] {
    opacity: 0; /* Hide the original checkbox */
    width: 20px;
    }
    input[type=checkbox] + label {
    cursor: pointer; /* Make sure it looks clickable */
    background: url(check.png) left center no-repeat; /* Supply your own custom graphic */
    }
    input[type=checkbox]:checked + label {
    background: url(checked.png); /* Swap out the graphic if the checkbox is :checked */
    }

    I’ll look through your JS and see if I can locate where it’s clearing the checkboxes for you during my lunch break. I love this kind of thing . . . guess I’m a little OCD. :D

    # January 8, 2013 at 2:57 pm

    The ID would be in the HTML on its own, to connect the Label to the checkbox you’re hiding.

    So the HTML would be `` so that you can use the `+ label` bit of CSS. Or am I completely wrong?

    # January 8, 2013 at 3:06 pm

    Ah, I see what you’re thinking!

    No, the + label simply acts as a sibling selector, so input[type=checkbox] + label will select all inputs that are checkboxes, as well as their immediate sibling labels.

    This allows this method to work for most use cases, because it’s not ID or class-based.

    For more information on advanced CSS selectors like this, [check out this article](http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/). It’s one of the most detailed I’ve seen.

    # January 8, 2013 at 3:22 pm

    Okay, near as I can figure, the checkbox clearing bug is tied to the variable “t” which sets window.todoTable.innerHTML (within your onClick function). When I remove the variable todoStatus from that string, and replace it with this string:

    I get the opposite case–not only are all new to-dos already checked, as expected, but so are existing ones that were unchecked.

    # January 8, 2013 at 4:00 pm

    Aaaaah, can’t believe I didn’t know about this sibling selector! Amazing.

    Not sure if I’m missing something here, but the `input` you’ve quoted still uses an ID? When I use that code above within the **todoUserList** variable with the `window.todoTable.innerHTML` bit, I still get the same result of only being able to select one checkbox and them all resetting if you add something new.

    # January 8, 2013 at 4:09 pm

    >Aaaaah, can’t believe I didn’t know about this sibling selector! Amazing.

    Indeed it is! Looks like you’ve got it working nicely, too!

    >Not sure if I’m missing something here, but the input you’ve quoted still uses an ID? When I use that code above within the todoUserList variable with the window.todoTable.innerHTML bit, I still get the same result of only being able to select one checkbox and them all resetting if you add something new.

    Just to make sure we’re on the same page, I’m referencing **global-ck.js**, this bit in particular:

    submitButton.onclick = function() {
    todoTitle = document.getElementById(“td-title”).value;
    todoDescription = document.getElementById(“td-description”).value;
    todoUrgent = document.getElementById(“urgent”).checked;
    todoStatus = ““; // You can see I edited this line slightly to get the behavior I’m talking about.
    if (todoTitle === “What do you need to do?”) window.alert(“You need something to do. //make a custom alert.”);
    else {
    window.grid.style.visibility = “visible”;
    todoUrgent !== !0 ? todoUrgent = “” : todoUrgent = ““;
    todoDescription === “Need a description?” && (todoDescription = “”);
    var t = window.todoTable.innerHTML = window.todoTable.innerHTML + “
    ” + todoStatus + “

    ” + “ ” + todoTitle + “
    ” + todoDescription + “

    ” + “ ” + todoUrgent + “

    “;
    window.midnightCookie(“todo”, t);
    document.getElementById(“td-title”).value = “What do you need to do?”;
    document.getElementById(“td-description”).value = “Need a description?”;
    document.getElementById(“urgent”).checked = !1
    }

    # January 8, 2013 at 4:23 pm

    Ah okay, I think we’re on the same page now!

    I have the same as you explained, with new items coming in checked.

    If you add more than one item though, there is still the issue of all checkboxes controlling just one checkbox. Was this the case with your own test too?

    This is due to this line (particularly the bold parts):
    todoStatus = ““;

    Which have to be there for the checkbox hack to work. I understand that there is no ID needed for the CSS of it, but for the actual functionality of the hack, I don’t think there’s a way around using an ID. Because of this, only the first checkbox added will work as expected. All subsequent boxes will just stay checked forever.

    # January 8, 2013 at 4:42 pm

    Easiest way to get around that: since you’re generating these elements dynamically, why not add a sequential number to the end of each checkbox ID? Something like this (it would be easier to use jQuery, obviously):

    var submitButton = document.getElementById(“submit”),
    todoTitle = “”,
    todoDescription = “”,
    todoUrgent = “”,
    todoStatus = “”;
    incrementalID = 0;
    incrementalFor = 0;
    submitButton.onclick = function() {
    todoTitle = document.getElementById(“td-title”).value;
    todoDescription = document.getElementById(“td-description”).value;
    todoUrgent = document.getElementById(“urgent”).checked;
    todoStatus = ““;
    if (todoTitle === “What do you need to do?”) window.alert(“You need something to do. //make a custom alert.”);
    else {
    window.grid.style.visibility = “visible”;
    todoUrgent !== !0 ? todoUrgent = “” : todoUrgent = ““;
    todoDescription === “Need a description?” && (todoDescription = “”);
    var t = window.todoTable.innerHTML = window.todoTable.innerHTML + “
    ” + todoStatus + “

    ” + “ ” + todoTitle + “
    ” + todoDescription + “

    ” + “ ” + todoUrgent + “

    “;
    window.midnightCookie(“todo”, t);
    document.getElementById(“td-title”).value = “What do you need to do?”;
    document.getElementById(“td-description”).value = “Need a description?”;
    document.getElementById(“urgent”).checked = !1
    }

    Personally, I’d rewrite the whole thing as jQuery, to reduce the size of the code and make it more readable, as well as introduce jQuery’s ease of indexing sequential numbers.

    # January 8, 2013 at 5:21 pm

    Yep, I would have to agree with you jQuery would be the way to go! Sadly, this is for a University project and the brief demands JavaScript unfortunately.

    But, I think I’m almost there now! The Incremental idea worked like a charm, now all the checkboxes are independent and can be checked/unchecked to your hearts content!

    Still have this issue of them all resetting when a new item is added, kinda annoying really :/

    # January 8, 2013 at 5:25 pm

    Side note: I probably will go through this again in jQuery after I finish uni, a chance to learn JS’s sister language I guess :)

    # January 8, 2013 at 5:58 pm

    After some investigation on CodePen, it seems that this is something not isolated to your page or code. I can easily reproduce the issue by simply using a similar method. [CodePen Example](http://codepen.io/JoshBlackwood/pen/iCymJ)

    This puzzles me. I feel like we’re missing something simple, but more research is definitely needed. I’ll keep tinkering.

    # January 8, 2013 at 6:26 pm

    Hmm, it is strange, because there’s no page reloading, and the innerHTML only adds a new table row, and so shouldn’t effect the previous rows, but somehow does :S

    I’ll have a dig through stack overflow in the morning, see if anyone’s came across a similar problem.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".