I have two tables and I want to have change event on one table.
That is when I click on first table, I want to have some changes to the second table. But somehow below change function is not working. Any suggestions?
$("#history_table table:eq(0)").click(function(){
$("#history_table table:eq(1) thead tr th:nth-child(1)").html("New");
});
$("#history_table table:eq(1) thead tr th:nth-child(1)").change(function() {
alert('Handler for .change() called.');
});
Here history_table is a div tag id and it has two tables. click() function is working but I am expecting to see alert message as well, but this is not showing.
The .change() event/handler isn't for (or fired by default for) this, it's for an input style element changing data, for example a <input> or a <select>. Instead, you'll want a custom event (or manually firing change...) here, for example:
$("#history_table table:eq(0)").click(function(){
$("#history_table table:eq(1) thead tr th:nth-child(1)").html("New")
.trigger('myEvent');
});
$("#history_table table:eq(1) thead tr th:nth-child(1)").bind('myEvent', function() {
alert('Handler for .change() called.');
});
Related
I want to create a custom based on the number of dates in a month, is it possible to make thead in
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
});
DataTable provide a headerCallback hook to modify the header of your table.
For example if you want to show some information on the first header column, you could try it like :
table = $('#table').DataTable({
headerCallback: function headerCallback(thead, data, start, end, display) {
$(thead)
.find('th')
.first()
.html('Sometext here');
}
});
I have a datatable which will be model binded when the page opens but when i am doing any edit or delete function the the datatable will be binded using ajax call. So I am having a function
$('#user-detail-datatable tbody tr td a').on('click', function () {
//prepoluting values on edit
$("#CarryUser").val($(this).closest('tr').find('td')[5].outerText);
d = $(this).closest('tr').find('a')[1].id;
$("#display").val($(this).closest('tr').find('td')[6].outerText);
UsingBranchId = $(this).closest('tr').find('td')[2].outerText;
$("#fileUpload").val($(this).closest('tr').find('td')[0].outerText);
});
used to get the values from datatable to bind a model which will open on click of edit button. but this function is not getting hit after I am editing or deleting can anyone explain why. And help me out
You would need to use a delegated event handler. As for now you have one time binding to elements which is lost as soon the table is updated. Use
$('#user-detail-datatable').on('click', 'tbody tr td a', function () {
}]
instead.
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
I have a button named [Filter] that I'm trying to call the grid search modal on click. I have yet been able to find the call that the search button uses inline.
It uses <span class="ui-icon ui-icon-search"></span> classes for the search icon/button.
So something like
$('.filter').live('click', function (event) {
$('ui-icon-search').trigger('click');
});
Edit, found it.
$('.filter-grid').live('click', function (event) {
$("#search_products").click();
});
Was calling the parent div id on click and not the span.
Found it.
$('.filter-grid').live('click', function (event) { $("#search_products").click(); });
Was calling the parent div id on click and not the span.
I have the following script:
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function () {
mySQLinsert(value, '2', this.id)
$(this).css({
"-webkit-border-radius": value
});
});
});
Basically, the "#border-radius" ID is to a text input. You type in a value, click the textbox (can't figure out a way around this) and then click the div with the class "editable" and it will apply the style "-webkit-border-radius" (I know its not cross-browser), to that DIV.
The mySQLinsert function uses Ajax to send the value of the mySQLinsert function to a mySQL database using a php page (nothing fancy).
Issue: When I click the child div (div inside of a div) it also applies this value to the parent object, and runs the mySQLinsert function and stored it in the database
I need to be able to select both the parent, and the child individually depending on which one is clicked.
You can use stopPropagation() to prevent the click bubbling up to its parent element.
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function (e) {
// Note the parameter e passed in the function above
e.stopPropagation();
mySQLinsert(value, '2', this.id)
$(this).css({"-webkit-border-radius": value});
});
});