Strange behavior during add() and delete()

[tomi.k...@gmail.com]

Hello everyone

I'm posting here because I am literally running out of ways to solve some quirky behavior in my script. I can add() and delete() yes, but for some reason there are weird issues with them.

I'll try to post as little code as possible.

This is me just opening the database, nothing special and it is i fact straight from the tutorials.
http://pastebin.com/Zh8X3aJR

This is my add() and this is where it gets funky.
http://pastebin.com/4bHpkk25

Notice the alert() line? If I take it out, nothing happens. If I leave it in, works perfectly.´

This is my delete() and again weirdness issues.
http://pastebin.com/NPViw84c

See the reload() that I've commented out? This works as long as I don't try to reload(). If I do, I get:

AbortError
return getIndexOrStore(ctx, store)[ctx.op](ctx.range || null, ctx.dir + ctx.uniq..

My original idea was to just rewrite the LI tags on the page when an entry is removed, but figured just refreshing the page was quicker and easier.

But the point is, I've been struggling with these two phenomenon for a long time now and I cannot seem to find a solution. Anybody here have any idea what is going on?

[David Fahlander]

Hi Tomi,

All strange behaviors relates to the asynchronic model of Dexie (and IndexedDB in general).

When you do 

db.tasks.add({task: inputValue.value, state: "incomplete", updated: "today"});

or

db.tasks.where("task").equalsIgnoreCase(task).delete();

, you cannot expect anything to be written in DB until the returned Promise has completed. What happens is just that a transaction to do the stuff is started and when completed you get a fulfilled Promise.

So instead, you should do something like this:

function commit() {
    var inputValue = document.getElementById("todo-task-input");
    db.tasks.add({task: inputValue.value, state: "incomplete", updated: "today"}).then(function() {
        // First here, something is indeed written to DB.
        // Just for fun, lets count all items in the tasks table:
        return db.tasks.count();
    }).then(function(count) {
        // ... and why not alert the result out:
        alert ("There are now " + count + " tasks recorded");
    });
}


function list_action_remove(ID) {
    var check = document.getElementById(ID);
    if(check.className.indexOf("trash") >= 0) {
    var task = convert_to_task(ID);
        db.tasks.where("task").equalsIgnoreCase(task).delete().then(function() {
            // Reload window first when task was deleted.
            window.location.reload();
        });
    }
}