Develop Reference

knockout attribute data binding not working

When I just data-bind one of the attributes, they work. But when I combine them with attr, they don't work. Knockout 3.4.2
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="attr: {click: $parent.onClick, text: marker.title}"></button>
</td>
</tr>
</table>
marker.title just shows a string, and onClick opens an info window in google maps.

Your binds should be made like so
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="click: $parent.onClick, text: marker.title"></button>
</td>
</tr>
</table>
First of all the text binding should NOT be withing the attr tags, as it is an internal bind used by knockout to update the content of your element and it is expected to work like that.
Now for the click handler, the above is the correct way to attach a click handler, maybe you could get away with an attr: { onClick : 'MyFunc'} but i both doubt it and dont recomend it!

Angular X-Editable makes editable field appear in next table cell

I'm currently trying to implement X-Editable in my Angular project. What I have is a table, with the possibility to add and delete entries and I want to be able to do edit them as well. What I have is the following:
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="users in $ctrl.users"> //user should be editable
<td>
{{$index + 1}}
</td>
<td editable-text="users">
{{users}}
</td>
<td>
<div class="btn-group">
<span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-model="$ctrl.addMe"/>
<button ng-click="$ctrl.addUser()">Add</button>
<p id="errormessage">{{$ctrl.errortext}}</p>
JS:
class UserlistController{
constructor(){
this.users=["John","Peter","Julia"];
this.errortext="";
}
addUser(){
this.errortext="";
if(this.users.indexOf(this.addMe)==-1){
this.users.push(this.addMe);
}else{
this.errortext="The user does already exist!";
}
}
removeUser(user){
this.users.splice(user,1);
this.errortext = "";
}
}
export default UserlistController;
Editing the cell is even possible, so clicking on the cell, entering another value and then clicking on save does its job, but there is one problem: The input field that appears, appears in the next table cell, so it completely messes up the table. Does anybody happen to know, why this happens and how to fix it? You can see what it looks like here. So the x-editable cell gets to the "Action" column and the trash gets out of the table.. Any ideas?

Can't realize how you got the editable-text directive working on a td since to work properly it requires to be added to an anchor (a) tag. Therefore, I think that's what you were missing.
Just tweak your code a bit by adding the directive on an a tag instead:
<td>
<a href="#" editable-text="user">
{{user}}
</a>
</td>
Demo
Update
Here is a custom directive to accommodate the desired behavior as you mentioned in the comments. This version enables you to conceal the text itself behind the form where editing it is possible.

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.

jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')

You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.

You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

Select cell in html table generated by foreach

please help me with knockout.js code
I try select element in table by id and change it's css style, but all rows have same id and I can't using function getElementById. How I can do this simple thing ?
<tbody data-bind="foreach: times">
<tr>
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 0)> </td>
....
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 19)> </td>
<tr>
</tbody>

Try to use such code:
<tbody data-bind="foreach: times">
<tr>
<td data-bind="attr: {id: $index()}, click: $root.select.bind($data, $index(), 0)></td>
<tr>
</tbody>
Read more about attr binding here: http://knockoutjs.com/documentation/attr-binding.html

Id's should always be unique. Assign the same class to all elements you're interested in and use a bit of jquery:
document.getElementsByClassName('class_name')
EDIT: Good point. I was originally going to suggest using jquery and then remembered this function. If you are using jquery library, you can also try this:
$('.class_name').each(function(index) {
...do something...
});
EDIT: to answer your question, there are a few ways to do this:
$('.class_name').attr('id', new_id)
or
$('.class_name').addClass('class_name')
depending on what exactly you're trying to do

Best way to pass parameters from server objects to JavaScript

I render a View with a table in it. Each row of the table is an object that could be edited. So, the last column of this table has a bunch of "EDIT" buttons. When one of these EDIT buttons is clicked, JavaScript function must pick up the Id of the object represented by current row. Ultimately, I would like to end up with a clean HTML: no "onclick", "onmouseover" attributes and no custom made-up attributes. Below I have 2 examples that I'm not thrilled with. Any good ideas?
Example 1:
View.aspx
<td>
<input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" />
</td>
JavaScript
function JSFunction(id)
{
//some code that does whatever with id
}
Example 2:
View.aspx
<td>
<input type="button" value="EDIT" customAttribute="<%: ObjectId %>" />
</td>
JavaScript
$('input[type=button]').click(function() {
var id = this.attr('customAttribute');
//some code that does whatever with id
});
P.S. If you could come up with a better question title, please share as well :)

One way I handled this in the past is to use the html5 data-attribute. Which is picked up by versions of jQuery 1.4.3 and above.
<table>
<tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'>
<td>
Row Id 1
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'>
<td>
Row Id 2
</td>
<td>
<input type="button" value="Edit"/>
</td>
</tr>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
Then in your jquery you can do the following:
$("input[type=button]").click(function(){
var rowInfo = $(this).parents("tr.row").data("rowInfo");
//Do something with rowInfo.Id;
});
By using the data attribute you can have a rich json object that could contain more information than just an attribute. Plus you only have to declare one data-attribute to hold all relevant information.
Example of this working on jsfiddle.

The way I do it is I have the server render the id to the <tr> tag, you could either make up your own attribute or store it in the id attribute. Then if you have a edit button inside a td you just write jQuery to find the id stored in the <tr> tag.
html:
<tr myId="1">
<td>
<input type="button" value="EDIT" />
</td>
</tr>
jQuery:
$(function() {
$("input[type=button]").click(function() {
var id = $(this).parent().attr("myId");
});
});
Although I usually assign a class of "edit" to my edit buttons rather than selecting them by their type (as I have a save button on the page).

I would use the jQuery metadata plugin as then data can be embedded in a number of different ways onto any element. The usual way is to add it to the class like this:
<input type="button" class="button { objectId : <%: ObjectId %> }" />