We Keep Coding

Get unique data about clicked button in Phonegap

I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?

I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}

How to pass child object from ng-repeat to ng-click

I wish the previous questions had answered this problem, but it seems like I'm facing something different here, unless I'm missing something..
I understand ng-repeat creates a child object and from that we can call things such {{note.id}}.
My problem is living in my attempt to pass that note.id to ng-click
Below the code with attempts and errors.
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group">
<a href="#notes/{{note.id}}" class="list-group-item" ng-repeat="note in notes" >
{{note.title}}
<button ng-click="deleteNote(note.id)" class="btn btn-danger" >x</button>
</a>
</div>
</div
Inspecting the elements we have
<a href="#notes/5" class="list-group-item ng-binding ng-scope" ng-repeat="note in notes">
hello update
<button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
</a>
And in case I try something that would look more like the angularjs sintax
<button ng-click="deleteNote({{note.id}})" class="btn btn-danger" >x</button>
In that case my element inspection brings up the right id ...
<button ng-click="deleteNote(5)" class="btn btn-danger">x</button>
Bu I have an error
Error: [$parse:syntax] http://errors.angularjs.org/1.2.19/$parse/syntax?p0=note.id&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=14&p3=deleteNote(%7B%7Bnote.id%7D%7D)&p4=note.id%7D%7D)
I could not tell what the error is from the message or the link it takes me to
Syntax Error: Token 'note.id' is at column {2} of the expression [{3}] starting at [{4}].
code for the controller
.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){
$scope.notes = notesService.notesObjectInService;
$scope.addNote = function(){
if ($scope.title === "" ) {
return;
}
notesService.create({
title: $scope.title
body:$scope.body
});
$scope.title= '';
$scope.body= '';
};
$scope.deleteNote = function(id) {
notesService.delete(id);
notesService.getAll();
};
}])

http://jsfiddle.net/p2t1waxp/2/
Your first attempt
<button ng-click="deleteNote(note.id)" class="btn btn-danger">x</button>
actually works, doesn't it?
It just doesn't render the id when you inspect it, but it process it right in the controller, as you can see in the console

I'm sorry but turns out that the standard way to do things as supposed works just fine. ng-click(note.id) ..
I had not implemented completely my function yet because I was debugging with Chrome tools Inspecting the element and I expected that the id element should come up in the inspection. Once it didn't as I showed in the code above I assumed it was wrong. But by finishing implementing the service and the back end it actually works just fine.
It's something I didn't know about the developer tools. What i still don't understand is why the id doesn't show up in the html inspection like href="#notes/{{note.id}}" ....I am assuming it has to do with the {{}} notation, but I'd have no precise answer for it. If someone can explain it'd help with my knowledge of angular and html as I'm new to programming.
Thanks and sorry for silly mistake.

Understanding the usage of get() in my sorting script

I recently found a code snippet that I would really like to understand:
var buttons = $('#fruit,#vegetable,#meat').click(function() {
$(this).toggleClass('active');
var classes = buttons.filter('.active').map(function() {
return this.id;
}).get().join(',.');
$('div.fruit,div.vegetable,div.meat').hide().
filter('.' + (classes || 'none')).show();
});
The HTML code :
<div style="float:right; padding:25px;">
<button id="fruit" class="active"><span>fruit</span></button>
<button id="vegetable" class="active">vegetable</button>
<button id="meat" class="active">meat</button>
</div>
<div>
<p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p>
<div class="fruit">
<p>apple</p>
</div>
<div class="vegetable">
<p>pumpkin</p>
</div>
<div class="vegetable">
<p>okra</p>
</div>
<div class="fruit">
<p>orange</p>
</div>
<div class="meat">
<p>beef</p>
</div>
<div class="fruit vegetable">
<p>tomato</p>
</div>
</div>
The fiddle is here.
I do understand how all the methods work in jQuery like toggleclass, filter and map, I also understand how join works in JS, but in this particular example, I am not able to figure out how get() is working or rather what is it's usage in the script is.
I went through the jQuery documentation for get() and I came across this method for the first time; to me, it seems it's very much similar to eq() in jQuery, but I am still not able to figure out why exactly get is being used in my example.
Can somebody explain this to me ?

.get is used here, because .map returns a jquery style object which contains some functions and information about the contained data. But in this scenario only the values stored within the object (the class names of the active buttons) are wanted. .get is used to get an array containing the raw values and with .join(",.") the values from the array get concatenated to a string. This string then get's used to show all div's that should be active according to the selected buttons.

KnockoutJS: How to avoid running a viewmodel function on applyBindings?

I'm a little puzzled by some code I plunked together that doesn't behave quite as I'd expect.
I'm sure I'm doing something wrong (and given the late hour here, it might be something simple), but I'm looking for some clarity on why this happens.
I'm using:
jQuery 1.10.2
Knockout 2.3.0
Bootstrap 3.0.3
The Problem
I define a function in my ViewModel, which sets an observable to a certain value.
This is not called from anywhere else in my code.
I define a data-bind="click: AddAnnouncement" binding on a button that's part of a button group.
When ko.applyBindings(vm) is called, the AddAnnouncement function fires, giving me an undesired result long before I click on anything.
The Code in Question
Can be found in a JSFiddle at: http://jsfiddle.net/SeanKilleen/v8ReS/.
Essentially, I have the following JavaScript code:
var MyNamespace = MyNamespace || {
ViewModel: function(){
'use strict';
var self = this;
self.AddingAnnouncement = ko.observable(false);
self.AddAnnouncement = function(){
self.AddingAnnouncement(true);
};
self.Start = function(){
self.AddingAnnouncement(false);
};
self.Start();
}
};
var vm;
$(document).ready(function(){
'use strict';
vm = new MyNamespace.ViewModel();
ko.applyBindings(vm);
//do something with jQuery? Bind a VM?
});
My binding code is also pretty elementary (I thought):
<div class="container">
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>
</button>
</div>
</div>
<div class="row" data-bind="visible: AddingAnnouncement() == true">
<h1>Add a new announcement</h1>
</div>
</div>
What I think it's doing
I think the code in question is doing the following:
Defining a namespace called MyNamespace (albeit probably not in the best way; this may be part of the problem?)
Defining a ViewModel object inside the namespace
Giving the ViewModel object an observable called AddingAnnouncment and a function called AddAnnouncement, which sets AddingAnnouncement to true.
Defines a Start method which ensures that AddingAnnouncement is set to false by default;
Calls the Start method as the last step in its initialization.
What am I Missing Here?
I think I'm not grasping some standard behavior of JavaScript or something about the way knockout binds models, but it seems like when applying the bindings, knockout executes all of the functions, even for the click bindings. However, that doesn't make sense to me and so I'm betting I'm wrong.
Someone enlighten me? Thanks!

Whooops! The answer to that question turned out to be right under my nose; indeed, all I had to do was write that entire darn question before I saw it. :)
The problem is with my binding:
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement()">A</abbr>
Note a very important distinction: AddAnnouncement(). The () matters quite a bit in this case.
When knockout assigns its binding, it does so by directly referencing what you enter. Since I entered AddAnnouncement(), it assigned the binding to the output of the function that had been run once, rather than the function itself which would be executed at a later time.
The best way to do it would have been to use AddAnnouncment, without paranetheses, like this:
<button type="button" class="btn btn-default"><abbr Title="Announcement" data-bind="click: AddAnnouncement">A</abbr>
This does not execute the function upon applying bindings.
While I forgot to avoid such a simple mistake, I hope it saves someone else time in the future. The working JSFiddle can be found at http://jsfiddle.net/SeanKilleen/v8ReS/4/.

We usually confuse when to use parentheses () when we bind View with ViewModel.
As when you bind AddAnnouncement function, you directly bind with function call like AddAnnouncement(). That why the AddAnnouncement function call when you bind using ko.applyBindings even though we didn't click the button, the function call already fire.
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default">
<abbr Title="Announcement" data-bind="click: AddAnnouncement()">
A
</abbr>
</button>
</div>
</div>
so we change as below
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default">
<abbr Title="Announcement" data-bind="click: AddAnnouncement">
A
</abbr>
</button>
</div>
</div>
working jsfiddle

javascript - remove element

My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of the whole div:
<script>
function remove(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
</script>
<div id="intro" class="jumbotron">
<h1>Your Offline Web Dictionary!</h1>
<p class="lead">
<div class="controls">
<input class="span7 " type="text" placeholder=" " name="key">
</div>
<div>
<button class="btn btn-large btn-success" onclick="remove(intro)">
Dictionary Search
</button>
</div>
</div>
JSFiddle

The problem is that the button element has a remove property so that is called instead of your remove function. And also the string thing.
<button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);">
Search
</button>
http://jsfiddle.net/HMEVd/76/

Two problems. Firstly, intro should be a string, not an identifier, so use remove('intro') in your onclick.
Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:
element.parentNode.removeChild(element);

intro should be sent to the function as a string rather than a variable, i.e, 'intro'
Also, you must rename your function, for example, removeById instead of remove. Then it works perfectly.
The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into it.)
function removeById(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
...
<button class="btn btn-large btn-success" onclick="removeById('intro')">