We Keep Coding

What is the simplest way of marking my "To-do" as complete?

I have a fiddle here: https://jsfiddle.net/419r62t8/1/
View.prototype.render = function (viewCmd, parameter) {
var that = this;
var viewCommands = {
showEntries: function () {
that.$todoList.innerHTML = that.template.show(parameter);
},
removeItem: function () {
that._removeItem(parameter);
},
updateElementCount: function () {
that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
},
contentBlockVisibility: function () {
that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
},
setFilter: function () {
that._setFilter(parameter);
},
clearNewTodo: function () {
that.$newTodo.value = '';
},
editItem: function () {
that._editItem(parameter.id, parameter.title);
},
editItemDone: function () {
that._editItemDone(parameter.id, parameter.title);
}
};
viewCommands[viewCmd]();
};
View.prototype._itemId = function (element) {
var li = $parent(element, 'li');
return parseInt(li.dataset.id, 10);
};
View.prototype._bindItemEditDone = function (handler) {
var that = this;
$live('#todo-list li .edit', 'blur', function () {
if (!this.dataset.iscanceled) {
handler({
id: that._itemId(this),
title: this.value
});
}
});
$live('#todo-list li .edit', 'keypress', function (event) {
if (event.keyCode === that.ENTER_KEY) {
// Remove the cursor from the input when you hit enter just like if it
// were a real form
this.blur();
}
});
};
View.prototype._bindItemEditCancel = function (handler) {
var that = this;
$live('#todo-list li .edit', 'keyup', function (event) {
if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true;
this.blur();
handler({id: that._itemId(this)});
}
});
};
View.prototype.bind = function (event, handler) {
var that = this;
if (event === 'newTodo') {
$on(that.$newTodo, 'change', function () {
handler(that.$newTodo.value);
});
} else if (event === 'itemEdit') {
$live('#todo-list li label', 'dblclick', function () {
handler({id: that._itemId(this)});
});
} else if (event === 'itemRemove') {
$live('#todo-list .destroy', 'click', function () {
handler({id: that._itemId(this)});
});
} else if (event === 'itemEditDone') {
that._bindItemEditDone(handler);
} else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler);
} else if (even === 'itemComplete') {
that._bindItemComplete(handler);
}
};
EDIT: I am thinking I can bind a new function here to add an strike-through to the "completed" items on the todo list. Completing them on single click or by adding a checkbox for completing it.
I've got the CSS but I'm lacking the JS to tie it all together.
I am attempting to create a simple strike through on-click to show when an item has been marked as completed. Any help would be much appreciated.

You're close with the CSS, but the best bet is to replace the checkbox with an image (svg if you can) when it is checked.
text-decoration: line-through will not help here -- this only works with text.
Often the checkbox's label will get the image and the checkbox itself will be hidden (a label can be clicked and perform the same actions as the input/checkbox itself)
Check this Answer out and see if it'll help you along your path:
Pure CSS Checkbox Image replacement

Try adding a jquery event listener to the id of the checkbox. Tell id to toggle the css on click and you should be good to go. Do you know how to achieve that?

Jquery, select dropdown option on Event

I have a Jquery with event keyup.
It select dropdownList(CityId) option, which text is liked/samme as a user write in inputbox(finpost).
The problem is that only work once.. I cant see whats wrong ?!
Help
$(document).ready(function () {
$('#finpost').keyup(function ()
{
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1)
{
$(this).attr("selected", 'true');
return false;
}
});
});
});

This work only once because your list can have only one selected option per time, but in your script logic you are setting attribute selected to true every time you find a matching without re-initializing others options
I think you should be good to go if you try this
$(document).ready(function () {
$('#finpost').keyup(function ()
{
var matchingFound = false;
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1 && !matchingFound)
{
$(this).attr("selected", 'true');
matchingFound = true;
}
else {
$(this).attr("selected", "false");
}
});
});
});

Now its working. The problem wass this linie:
$(this).attr('selected', true);..
I changed it to $(this).prop('selected', true);
and its work
$(document).ready(function () {
$('#finpost').keyup(function () {
$("#CityId > option").each(function () {
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1) {
$(this).prop('selected', true);
return false;
}
});
});
});

how to loop the program

the below code works for one time only.I dont know how to execute for continuos time.
jQuery(document).ready(function () {
jQuery(".checkboxes").hide();
//toggle the componenet with class msg_body
jQuery(".Select").click(function () {
jQuery(this).next(".checkboxes").slideToggle(500);
if ($(".select").text() == "+") {
alert('hi');
$(".select").html() == "-"
}
else {
$(".select").text() == "+";
}
return false;
});
});
Any help will be appreciated.

Considering ".imgContainer" is an <img> tag :
$(function () {
$(".checkboxes").hide();
//toggle the componenet with class msg_body
$(".select").click(function () {
$(this).next(".checkboxes").slideToggle(500);
if ($(".select").text() == "+")
$(".imgContainer").attr("src", "/images/logo1.png");
else
$(".imgContainer").attr("src", "/images/logo2.png");
return false;
});
});

How to add a class to a div on load?

Here's what I'm using
$(document).ready(function() {
$(".accept").change(function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
});
});
It works after you change the value, but how do I add the style to the div on load to disable?
Do I simpily juse call
$(".generateBtn").addClass("disable");
Or is there a more elegant technique

How about just triggering a change ?
$(document).ready(function() {
$(".accept").on('change', function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
}).trigger('change');
});
I'm guessing you meant to write removeClass and not remove, if so :
$(document).ready(function() {
$(".accept").on('change', function () {
$(".generateBtn").toggleClass('disable', this.value=='0');
}).trigger('change');
});

Easy modification to jQuery code to make use of more than one textbox

How to change the following code to make use of all my 4 textboxes with id extra1, extra2,persons and tables?
$(document).ready(function () {
$('#extra1').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});

$('#extra1').blur(function () {
to
$('#extra1, #extra2, #persons, #tables').blur(function () {

The code modification would be:
$(document).ready(function () {
$('#extra1, #extra2, #persons, #tables').blur(function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});
But, why not give all of them a class, and use that class as the selector? That way, you can easily add elements later without changing your Javascript.

Use jQuery delegate which will bind only one event handler but will act only on the element which triggers the event. Try this
Wokring demo
$(document).ready(function () {
$('formSelector').delegate('input[type=text]', 'blur', function () {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});