KnockoutJS data-bind: click from javascript click - javascript

Let us say we have a table as so
<table>
<tbody data-bind="foreach: orderItems">
<tr class='datarow'>
<td data-bind="text: whatever"></td>
<td><a id='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a></td>
</tr>
</tbody>
</table>
so when I do
document.getElementsById('anchor').click();
the alert triggers but $root.save doesn't. Any ideas?

Try This
<script type="text/javascript">
var viewModel = {
Save: function() {
alret("Hello");
}
};
ko.applyBindings(new MyViewModel());
</script>
<table>
<tbody data-bind="foreach: orderItems">
<tr class='datarow'>
<td data-bind="text: whatever"></td>
<td><a id='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a></td>
</tr>
</tbody>
</table>

I'm seeing 2 problems with the code:
getElementsById - are you sure this method exists?
Each ID should only exist once on the page. When you want to find an element by it's ID, you can call getElementById (singular), and it will return an element. Because only one element should have a given ID, there is no getElementsById (plural) method.
Your foreach binding combined with a hardcoded 'anchor' id will result in multiple elements with an ID of anchor. This is a no-no. Perhaps use a class of 'anchor' instead of an id of 'anchor'.
<a class='anchor' href='#' data-bind='click: $root.save' onclick='alert("a");'>Text</a>
So my guess is that getElementsById is not returning anything to click on.
click()
Even if you were able to get an element back from the getElementsById, there is no click() method on those elements.
As an alternate, you can use jQuery to get the elements, and with a jQuery object you can call the click() method. Or you could take an element returned from getElementById, wrap it in jQuery, then call click().
$('.anchor').click();
Here is a working example: http://jsfiddle.net/tlarson/t4yZL/1/

<table>
<tbody data-bind="foreach: orderItems">
<tr class='datarow'>
<td data-bind="text: whatever"></td>
<td><a id='anchor' href='#' onclick='alert("a"); viewModel.save(ko.dataFor(this));'>Text</a></td>
</tr>
</tbody>
</table>
Assume that you stored your viewModel elsewhere.
ko.dataFor(element) - returns the data that was available for binding against the element
You may have a look at this link

Related

Using JavaScript variables in a Thymeleaf th:each

I am trying to build a table using th:each and have the whole row of the table clickable as a link through JavaScript.
<table>
<th:block th:each='user : ${list}'>
<script th:inline="javascript">
var userid = [[${user.id}]];
</script>
<tr onclick="location.href='user?id='+userid">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</th:block>
</table>
However, the variable always refers to the latest value and not the one it was when the row was created. Is there a way to do that? Or maybe a different solution to what I'm trying to do?
No need for the th:block, you can simply put the th:each on the tr.
To accomplish the click, I recommend putting the id in a data attribute, and retrieving it in JavaScript. This should work for you:
<table>
<tr th:each="user : ${list}"
th:data-id="${user.id}"
onclick="location.href = 'user?id='+this.getAttribute('data-id')">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</table>
You can avoid using JavaScript by adding an <a> element to each table cell (Inspired by https://stackoverflow.com/a/17147909/40064):
<table>
<th:block th:each='user : ${list}'>
<tr>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.firstName}"></a></td>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.lastName}"></a></td>
</tr>
</th:block>
</table>

How to i change the class name inside <td>

<table id="results">
<thead>
<tr>
<td>1st</td>
<td class="horse1"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse2"></td>
</tr>
<tr>
<td>1st</td>
<td class="horse3"></td>
</tr>
</thead>
</table>
i used this way it didnt worked .
document.getElementById("result").className=horseId;
horseId is an variable and contains value
and there are multiple classes insede so how do i select a specific class to change.
You missed two things; first, you attempted to target by ID result, when you need results. Second, you need to wrap the desired class names in quotes. You can use a variable for the assignment, assuming the variable maps to a string.
It's also worth mentioning that your existing class horse1 is several nodes down from your target ID results. I assume this is the element you're trying to change.
To change the class of the #results element, you can use document.getElementById('results').className = horseId;.
To change the class of the .horse1 element, you can use document.getElementsByClassName('horse1').className = horseId;.
Here's an example of the latter:
var horseId = 'rainbow_dash';
document.getElementsByClassName('horse1').className = horseId;
console.log(document.getElementsByClassName('horse1').className);
<table id="results">
<thead>
<tr>
<td>1st</td>
<td class="horse1"></td>
</tr>
</thead>
</table>
Hope this helps! :)
It should be "results"
document.getElementById("results").className=horseId;

How can I access the title or text of an "a" nested within a "td" using JavaScript?

I have a calendar where the day cells are clickable "td" elements. Inside each is an "a" that has a title. I need to use this title in a JavaScript function that is called when any of the "td" elements are clicked. I had to disable the PostBack for all "a" elements
Here is code for one of the cells:
<td align="center" style="width:14%;">15</td>
I just need to access the 15 text technically. I can get the month elsewhere.
Is this possible using JavaScript?
Using jQuery for this would be a pretty good idea since you can select elements pretty conveniently. With jQuery you'd use:
$('td a').attr('title');
If you still want to use pure Javascript, you can select the title of the element by using:
document.querySelectorAll('td a')[0].title;
In the end, they both get the job done but the jQuery code is shorter.
So you'd do something similar to this with jQuery.
$('td a').on('click', function() {
console.log($(this).attr('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
<tb>
<tr>
<td>
Hey
</td>
</tr>
<tr>
<td>
Oh
</td>
</tr>
<tr>
<td>
Goodbye
</td>
</tr>
</tb>
</th>
</table>
It's not exactly clear to me what you're after, but if you can control the call, then including this in the call gives you a reference to the element that called the listener, e.g.
<a href="javascript:__doPostBack('ctl00$MainContent$Calendar2','6314', this)"...>
Then in the listener, you have a reference to the element and you can get its title property directly, e.g.
function __doPostBack(arg0, arg1, element) {
var title = element.title;
// title is the value of the element's title property
}
I had to disable the PostBack for all "a" elements
I don't understand what that means. If it means you don't want to use __doPostBack to get the title and want to add a listener to each of the links, then you can do that quite simply too:
window.onload = function(){
[].forEach.call(document.querySelectorAll('td a'), function(a){
a.addEventListener('click', showTitle, false)
});
};
function showTitle(){
console.log(this.title);
}
<table>
<tr><td><a href="#" title="foo">foo
<tr><td><a href="#" title="bar">bar
<tr><td><a href="#" title="fum">fum
</table>

knockout html binding with another binding inside

I'm using knockout to dynamically loading content into parts of the page, using the HTML binding.
the problem is that the html I want to bind has to do call a function onclick and I need the information about the target and the data that knockout easily send.
something like this:
myFunction($parent, $data)
HTML:
<table>
<tbody data-bind="foreach: rows" >
<tr>
<td data-bind="html: rowValue">this will be a link</td>
</tr>
</tbody>
</table>
Later I set the value to be a link with a knockout binding inside:
rowValue("<a href='#' data-bind=click:alert('hello')" + result.Data + "</a>");
Please check the fiddle here to see the full working code.
You can see the difference between the 2 lines I wrote, if I do a javascript onclick it works, but obviously ko is missing a late binding.
I've seen many questions about this but can't find one with a definitive answer.
I want to do this with KO, how can this be accomplished?
with templates maybe?
KO applies bindings when you call ko.applyBindings.
So if you modify the dom after applyBindings has been called. KO won't be aware of the new dom element.
You can use template this way :
<table>
<tbody data-bind="foreach: sitesTable.rows" >
<tr data-bind="foreach: row">
<td data-bind="template: 'myTemplate' "></td>
</tr>
</tbody>
</table>
<br/>
click here
<script id="myTemplate" type="text/html">
click
</script>
edit by Maurizio. Use this fiddle as the other linkseems to be broken:
See fiddle

Setting <td> value using jquery

I have the div structure shown below. For the second <td> in the table i want to replace with a hyperlink whose href attribute is stored in the variable myLink.
How can i do this with jquery ?
Please help.
Thank You.
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<h2 class="mainTitle">Transfer Membership</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
You can do something like this:
// you said this was already set
var myLink = 'http://stackoverflow.com/questions/2761234';
var $a = $('<a>').attr('href',myLink).text('My Link!');
$('.pbHeader td:eq(1)').empty().append($a);
This uses the :eq() selector to grab the second TD underneath a .pbHeader (:eq is zero based, so 0 is the first element, 1 is the second element). It empties your and appends the generated <a> tag inside of it.
You could also do this:
$('.pbHeader td:eq(1)').html('My Text!');
Which sets the innerHTML of that <td> to be your "link"
jsbin preview

Categories