I have a table that contains several rows each containing one checknox. Checkbox will get selected on the row click event.
Now how can I apply an onclick event for a checkbox?
$('input[type=checkbox]').click(function() {
countPopChecked();
});
This is my script. This is working when I click on the checkbox. But I want this functionality when I am clicking on the table row.
$('input[type="checkbox"]').closest('tr').on('click', function() {
countPopChecked();
});
or :
$('tr').has('input[type="checkbox"]').on('click', function() {
countPopChecked();
});
Related
Need the ajax code for changing the button when a value is inserted to database and it need to remain as changed until the value is removed from database
$(document).ready(function() {
$('.btn_add_remove_cart').click(function(e){
e.preventDefault();
var self = $(this);
if (self.hasClass('add-cart')){
// if it's add cart button, replace add-cart class by remove-cart and change label
self.removeClass('add-cart').addClass('remove-cart').text('Remove');
} else {
// it's remove cart button, do the inverse
self.removeClass('remove-cart').addClass('add-cart').text('Add to Cart');
}
});
});
I have listed my table(leaveform) records(50) using datatable API. In my table I have a column to approve leave. This column consist of two radio buttons(Approve and Reject). Each record have its own unique id. Now I want to update the values into database using those unique id.
This is my Table
You can create one function and that function is called by clicking on 'Approve' or 'Reject'. Let me give you example.
For e.g. : you have two radio button as below.
Approve and Reject
Now, You have to create one function that will be called by clicking on radio button. as explained below.
<input type="radio" name="rndLeave" value="approve" onclick="changeLeaveStatus(leaveid, 'approve')" /> Approve
<input type="radio" name="rndLeave" value="reject" onclick="changeLeaveStatus(leaveid, 'reject')" /> Reject
// first argument is leave id
// second argument is leave status.
function changeLeaveStatus(leaveid, leaveStatus)
{
$.ajax({
url: 'leave_status.php',
data: 'id='+leaveid+'&status='+leaveStatus,
type: 'POST',
success: function() {
},
error: function(){
}
});
}
This way you can update leave status from jquery datatable.
I see your tag has jquery so I guess you may want jquery code for solve this problem. here it is.
$( "#button_update" ).click( function() { //on click button update
var approve = new Array();
for (i=1;i<=count;i++) {
if ($('#id' + i).attr('checked') == 'checked'){
approve[i-1] = $('#id' + i).attr('id');
}
}
$.post(url,
{ approve: approve },
function(data) {
});
});
you should use jquery onclick on table with handler "tr" -> send ajax data to update.
$( "#dataTable tbody" ).on( "change", "input[type=radio]", function() {
console.log( $( this ).text() );
$.get( "path_to_php_page/update.php?id="+$( this ).attr("id")+"&state="+$(this).children("input[type=radio]:checked").val(), function( data ) {
console.log( data );
});
});
in update.php
you should get the id of the row with $_GET['id'] and the state with $_GET['state']
I have 3 links which are the names of students.On clicking a link first time or odd number time,another div which contains the details of that student appears.On clicking the same link on second time or even number time, I need to hide the student div.Its working perfectly for me using data() event of jquery.
My requirement is if I click first student link,div with the details of first student will come.If I click the second student link,details of second student will come.If I again click on first link,the student div will hide since data() is associated with it(I think so). But I want to make it displayed because,previous click was on the second link.
My html is like this
George
Leo
Kelm
My jquery:
$("#sections ").on('click','.student_link',function(){
var clicks = $(this).data('clicks');
//alert(clicks);
if (clicks) {
$("#div_students").hide();
//alert(1);
}
else
{
$("#div_students").show();
//alert(2);
}
$(this).data("clicks", !clicks);
return false;
});
That is if I click George for first time, the corresponding div of student will appear,If I click Leo without clicking George to hide the div,I need div of Leo should come.If I click George again,I need div with details of George should come.But for me the div is hiding since the variable click is already true for George.I need the div to be displayed if previous click was not on the current link.
You can use the following code:
$("#sections").on('click', '.student_link', function () {
var prevClickedId = $('#sections').data('prevId');
if (prevClickedId != $(this).attr('id')) {
// This was not the previous clicked element
} else {
// This was the previous clicked element
}
$('#sections').data('prevId', $(this).attr('id'));
return false;
});
You can so something similar to this:
$("#sections").on('click', '.student_link', function(){
if( $("#div_students").data('viewing') == $(this).attr('id') ) {
$("#div_students").hide().data('viewing', '');
}
else {
$("#div_students").show().text($(this).attr('id'));
$("#div_students").data('viewing', $(this).attr('id'));
}
return false;
});
Here's a working example: https://jsfiddle.net/7qwsguoq/
Why don't just use jquery toggle() method? it hides element when it's visible, and shows when it's hidden.
I am building scheduling software. I am using a number of tables to display times/dates, etc.
In one particular table there are cells with id's that list the date and employee id number.
I am trying to setup a trading shift system. When the cell is click an ajax function is performed.
Here is an example cell:
<td id="tblcell-2013_03_13-id_3" class="displayShift">$data placed here</td>
Jquery code:
$(document).ready(function () {
// I can't do this because each id is different
$("td#tblcell").click(function () {
alert('it works!');
});
// I can't do this because there other other td elements on the same page in other tables
$("td").click(function () {
alert('it works!');
});
});
How do I set up a function that is activated when a specific cell is clicked that also passess var data to the function in a script that has other td table elements that can't be referenced in this function?
thanks
You can use the td[id^="tblcell"] selector to select all TDs with their ID starting with tblcell
$('td[id^="tblcell"]').click(function() {
// ... do stuff ...
});
Demo for attribute-value-starts-with selector: http://jsfiddle.net/ARkxD/
I have three text field that needs to have a jquery click event
$('#landline' OR '#mobile_number' OR '#alternate_number').click(function()
{
$(this).val("");
});
I want this to implement whenever the user click the field with id landline or mobile_number or alternate_number the value will be set to null. but this code didn't work.
Use , to concatenate multiple selectors:
$('#landline, #mobile_number, #alternate_number').click(function() {
$(this).val("");
});