I have a table, its is data displayed using foreach. one column have 3 icons, by default they are hidden. And also have checkbox. icons and checkbox are in every row. Now when select any checkbox, icons of all rows are appearing. Instead I want only one row icons should be displayed on selecting checkbox. Can somebody help please. thanks in advance. here is the code.
in view
<?php $sn= $this->uri->segment(4); foreach($companies as $company){ $sn++;?>
<tr class="parent" style="font-size:11px;color:#3D4061;border-bottom:1px solid #3d406136">
<td><input type="checkbox" class="text-center check_data mt-2" onchange="changevalue()"></td>
<td class="text-center" style=""><h6><?php echo $sn; ?></h6></td>
<td class="text-center" style=""><h6><?php echo $company->company_name; ?></h6></td>
<td class="text-center" style=""><h6><?php echo $company->contact_no; ?></h6></td>
<?php if($company->activation_status == 1){?>
<td class="text-center" style=""><h6 class="text-success font-weight-bold" style="font-size:13px">Active</h6></td>
<?php } ?>
<?php if($company->activation_status == 0){?>
<td class="text-center" style=""><h6 class="text-danger font-weight-bold" style="font-size:13px">Inactive</h6></td>
<?php } ?>
<td class="text-center" style="">
<div class="status">
<i class="fa fa-edit"></i>
<?php if($company->activation_status == 0){?>
<i class="fa fa-dot-circle-o"></i>
<?php }else{ ?>
<i class="fa fa-exclamation-triangle"></i>
<?php } ?>
<i class="fa fa-trash-alt"></i>
</div>
</td>
<td ><i class="fa fa-chevron-down down" ></i></td>
</tr>
and script is
<script>
$('.status').hide();
function changevalue(){
if($(".check_data").is(":checked"))
$('.status').show();
else
$(".status").hide();
$('.cchild').hide();
}
</script>
you can also use .parent() and .find() methods to get specific row like that:
<input type="checkbox" function="changevalue(this)">
and your javacript must be like that:
function changevalue(elem){
if($(elem).is(":checked"))
$(elem).parent().parent().find('.status').show();
else
$(elem).parent().parent().find('.status').hide();
}
This code can be simplified but it's a good starting example to understand parent-child usage of html elements. At this example first .parent() goes to <td> of checkbox element and second .parent() goes to <tr> element then it searches for .status class in it then hides it.
and you can simplfy it like that:
function changevalue(elem){
if($(elem).is(":checked"))
$(elem).parents("tr").find('.status').show();
else
$(elem).parents("tr").find('.status').hide();
}
function changevalue() {
var $this = $(this),
$status = $this.parents("tr").find(".status");
if ($this.is(":checked")) {
$status.show();
} else {
$status.hide();
}
}
You can give dynamic Ids to every checkbox and status div. Use your record's id may be companyId to create Ids like
<input type="checkbox" id="checkbox_('<?php echo $company->id; ?>')>
I don't know the syntax for php.
and then you can pass the current companyId in onchange="changevalue(companyId)"
and then your code will be like this
function changevalue(companyId){
if($("#checkbox" + companyId).is(":checked"))
$('#status' + companyId).show();
else
$("#status" + companyId).hide();
}
Related
I display checkboxes in my table. Now when i check at least one checkbox, the icon must appear if not, it should be hidden. My icon is not hidden.
What am i doing wrong?
This is my code
<div class="row">
<div class="col-sm-12 ">
<a data-toggle="modal" id="btnAdd" data-target="#myModal" class="btn"> Add Items </a>
<i type="icon" class="fa fa-trash " ></i>
<div>
</div>
<table class="table" id="table">
<thead>
<tr>
<th><input type="checkbox" id="master"></th>
</tr>
</thead>
<tbody>
<td><input type="checkbox"></td>
//table data here
</tr>
#endforeach
</tbody>
</table>
var checkboxes = $("input[type='checkbox']"),
hideIcon = $("i[type='icon']");
checkboxes.click(function() {
hideIcon.attr("disabled", !checkboxes.is(":checked"));
});
You'll need to iterate through all your checkboxes on each click. Also, I would recommend using the prop function to check for the "checked" status. Then, to hide it, either use the hide function, or set the display property to hidden:
$("input[type='checkbox']").click(function() {
var atLeastOneChecked = false;
$("input[type='checkbox']").each(function(index) {
if ($(this).prop('checked'))
atLeastOneChecked = true;
});
if (atLeastOneChecked) {
$("i[type='icon']").show(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','inline-block'); //or set style explicitly
} else {
$("i[type='icon']").hide(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','none'); //set style explicitly
}
});
I'm looking for a way to search for a string in a table rows by jquery and get all of that contents and select the element that have it to get the other pieces!
here is the html side:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Tel</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$allcontacts=$contact->getallcontacts("name",$_SESSION['username']);
if($allcontacts!=null)
foreach($allcontacts as $value){
?>
<tr>
<td class="contact-id">
<?php echo $value[0]; ?>
</td>
<td class="contact-name">
<?php echo $value[1]; ?>
</td>
<td class="contact-tell">
<?php echo $value[2]; ?>
</td>
<td class="contact-info">
<?php echo $value[3]; ?>
</td>
<td class="td-actions">
<a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
<a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg">
<i class="glyphicon glyphicon-edit"></i>
</a>
<a href="#" onclick="" class="se">
<i class="glyphicon glyphicon-envelope"></i>
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<input type="text" class="cs" /><input type="button" value="Search" class="csb"/>
here is the script side!
$(".csb").click(
function() {
var ss = $(".cs").val();
var farray = $("td:contains(ss)").toArray();
console.log(farray);
}
);
console gets me an empty array!
ok ive tried ur code, obiously without php, so i put plain info. maybe this will help u
$(".csb").click(function(){
var ss = $(".cs").val();
var farray = new Array(); //define array
$("tr").removeAttr("style"); //reset all
if(ss!=""){ //check if isnt empty
$("td:contains("+ss+")").each(function(){
$(this).parent().css("background","red"); //select found
//push to array
farray.push($(this).parent().find(".contact-id").html());
farray.push($(this).parent().find(".contact-name").html());
farray.push($(this).parent().find(".contact-tell").html());
farray.push($(this).parent().find(".contact-info").html());
});
}
else{
alert("put a text");
}
//result
$("code").html("value search: "+ss);
$("pre").html("id found: "+farray[0]+"<br>"+
"name found: "+farray[1]+"<br>"+
"tel found: "+farray[2]+"<br>"+
"info found: "+farray[3]);
});
this is the full code: https://jsfiddle.net/keejke5e/3/
You don't need to add .toArray() as $("td:contains(ss)") returns array. I think you need to check whether you getting $("td") element or not. As for I see, according to your code it should find it. So just check $("td") and $("td:contains(ss)") in your chrome console.
This might be a simple question but have kept me busy for the best part of a hour.
I have the following script which generates all active reservations, in the table reservations
require("../includes/connect.php");
function dispAllReservations(){
$i= 1;
global $db;
$date = date('Y-m-d');
$sql ="SELECT * FROM
reservations WHERE pickup_date > '$date'";
$statement = $db->prepare($sql);
$statement->execute();
$bookings = $statement->fetchAll();
$statement->closeCursor();
echo'<table cellpadding="0" cellspacing="0" class=
"table-responsive gzblog-table" id="gzhotel-booking-booking-id">
<thead>
<tr>
<th class="date-th">Reservation ID</th>
<th class="title-th">Car Group</th>
<th>Pickup Date</th>
<th>Return Date</th>
<th>Customer</th>
<th>Email</th>
<th>Amount</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>';
foreach($bookings as $booking){
if($i%2 == 0){
$class = 'odd';
}
else{
$class = 'even';
}
echo' <tr class='.$class.'>';
echo'<td>'.$booking['res_id'].'</td>';
echo'<td>'.$booking['car_group'].'</td>';
echo'<td>'.$booking['pickup_date'].'</td>';
echo'<td>'.$booking['return_date'].'</td>';
echo'<td>'.$booking['renter_name'].'</td>';
echo'<td>'.$booking['email'].'</td>';
echo'<td>AMOUNT HERE</td>';
echo'<td><a class="btn btn-primary btn-sm fancybox" href="#email">
<span class="glyphicon glyphicon-envelope"></span></a>
</td>';
echo'<td><a class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span></a>
</td>';
echo'<td><a class="btn btn-danger btn-sm icon-delete">
<span class="glyphicon glyphicon-trash"></span></a>
</td>';
echo'</tr>';
}//foreach
echo'</tbody>';
echo'</table>';
}//function
The output of the script generates the following
My Problem / Question
When delete button is clicked -- I need to ensure the correct reservation is deleted, same with the edit button, if edit button is clicked I need to ensure the correct user is edited.
What I need to do
I'm guessing I would need to find a way to append the corresponding value for each user in the loop to the element.
I was thinking of a textbox setting display none and then echoing the value inside the value attribute, but that didn't work...
I'm really stuck here any advise would be appreciated
NOTE: All emails are fictional
Try this:
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onDelete(your-id)">
<span class="glyphicon glyphicon-trash"></span>
</a>
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onEdit(your-id)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
Create this function:
<script>
//Delete function
function onDelete(id){
$.ajax({
// do someting
});
}
// Edit function
function onEdit(id){
$.ajax({
// do someting
});
}
</script>
You did not tell us at all how do you want to edit/delete you reservations, but based on the tags you used you can take this approach...
1) In your PHP script generate data attributes on rows or cells, like this:
<tr data-id="put_reservation_id_here">
2) And then use jQuery to hook actions to various elements in the table:
$('#gzhotel-booking-booking-id').on('click', '.icon-delete', function() {
var reservationId = $(this).closest('tr').data('id');
// now you have reservation ID and do whichever AJAX call with it
});
You can use data attributes in your html and then get the data attribute value using javascript.
Example:
In your button:
<a class="btn btn-danger btn-sm icon-delete" data-id="your_Id"><span class="glyphicon glyphicon-trash"></span></a>
Replace your_Id with the correct id.
Then using javascript on your onClick event:
$(this).data('id');
This will retrieve the id that you need to handle the action.
Hope this helps.
When I click cancel on the pop up message it still deletes the record and I don't know why.
<tr>
<td class="recordCells">
<div align="center">
<a onclick="confirm('Are you sure you want to delete this record?')" href="deleterecord.php?ID=<?php echo $row_rsInventory['ID']; ?>">
<img src="../images/x.png" align="absmiddle">
</a>
</div>
</td>
</tr>
You doesn't return the value of the confirm box :
<tr>
<td class="recordCells">
<div align="center">
<a onclick="return(confirm('Are you sure you want to delete this record?'))" href="deleterecord.php?ID=<?php echo $row_rsInventory['ID']; ?>">
<img src="../images/x.png" align="absmiddle">
</a>
</div>
</td>
</tr>
Actually there is a problem of "href = deleterecord.php file" in anchor tag so you can use code something like that:
jQuery(".confirm_click").click(function(){
var check = confirm("Are you sure you want to delete this record?");
if(check == true){
// Action - Record deleted
var url= jQuery(this).attr("url");
jQuery(location).attr('href',url);
}else{
// Action - none
}
});
Html code:-
<a class="confirm_click" href="" url="deleterecord.php?ID=<?php echo $row_rsInventory['ID']; ?>">
<img src="../images/x.png" align="absmiddle">
</a>
or you can send me a part of code on "mohit.tiwari#techinfini.com" and i'll make it in proper way.
I am trying to show selected values of a dropdown in my ui.
<tr class="odd" rowid="1" height="50">
<td>
<select disabled name="item[]" id="item_1" class="dropdown required" tabindex="18">
<?php echo $itemOption;?>
</select>
</td>
<td >
<a href="javascript:void(0);" style="height:40px; width:45px" class="button add_new_row ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-focus" data-role="button" ><span class="ui-button-text" style="padding:0;" disabled>+</span></a>
</td>
</tr>
and in jquery I need to get this tr for replicating my dropdown. Here is my jquery
var thisRow = $(this).closest('tr');
newid=parseInt(thisRow.attr('rowid'))+1;
var count = $('.dataTable input.timepicker').length + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).find('input').val('').end().
But I am getting undefined for thisRow. What may be the reason. Some one please correct me.
You should call this script using any action like bind up in function or trigger on any event etc.
Where you want to call this??
Let have an example, suppose I have a HTML like
<div id="div1">
<span class="test">Call Closest Division</span>
</div>
<div id="div2">
<span class="test">Call Closest Division</span>
</div>
and I want to get closest division when click on span. My script look like this
$('.test').click(function(){
var id = $(this).closest('div').attr('id');
alert(id);
})
Don't forgot to include jquery library.
Working demo