We Keep Coding

Meteorjs edit button and removing from one list adding to other

This is my first project with meteor and I am a heavy newbie. Need help with this. Three questions. I want when I press the edit button to focus on text of a task and I can change it... something like this:
<button class="editItem">Edit</button>
and after that I can edit text of that li, this is the functionality:
editTask: function(id, todoItem){
Tasks.update({_id: id}, {$set: { title:todoItem }});
}
And I'm able to do it if I have input type field, but how to do that with a button (I want to turn ordinary text into input field).
Second question: I have two columns, To Do and Done:
<template name="task">
<li>
<span class="text">{{title}}</span></li>
<button class="completed">Completed</button>
<li><input type="text" name="task" class="edit"></li>
<button class="saveItem">Save</button>
<button class="cancelItem">Cancel</button>
<button class="editItem">Edit</button>
<button class="delete">Delete</button>
<input type="checkbox" checked="{{checked}}" class="completed">
</li>
</template>
<template name="taskDone">
<li>
<div>
<span class="text">{{title}}</span>
</div>
</li>
</template>
How can I hide completed tasks from To Do list and show up in Done list? Maybe display true or false when I press the button Completed but I cannot pin point the exact way.
I tried playing with checked state but that isn't what I need.

First off you have an incorrect number of <li> tags in your example code (you close the first li at the end of the span and then continue onwards as if it still were the same li).
Add a completed field to your collection, set initially to always "no" when you create a task.
What you want to do then, is set the span as contenteditable set to true with an onclick event. Do not use it as an helper as you currently do: use events! Something like here: Meteor - Is there a way to get div contenteditable two way data binding to work?
Or here in simple jquery: HTML5 contentEditable with jQuery
Then when you click save you need to set it as false and update the completed field to say "yes" or something the like.
Then the way you just simple filter the collection differently for the todo tasks and the completed ones: in the template task you will do something like Tasks.find({}, {fields: {"completed": "no"}});
In the template taskDone:
Tasks.find({}, {fields:{"completed": "yes"}});

Populate a hidden form field using the div of a drop menu (drop down menu is created using divs not select, option etc)

I have a form.
Please note I must use divs for creating the form drop down and not the select option method etc. It just has to be done that way. The code is below.
<form action="url.asp" method="get">
<div class="search-button"><i class="fa fa-search"></i><input type="submit" /></div>
<div class="search-drop-down">
<div class="title"><span>Choose Category</span><i class="fa fa-angle-down"></i></div>
<div class="list">
<div class="overflow">
<div class="category-entry" id="Category1">Category One</div>
<div class="category-entry" id="Category2">Category Two</div>
</div>
</div>
</div>
<div class="search-field"><input type="text" name="search-for" id="search-for" value="" placeholder="Search for a product" /></div>
<input type="hidden" id="ChosenCategory" name="ChosenCategory" value="CATEGORY1 OR CATEGORY2 (WHICHEVER SELECTED)" />
</form>
As shown in the code above I need to populate the hidden field value as per the chosen option which the user selects in the drop down.
I have used about 20 different variations of getElementById or onFocus functions but cannot get it to work.
The only thing I can get to work is the following JavaScript and it just populates the hidden field value with the first id ignoring completely which one has actually been selected(clicked) by the user;
var div = document.getElementById('DivID');
var hidden = document.getElementById('ChosenCategory');
hidden.value = div.innerHTML;
I'm running classic asp so if there is a vbscript way then great, otherwise if I have to use JavaScript to do it then as long as it does the job I'll be happy still.

A click handler on the options could be used to update the value.
No jQuery or any other external library is needed. Below is a working example. Of course, in your case the input element could be of type hidden, but I made it text here for the sake of demonstration.
//Add the click handlers
var options = document.getElementsByClassName('option');
var i = 0;
for (i = 0; i < options.length; i++) {
options[i].addEventListener('click', selectOption);
}
function selectOption(e) {
console.log(e.target);
document.getElementById('output').value = e.target.id;
}
div {
padding: 10px;
}
div.option {
background-color: #CCC;
margin: 5px;
cursor: pointer;
}
<div>
<div class="option" id="Category1">Category One</div>
<div class="option" id="Category2">Category Two</div>
</div>
<input type="text" id="output" />

You should be able to achieve what you're after with a fairly simple setup involving listening for clicks on two separate <div> elements, and then updating an <input> based on those clicks.
TL;DR:
I've put together a jsfiddle here of what it sounds like you're trying to make work: https://jsfiddle.net/e479pcew/5/
Long version:
Imagine we have 2 basic elements:
A dropdown, containing two options
An input
Here's what it might look like in HTML:
<div class="dropdown">
<div id="option-one">Option 1</div>
<div id="option-two">Option 2</div>
</div>
<input type="text" id="hidden-input">
The JavaScript needed to wire these elements up should be fairly easy, but let me know if it doesn't make sense! I've renamed things throughout to make things as explicit as possible, but hopefully that doesn't throw you off.
One quick thing - this is an incredibly 'naive' implementation of this idea which has a lot of potential for refactoring! However I just wanted to show in the most basic terms how to use JavaScript to make this stuff happen.
So here we go - first things first, let's find all those elements we need. We need to assign variables for the two different dropdown options, and the hidden input:
var optionOne = document.getElementById("option-one");
var optionTwo = document.getElementById("option-two");
var hiddenInput = document.getElementById("hidden-input");
Cool. Next we need to make a function that will come in handy later. This function expects a click event as an argument. From that click event, it looks at the id of the element that was clicked, and assigns that id as a value to our hiddenInput:
function valueToInput(event) {
hiddenInput.value = event.target.id;
}
Great - last thing, let's start listening for the clicks on specific elements, and if we hear any, we'll fire the above valueToInput function:
optionOne.addEventListener("click", valueToInput, false);
optionTwo.addEventListener("click", valueToInput, false);
That should get you going! Have a look at the jsfiddle I already linked to and see if it makes sense - get in touch if not.

Are you allowed to use JQuery in this project? It would make your life a lot easier. You can detect when a div is clicked and populate the hidden field.
This could do it:
$(document).ready(function() {
$('.category-entry').click(function() {
$('#ChosenCategory').val($(this).text()); }); });

checkbox is not clickable within nested ng-repeat

To get an idea of the setup I’m using in my application I set up this simplified example:
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="oConfigEntry in oConfiguration.oConfigEntriesColl">
<ul>{{oConfigEntry.sDescription}}
<li ng-repeat="oConfigSubEntry in oConfigEntry.oConfigSubEntriesColl">{{oConfigSubEntry.sDescription}}
<input type='checkbox' ng-model='oConfigSubEntry.bNoOption' />{{oConfigSubEntry.bNoOption}}
<ul>
<li ng-repeat='oConfigSubSubEntry in oConfigSubEntry.oConfigSubSubEntriesColl'>{{oConfigSubSubEntry.sDescription}}
<input type='number' placeholder='length' ng-model='oConfigSubSubEntry.dLength' />
<input type='number' placeholder='width' ng-model='oConfigSubSubEntry.dWidth' />
<input type='number' placeholder='height' ng-model='oConfigSubSubEntry.dHeight' />
<input type='checkbox' title='opt1' ng-model='oConfigSubSubEntry.bOpt1' />
<input type='checkbox' title='opt2' ng-model='oConfigSubSubEntry.bOpt2' />
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre ng-bind="oConfiguration | json"></pre>
</div>
see http://jsfiddle.net/ppellegr/4QABQ/
Unfortunately the problem I’m facing in the real application cannot be reproduced in the latter mentioned example.
The problem is that in the real application the checkboxes are not clickable. Clicking the checkboxes do not check them. The checkboxes remain unchecked.
The other way around If the corresponding model is initialized the checkboxes are checked but cannot be unchecked by clicking them.
Even plain checkboxes with no model assigned cannot be checked if they are placed within a nested ng-repeat.
e.g.
<input type="checkbox" />
Has anyone already noticed such a phenomenon?
additional observations:
The first click on the checkbox changes the value of the model.
Subsequent clicks do not change the value. The value of the model remains the
same.
While the first click on the checkbox changes the value of the
model, the checkbox itself remains checked/unchecked depending on the
inital value of the model.

My guess is that another element is positioned in such a way as to cover or overlap the checkbox, and that is preventing you from interacting with it. Assuming you have no inline styles applied to your markup, you can test this easily by disabling CSS in your browser (you may need to install an extension to do this, eg: How to disable CSS in Browser for testing purposes).
If you find that you can click the checkbox like that, you then need to debug your css to find the offending element. Use firebug or chrome developer tools to explore the markup and css.

In the real application the checkbox showing the described behavior is within a list that is enriched by a little jQuery feature making the list collapsible and expandable...
function prepareList() {
$('#ConfigContainer').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
}
$(document).ready(function () {
prepareList();
});
see http://jsfiddle.net/ppellegr/cP726/
In this example the described behavior can be reproduced...
The culprit line of code is obvious:
return false;
This stops propagation of event and obviously interferes with the checkbox...
Lesson learnt:
check whether javascript, jQuery or the like are interfering with angularjs...
consider writing an angular directive...

How to create a modal window using jquery and javascript to help a user make a choice

I need to create a modal window that contains a list of checkboxes. A user can select a checkbox (or several checkboxes). Depending on a user choise, a section(s) next to the list must appear or disappear OR change its opacity and ZOOM.
An example of what I need is below:
http://www.devart.com/dbforge/mysql/studio/ - here you can click the blue button in the sidebar (what product is right for me?)
Here is also similar example (but not exactly what I need) http://www.kaspersky.com/help-me-choose
So, I can create a modal in the way like this:
(if there are betters ways to do this, please tell me)
<script>
$(document).ready(function () {
$('.showmodal').on('click', function () {
$('.modal').fadeIn(1000);
});
$('.hidemodal').on('click', function () {
$('.modal').fadeOut(1000);
});
});
</script>
Then I can create a list of check boxes:
<div class="modal">
<div>
<b>What do you want to do?</b><br>
<input type="checkbox" name="option1" value="a1" checked>Question 1<br />
<input type="checkbox" name="option2" value="a2">Question 2<br />
</div>
</div>
Then I can creale a number of DIVs next to the checkboxes list and using jquery change its opacity when the mouse cursor is on top of the DIV... but
Q#1 HOW CAN I ANIMATE ITS ZOOM ? like in the first example.
Q#2 (the most important) HOW CAN I LINK...A CHECKBOX STATE WITH A SPECIFIC DIV? I mean, how can I show a specific div depending on what a checkbox is selected (or several)? What should I use: if else construction... or switch - case? Or something else ?
Thank you.

Use Twitter Bootstrap: modal
It's easy to use and save you from lots of work.
example as in: http://www.devart.com/dbforge/mysql/studio/
you could use jquery, suppose the images are:
<img src=".." id="img1" style="display: none;"/>
<img src=".." id="img2" style="display: none;"/>
Now the checkboxes:
<input type="checkbox" class="img1">
Now jquery:
$('input["checkbox"]').is(":checked"){
var img = $(this).attr("class");
$("#" + img).css("display","block"); //do your own stuff such as zoom..etc.. as you were saying
// add for uncheck, to hide the picture etc...
}

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});

Try this:
$('.table input:checkbox').not('div.checker input').uniform()