Laravel Ajax jquery get values on click tr rows - javascript

I have an html table that contains product information:
id
Title
And when I click on a row or several rows I would like to retrieve the ids in array and modify their title through the controller.
Example :
I click on the first row I get the first id and when I click on the second row I get the second id but the first id it disappears.
I try with this :
Ajax
var last_clicked;
$(document).on('click', "#Mytable tr:not(:first)", function () {
$('#id_product').val(last_clicked.find('[class="fill_id_product"]').html());
});
$('#update_product').click(function() {
var id = $('#id_product').val();
var array_id = array.push(id);
alert(array_id) ;
$.ajax({
type: 'POST',
url: "{{action('ProdcutController#updateProduct')}}",
data: {
id: array_id,
},
success: function(data){
alert("success");
}
});
});
HTMl :
<a id="update_product">Update Prodcut</a>
//Table
<table id="Mytable" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th>Id </th>
<th>Title</th>
</tr>
</thead>
<tbody>
#foreach($all_products as $all_product)
<tr>
<td>
<p class="fill_id_product">{{$all_product->id}}</p>
</td>
<td>
<p hidden class="fill_title">{{$all_product->title}}</p>
</td>
</tr>
#endforeach
<input type="text" name="" id="id_product">
</tbody>
</table>
And My controler :
public function updateProduct(Request $request){
$products = Product::where('id',$request->id)->get();
foreach($products as $product){
$product->title = "Title global";
$product->save();
}
return ['products' => $products];
}

What you need to do is to push the id into array on row click function.
Here is the code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a id="update_product">Update Prodcut</a>
<table id="Mytable" class="table table-striped table-bordered table-checkable order-column">
<thead>
<tr>
<th>Id </th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p class="fill_id_product">1</p>
</td>
<td>
<p hidden class="fill_title">Title 1</p>
</td>
</tr>
<tr>
<td>
<p class="fill_id_product">2</p>
</td>
<td>
<p hidden class="fill_title">Title 2</p>
</td>
</tr>
<tr>
<td>
<p class="fill_id_product">3</p>
</td>
<td>
<p hidden class="fill_title">Title 3</p>
</td>
</tr>
</tbody>
</table>
<script>
var clicked_ids = [];
$(document).on('click', "#Mytable tr:not(:first)", function () {
var product_id = $(this).find('[class="fill_id_product"]').html();
alert(product_id);
if(clicked_ids.indexOf(product_id) == -1){
clicked_ids.push(product_id);
}
console.log(clicked_ids);
});
$('#update_product').click(function() {
console.log(clicked_ids);
$.ajax({
type: 'POST',
url: "{{action('ProdcutController#updateProduct')}}",
data: {
id: clicked_ids,
},
success: function(data){
alert("success");
}
});
});
</script>
</body>
</html>
Also you need to change the controller login because you are now sending the ids in array no a single id so you need to change condition to where id IN($request->id)

Related

Append data in table row based on Checkbox value using jQuery

I have to update the status of mac device which i am selecting(checkbox) from html table.If i am selecting one mac from html table,it will show offline or online status of mac.Below code i am using for this.Problem is if i am selecting any mac only first row status column is updating.I want to update selected mac row status in respective column.
I am trying with below code but it is not working
var nextColumnCell = $(selected_device_mac).parent("tr").find(selected_device_id)
if(result.includes("On-line")){
nextColumnCell.html("");
nextColumnCell.append(result + " ✅")
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
Actual Code
function macDeviceClickedBox(checkBoxName){
var values = new Array();
var selected_device_id ;
var selected_device_mac ;
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"), function () {
values.push($(this).text().trim())
});
document.getElementById("macaddress").value = values.join("\n");
selected_device_id = '#Selected_Device';
selected_device_mac = values.join("\n");
alert(selected_device_mac)
$('#cover-spin').show();
$.ajax({
method: "GET",
dataType: "text",
url: "getDeviceType",
data: {
mac : selected_device_mac.trim(),
},
success: function(result) {
$('#cover-spin').hide();
if (result !== "") {
if(result.includes("On-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ✅");
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
}else{
$(selected_device_id).html("");
$(selected_device_id).append("Not Selected ❗");
}
}
});
}
Html.erb
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">Select</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #devices.all.each do |parameter| %>
<tr id="device_<%=parameter.id %>">
<td >
<input type="checkbox" class="checkBox" name="checkBox[]" onchange="macDeviceClickedBox(this.name)">
</td>
<td id="macaddress" style="word-break:break-all;">
<%= parameter.mac_address%>
</td>
<td style="word-break:break-all;">
<%= parameter.device_type%>
</td>
<td style="word-break:break-all;">
<%= parameter.model%>
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;">!Not Selected</b>
</td>
</tr>
<% end %>
</tbody>
</table>

Refresh div after delete table row

I can successfully delete rows of my table and remove it from the table with jquery and ajax. On top of my table i have the number of rows displayed. How can i refresh the div (update_count) to show the decremented number after deleting ?
<div id="update_count"><?=$num_count?> data</i></div>
<table class="table">
<tr>
<th style="width:1px"><strong>Date</strong></th>
<th style="width:5px">Labo</th>
<th style="width:5px">Delete</th>
<tr>
<?php foreach($IndicacionesLab as $row)
{
?>
<tr>
<td><?=$row->insert_time;?></td>
<td><?=$row->laboratory;?></td>
<td> <a title="Eliminar laboratorio <?=$row->laboratory;?>" class="st deletelab" id="<?=$row->id_lab; ?>" style="background:rgb(223,0,0);cursor:pointer">Delete</a></td>
</tr>
<?php
}
?>
</table>
Js
$(".deletelab").click(function(){
if (confirm("Sure to delete ?"))
{
var el = this;
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
url:'<?=base_url('admin/DeleteHistLab')?>',
data: {id : del_id},
success:function(response) {
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
}
})
For simplicity keep all the data rows in a <tbody>
<table id="my-table">
<thead>
<tr>
<th> heading 1 </th>
</tr>
</thead>
<tbody>
<tr>
<th> data 1 </th>
</tr>
</tbody>
</table>
Then after you remove the row get the length of all rows remaining
$('#update_count').text( $('#my-table tbody tr').length + ' Items')

insert a drop down list in element td after click and then post selected value to a php file

I want to execute following steps: -
Insert a drop down list in a TD element, after clicking over
it.
Select some value from drop down list.
After selection, POST such selected value to some.php file.
some.php file will update somedb database.
display value in TD element from somedb database.
For being specific, I know how to execute step 4 and step 5?
I need help in Step 1 to 3, for which I code this.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Datalist Element Demo
</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">
</script>
<script type='text/javascript'>
$(function(){
$('td').click(function(){
// this.textContent = 'Sukumar';
var $this = $(this);
var $input = $('<input>', {
value: $this.text(),
type: 'text',
blur: function() {
$this.text(this.value);
}
,
keyup: function(e) {
if (e.which === 13) $input.blur();
}
}
).appendTo( $this.empty() ).focus();
}
);
}
);
</script>
<div id="page-wrapper">
<h1>Drop Down Demo
</h1>
<table class="table" id="tableCompleted">
<thead>
<tr>
<th>Name
</th>
<th>A
</th>
<th>B
</th>
<th>C
</th>
<th>D
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sukumar
</td>
<td>Yes
</td>
<td>Yes
</td>
<td>No
</td>
<td>No
</td>
</tr>
</tbody>
</table>
<input type="text" id="ajax" list="json-datalist" placeholder="Sukumar 's datalist">
<datalist id="json-datalist">
</datalist>
</div>
<script src="index.js">
</script>
</body>
</html>

Append to Table via AJAX Request - Not Appearing in Correct Position

I have a simple AJAX request as part of an infinite scroll on a page that fetches more records to add to an existing table that shows the first 20 rows. The AJAX request is working and returning the correct data but it's not appearing in the correct location (it's showing above the existing rows).
Here's an example of how the table looks:
<div>
<br />
<table class="table table-striped table-bordered">
<thead>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope=“col”>Location</th>
<th scope=“col”>Type</th>
<th scope=“col”>Manager</th>
</thead>
<tbody>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
<td> 4:00 PM</td>
<td> Sydney</td>
<td> In House</td>
<td> Barney Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
<td> 4:00 PM</td>
<td> Melbourne</td>
<td> External</td>
<td> Betty Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
<td> 5:00 PM</td>
<td> Dallas </td>
<td> External</td>
<td> Fred Flinstone</td>
</tr>
<div id="content"></div>
</tbody>
</table>
</div>
and here's the Javascript:
var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadArticle(skip);
skip += 20;
}
});
function loadArticle(pageNumber) {
$.ajax({
url: "getRecords.php",
type: 'POST',
data: "action=" + action + "&skip=" + skip,
success: function(html) {
$("#content").append(html); // This will be the div where our content will be loaded
}
});
return false;
I added a div after the last table row to insert the new rows into:
<div id="content"></div>
but the new rows are not appearing after the last row, rather above the existing rows.
Not sure what I'm doing wrong here. I'm using the Bootstrap framework if that helps.
You can't have a div after a tr in a table like that. The browser will not render it where you put it if you do that.
Get rid of the <div id="content"></div> and add the id to your tbody like this
<tbody id="content">
Add <tr> and in tr add <td> and then within td add div. Anything written in table which is not inside <td> will show before the table
<tr>
<td>
<div id="content"></div>
</td>
</tr>

.parents() not work on table

I'm trying show user details in user list using AJAX JQuery, but it does not work as I need.
It works for my first details in the same tr, but doesn't work in the second detail in td in the second row. How should I do it properly?
Here is the code:
My view:
<table class="table">
<thead>
<th>#</th>
<th>name</th>
<th>password</th>
<th></th>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<table class="table">
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->password}}</td>
<td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td>
<td id="details">a</td>
</tr>
<tr>
<td colspan="5" id="details">a</td>
</tr>
</table>
</tr>
#endforeach
</tbody>
</table>
and my script:
$(".extend-user").click(function() {
var self = this;
if($(self).data("details")===0)
$.ajax({
method: "POST",
url: $(self).data("url"),
data: {
_token: $("#_token").val()
},
success: function(data) {
$(self).parents().find("#details").append(data["name"]);
//$(self).parent().parent().find("#details").append(data["name"]);
//$(self).closest('table').find("#details").append(data["name"]);;
$(self).data("details", "1");
}
});
if($(self).data("details")===1) {
$(self).data("details", "0");
$(self).parent().find("p.details").html("");
}
});
try to use $(self).closest("table").find("#details").append(data["name"]);
closest finds the closest parent element that you want to find.
replace $(self).parents().find("#details").append(data["name"]);
with
$(self).parents('tr').find("#details").append(data["name"]);

Categories