jquery live click event not working in IE8 - javascript

I'm using the following code, and it works fine in all browsers I've seen, IE9 is fine but then I come to IE8 and it doesn't work at all.. just for reference the #cal_popup_table element is dynamically added to the page..
$("#cal_popup_table tbody tr td a").live('click', function() {
$('.datepick-cmd-today').text(from_month + ' ' + from_year);
var test = from_yeartest + '-' + from_monthtest + '-' + from_daytest;
var test_new = test.split("-");
var today = test_new[0] + '-' + test_new[1] + '-' + test_new[2];
$("#arrival").val(today);
});
Could anyone shed some light on why it might not be working properly, the code inside the function doesn't matter as a simple alert() doesn't work either.. the click event just never fires at all
UPDATE - this is the code (trimmed out some content etc) that is inserted into the page
<div id="cal_popup" class="datepick-popup" style="position: absolute; left: 901px; top: 219px; ">
<div class="datepick" style="width: 195px; ">
<div class="datepick-nav">
<
December 2012
>
</div>
<div class="datepick-month-row">
<div class="datepick-month">
<table id="cal_popup_table">
<tbody>
<tr>
<td>
5
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Try by removing the tbody:
$("#cal_popup_table tr td a").live('click', function() {
Some browsers add <tbody> to automatically-generated tables, but IE 8 does not.
That's why JS failed to execute your code in IE 8.

Use on()
$("#cal_popup_table").on('click', 'tr td a', function() {
alert('a');
});

I just checked your code in ie8 and its working absolutely fine no problems whatsoever, i have done something in a fiddle: http://jsfiddle.net/J8ysn/1/
This is the jQuery code i have tried.
$('<table border="1"><tbody><tr><td></td></tr></tbody></table>')
.appendTo('body')
.attr({"id":"cal_popup_table"});
$('clik').appendTo("#cal_popup_table tbody tr td");
$("#cal_popup_table tbody tr td a").live('click', function() {
alert('live clicked');
});

Related

dynamic td blocking tr element

I have a table that if I append the rows and table data the tr element content seems to be blocked I cannot even edit it from the console after it is created I think its blocked by the td
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("table#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).data('id'));
});
if I don't append the tr and td I can replace the td click selector with tr and it works, but if I append it nothing I do to the row has any affect even if I add css I can see it if I inspect it but it does not show or work like the cursor:pointer, but if I put them on the td element dynamically it works. any suggestions greatly appreciated.
new working code
for (i=0;i<res.data.length;i++) {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='"+res.data[i].id+"'>" +
"<td>"+res.data[i].productNumber+"</td>" +
"<td>"+res.data[i].description+"</td>" +
"<td>"+res.data[i].productSize+"</td>" +
"<td>"+res.data[i].boxLength+"</td>" +
"<td>"+res.data[i].boxWidth+"</td>" +
"<td>"+res.data[i].boxHeight+"</td>" +
"<td>"+res.data[i].avgBilled+"</td>" +
"<td>"+res.data[i].productWeight+"</td>" +
"<td>"+res.data[i].boxQty+"</td>" +
"</tr>"
);
}
$("table#product_table tbody").on("click", "tr", function(){
console.log($(this).data());
});
The append is not properly formed when rendered. Please inspect the elements, you can find that the td is not inside the tr element.
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'><td>data21</td></tr>")
$("table#product_table tbody").on("click", "td", function () {
console.log('Working.');
console.log($(this).parent().data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody></tbody>
</table>
Append doesnt not work in that way. When you append an element you only name it like ; append('div') and it opens and closes div automaticly. So you have to create element tr then add its attributes, after that you create td and set its innerHTML. Append td into tr and append tr into table. Dont use /tr in append. Append puts dynamicly created element into target element's end. Best way to create an element is document.createElement('tr');. Hope this helps
Your event's 'this' is 'td', but you are trying to reference 'tr' which is a sibling of 'td', not a child. I changed to $(this).siblings('tr').data('id') and it works. Please see the snippet.
$(function() {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).siblings('tr').data('id'));
});
});
#product_table {
border: 1px #ccc solid;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>

A tr element in a table is discarding the top CSS property applied to it

I am working on a project in which i have code structure as -
<div id="scroll" class="datagrid" style="position: relative">
<table id="datatable" class="datatable">
<thead id="header" class="header">
<tr>
....
</tr>
<tbody id="content">
<tr>
....
</tr>
</tbody>
For the tr in thead, we had an expression as -
.header tr
{
top: expression(document.getElementById('datagrid').scrollTop);
}
In IE8, this expression was evaluated and the top was set so that header was always visible.
However since expressions dont work in IE11, hence we can write a JavaScript function for the purpose.
However in IE11,top property doesnt work as expected. Even after it is applied, the header is not visible.
Can someone please suggest what might possibly be going wrong?
PS: The Javascript i tried was :
document.getElementById("header").getElementsByTagName('tr')[0].style.top = document.getElementById('scroll').scrollTop ;
CSS expressions only work in IE8 and below.
You can use a Javascript function to replace the expression like this:
var headerTR = document.getElementById("header").getElementsByTagName("tr");
for(var i = 0; i < headerTR.length; i++) {
headerTR[i].style.top = document.getElementById('datagrid').scrollTop;
}
Hope that helps.
style.top takes a string value. Try adding +"px" to your expression.
document.getElementById("header").getElementsByTagName('tr')[0].style.top = document.getElementById('scroll').scrollTop+"px";
Also, make sure you are running the expression every time a scroll occurs. You could use onscroll="someFunction()", for example.
<div id="scroll" class="datagrid" style="position: relative" onscroll="scrollFunction(this.id)">
...
<script>
function scrollFunction(scrollId) {
var theHeader = document.getElementById('header').getElementsByTagName('tr')[0];
var scrollBoxTop = document.getElementById(scrollId).scrollTop;
theHeader.style.top = scrollBoxTop + "px";
}
</script>

Navigate in divs with table Jquery

I try to navigate in a table. Without the table it works, but with nope!
here's the code :
<table>
<th><div class="section selected">E1</div></th>
<th><div class="section">E2</div></th>
<th><div class="section">E3</div></th>
</table>
<br />
CLICK
then
$('#button').click(function(){
$('.selected + .section, .section:eq(0)')
.last().addClass('selected')
.siblings('.selected').removeClass('selected');
});
CSS
.selected{background:red}
And How to triggered the link with Enter Key?
Thanks!
this might want you want to do:
$('#button').click(function () {
var selected = $('.section.selected');
selected.removeClass('selected');
var tbl = selected.closest("table");
var th = tbl.find("th");
var index = selected.closest("th").index();
if(index < th.length-1) index++;
else index=0;
tbl.find(".section:eq(" + index + ")").addClass('selected');
});
this is the working DEMO.
The problem in your code was using jQuery siblings function, which goes through the all node siblings at the same DOM level, for instance if you had:
<table>
<th>
<div class="section selected">E1
</div>
<div class="section">E1 Sibling
</div>
</th>
</table>
then sibling function would select the E1 Sibling node, but non of .section nodes in your html are siblings.

JavaScript onmouseleave and onmouseenter working in Firefox and IE9 but not in Chrome?

I was trying to create a table which have several links which appear onHover and hides again onleave. I implemented these 2 functions
<script type="text/javascript">
function hide(cls, no) {
var select = '.' + cls + no;
$(select).hide();
}
function show(cls, no) {
var select = '.' + cls + no;
$(select).show();
}
</script>
and my HTML Code is
<tr onmouseenter="show('inv', 1)" onmouseleave="hide('inv', 1)" >
<td width="30%">
<a class="single_image" href="img/img1-big.png"><span class="icon-picture"></span> Image1.jpg</a>
</td>
<td width="40%" align="center">
<div class="button-col">
<span class="icon-pencil"></span> Rename
<span class="icon-arrow-down"></span> Download
<span class="icon-share"></span> Share
<span class="icon-trash"></span> Delete
</div>
</td>
</tr>
I am Using Bootstrap framework.
This code works perfectly on IE9 and Firefox
The mouseenter and mouseleave events is not available in chrome (and other browsers). You should use a javascript framework that normalizes this, like jQuery.
Using jQuery, try something like:
<tr data-no="1" data-cls="inv">
And:
$(function() {
$('tr').each(function() {
var $target = $('.' + $(this).data('cls') + $(this).data('no'));
$(this).hover(
function() { $target.show(); },
function() { $target.hide(); }
);
});
});
More info on .hover(): http://api.jquery.com/hover/
More information about compat here: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter#Browser_compatibility

bootstrap "tooltip" and "popover" add extra size in table

Note:
Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer.
Pay attention to the notes.
When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid this?
Here emptyRow - function to generate tr with 100
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<style>
#matrix td {
width: 10px;
height: 10px;
border: 1px solid gray;
padding: 0px;
}
</style>
<script>
function emptyRow() {
str = '<tr>'
for (j = 0; j < 100; j++) {
str += '<td rel="tooltip" data-original-title="text"></td>'
}
str += '</tr>'
return str
}
$(document).ready(function () {
$("#matrix tr:last").after(emptyRow())
$("[rel=tooltip]").tooltip();
});
</script>
</head>
<body style="margin-top: 40px;">
<table id="matrix">
<tr>
</tr>
</table>
</body>
</html>
thank in advice!
Note: Solution for Bootstrap 3.3+
Simple Solution
In the .tooltip() call, set the container option to body:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
});
Alternatively you can do the same by using the data-container attribute:
<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>
Why does this work?
This solves the problem because by default, the tooltip has display: block and the element is inserted in the place it was called from. Due to the display: block, it affects the page flow in some cases, i.e pushing other elements down.
By setting the container to the body element, the tooltip is appended to the body instead of where it was called from, so it doesn't affect other elements because there is nothing to "push down".
Bootstrap Tooltips Documentation
Note: Solution for Bootstrap 3.0 ~ 3.2
You need to create an element inside a td and apply a tooltip to it, like this, because a tooltip itself is a div, and when it is placed after a td element it brakes table layout.
This problem was introduced with the latest release of Bootstrap. There are ongoing discussions about fixes on GitHub here. Hopefully the next version includes the fixed files.
Note: Solution for Bootstrap 3.3+
If you want to avoid to break the table when applying a tooltip to a <td> element, you could use the following code:
$(function () {
$("body").tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
});
})
You html could look like this:
<td data-toggle="tooltip" title="Your tooltip data">
Table Cell Content
</td>
This even works with dynamically loaded content. For example in use with datatables
I would like to add some precision to the accepted answer, I decided to use the answer format for readibility.
Note: Solution for Bootstrap 3.0 ~ 3.2
Right now, wrapping your tooltip in a div is the solution, but it will need some modifications if you want your whole <td> to show the tooltip (because of Bootstrap CSS). A simple way to do it is to transfert <td>'s padding to wrapper :
HTML
<table class="table table-hover table-bordered table-striped">
<tr>
<td>
<div class="show-tooltip" title="Tooltip content">Cell content</div>
</td>
</tr>
</table>
JS (jQuery)
$('.show-tooltip').each(function(e) {
var p = $(this).parent();
if(p.is('td')) {
/* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */
$(this).css('padding', p.css('padding'));
p.css('padding', '0 0');
}
$(this).tooltip({
toggle: 'toolip',
placement: 'bottom'
});
});
If you are using datatable for table then it will be use full
$('#TableId').DataTable({
"drawCallback": function (settings) {
debugger;
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
}
});
You should initialize Tooltip inside datatable function fnDrawCallback
"fnDrawCallback": function (data, type, full, meta) {
$('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true });
},
And define your column as below
{
targets: 2,
'render': function (data, type, full, meta) {
var htmlBuilder = "<b>" + data + "</b><hr/><p>Description: <br/>" + full["longDescrioption"] + "</p>";
return "<a href='#' class='Name'>" + (data.length > 50 ? data.substr(0, 50) + '…' : data) + "</a>" +
"<sup data-toggle='tooltip' data-original-title=" + htmlBuilder + ">"+
"<i class='ic-open-in-new ic' style='font-size:12px;margintop:-3px;'></i></sup>";
}
},
If you're using bootstrap directives for AngularJS, use tooltip-append-to-body attribute.
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>

Categories