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!
Related
I want to create tooltips with qTip but they have a lot of ridiculous examples on their page that is waaaaaaaaaaay to complicated.
I want something like:
<span qtip="This is the text in my tooltip">This text has a tooltip</span>
is that possible?
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Meta code:
foreach Customer in List<Customers>
{
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
}
Is this possible with qtip or is there something else that can generate nice looking tooltips that works similar to the above?
Thanks for all help.
The docs suggest you should be able to use the following JS:
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
This should grab all elements with a qtip attribute, and apply qTip to them.
Though I'm curious what you mean by
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Are you saying your list of customers is added to dynamically without reloading the page? If so please show where that happens.
For safety you should really use $(document).ready if your customer list doesn't change.
Here's an example based on the question:
$(document).ready(function() {
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">
<table>
<tbody>
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
</tbody>
</table>
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.
I've got some KnockoutJS code working - it pulls in a list and binds it to a table.
For the table-data which displays the name, I would like that to be an <a href=...>, but not sure how. The name is still displayed. But you can click on it.
Here's my current code:
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name()"></td>
<td data-bind="text: price()"></td>
<td data-bind="text: endsOn()"></td>
</tr>
</tbody>
nothing too crazy.
I have another property called url which contains the full http://blah URL to direct the users to. Also, I would like a new tab to open up.
Any suggestions?
You have to remove data-bind attribute from td tag and put a with attr binding inside td:
<tbody data-bind="foreach: items">
<tr>
<td><a data-bind="text: name, attr: {href: url}" target="_new"></a></td>
<td data-bind="text: price"></td>
<td data-bind="text: endsOn"></td>
</tr>
</tbody>
P.S. You don't have to put () after property name in data-bind attribute if you don't construct expression.
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
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 %> }" />