So I'm just trying to get a message box to pop up when I click a cell in my table. I have seen many threads about $("td").click(function () { etc, but these are not working for my table. I cannot find out why.
HTML:
<body>
<div id="tableArea">
<table class="table table-bordered" id="myTable">
<tr>
<td bgcolor="green" id='a1'>1</td><td>2</td>
</tr>
</table>
</div>
</body>
And the javascript/jQuery:
<script type="text/javascript">
$("td").click(function(e) {
alert('Anything');
});
</script>
I do not see a difference in this code than in many of the other threads, but this is not working. Note: I'm using Bootstrap, if that makes a difference.
You should capture the click event after $(document).ready().
<script type="text/javascript">
$(document).ready(function() {
$("td").click(function(e) {
alert('Anything');
});
});
</script>
$(document).ready( function(){
$("td").on('click', function(e) {
alert('Anything');
});
});
just work fine for your markup.
see it on jsfiddle
Related
When I have this code:
$('input[type="checkbox"]').click(function(){
alert('2');
})
It works great, every time when I click a checkbox, I get an alert.
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
When I add the following, it works also great, but the alert works only one time.
How do I fix this?
EDIT
Used the function onColomnSwitch to fire the event multiple times.
Fixed, tnx!
Please check that you have included the js file for "BootStrapTable" or not. If not included then it will show an error in the console.
I have checked the code and it's working for me. You can try out this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
});
</script>
</head>
<body>
<input type="checkbox" name="test_cb" id="test_cb"> <label for="test_cb">Test Checkbox</label>
<table border="1px solid black" id="#fresh-table">
<tr><th>Name</th><td>Lorem Ipsum</td></tr>
<tr><th>Email</th><td>example#gmail.com</td></tr>
</table>
</body>
</html>
Hello guys can you help me solve this? I have 2 different modal on the same page. The first modal shows search and filter
but the other modals cannot show anything, only the content
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
$('.modal-child').on('show.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 0);
});
$('.modal-child').on('hidden.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 1);
});
} );
</script>
The first modal you are using $('#example').DataTable();
The second modal you are not using $('#second').DataTable();
So, you must add for the second modal.
The tables should have different id. For example:
<script type="text/javascript">
$(document).ready(function() {
$('#table1').DataTable();
$('#table2').DataTable();
});
</script>
...
<table id="table1" class="display" cellspacing="0" width="100%">
...
<table id="table2" class="display" cellspacing="0" width="100%">
Well, My problem is described below:
I have this javascript code in order to created a href in a table:
$('#table').html('<a name="example" class="one">One</a><a name="example" class="two">Two</a>');
And then I wanna know which a tag I pressed.... something like this:
$("a[name=example]").click(function(e) {
var example= $(this).attr("class");
alert(example);
}
But this doesn't work...
Could you help me?
Thx 4 advance!
You should use event delegation on() to attach the click event to the fresh DOM (a tags) added dynamically to the page by your script :
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
Hope this helps.
$('#table').html('<a name="example" class="one">One</a><br><a name="example" class="two">Two</a>');
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table">
This is how you should do it.
$("#table").on('click','a[name="example"]',function() {
var example= $(this).attr("class");
alert(example);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<body>
<div id="table">
<a name="example" class="one">One</a>
<a name="example" class="two">Two</a>
</div>
</body>
</html>
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
I have following code:
<body onload="LoadData()">
<table id="myTable">
</table>
</body>
And I have Javascript function like :
<script type="text/javascript">
function LoadData()
{
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>'
$('#myTable').append(sTempTableRow);
}
</script>
I have tried numerous times and at all the times face an exception like Microsoft JScript runtime error: Object expected.
Please tell me what is the problem here.
Instead if the onload event use jquery's ready:
<script type="text/javascript">
$(document).ready(function()
{
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>';
$('#myTable').append(sTempTableRow);
});
</script>
<body>
<table id="myTable">
</table>
</body>
you can find the solution :
$(document).ready(function(){
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>'
$('#myTable').append(sTempTableRow);
});
and remove the onload statement.
You can find the solution here.