jQuery/AJAX Formatting layout - My Tiny Todolist

Question

Hi Guys,

I'm trying to modify http://www.mytinytodo.net/ to integrate it into an app I'm developing. Unfortunately my jQuery/AJAX ability is rubbish at best.

I want to do two things:

1) Tasks to be placed into a parent div depending on due date class. For example, tasks that have already gone past their duedate are placed inside 'expired' div. Tasks that are due in the future are placed in 'future' div. And tasks that have no set due date or due date is today are placed in 'today' div.

I know I need to make some changes around line 113 of the ajax.js file but I'm stumped.

2) My application is running under a login system that uses session identifiers. I want to setup My Tiny TodyList to use that system so that normal users can see public and their own todolist, whereas admins can see public and every user's todolist. I tried to simply create a new field in the mttl table that represents the userid linked to a hidden input box that stores that id but that didn't work.`

Any pointers would be greatly appreciated.

Rich

Answer 1

I believe that the changes you'll make are actually in the function submitNewTask() at line 163 of ajax.js. The part of this function that places the new task back on the page is at line 175:

$('#tasklist').append(prepareTaskStr(item));

This line takes the result of the prepareTaskStr() function at line 108 and appends it to the div with an ID of tasklist. You'll want to replace this with code that looks at the date class of the return value of prepareTaskStr() and determines if it is past today (expired) or yet to come (future) or if it is the same as today (today). Depending on the result of this determination, you'll place the task string in the appropriate div, substituting '#tasklist' with the name of your div, such as

$('#expiredlist').append(prepareTaskStr(item));

or

$('#todaylist').append(prepareTaskStr(item));

or

$('#futurelist').append(prepareTaskStr(item));

I bet that the todo app has already created a var for the date. find that and maybe you can use it in your if() statement to determine what div to place the new task.