update record on table - php

I have these table where i want to update the table with additional data...but it only update 1 record even when i pick another column.please help thanks.
// The call to the modal
<a href="#custom-modal" class="btn btn-primary btn-md waves-effect waves-light"
data-animation="fadein" data-id="{{$value->id}}" data-plugin="custommodal" data-overlaySpeed="200" data-overlayColor="#36404a">
<i class="glyphicon glyphicon-refresh "></i> Update
</a>
// method on modal
<form role="form" data-parsley-validate novalidate method="POST" action="{{url('hr/updateRecord/'. $value->id)}}">
// My controller function
public function updateStaff(Request $request)
{
$staff = User::find($request->id);
$staff->salary = $request->salary;
$staff->phone = $request->phone;
$staff->age = $request->age;
$staff->startDate = $request->date;
$staff->office = $request->office;
$staff->save();
Session::flash('message','Successfully Updated '.$request->firstname.'s record');
return redirect('hr/staffdetails');
}
// route
Route::post('/updateRecord/{id}','HrController#updateStaff');
if i try updating record of rope for instance... it's nana's data that would be updated and it's the only record that is updated no matter the name i select
// blade for table
<div class="bottom-table">
<div class="table table-responsive">
<table class="table table-striped table-bordered" id="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
{{-- <th>Department</th> --}}
<th>Phone number</th>
<th>Office</th>
<th>Age</th>
<th>Start Date</th>
<th>Salary</th>
<th><center>Action</center></th>
</tr>
</thead>
{{ csrf_field() }}
<tbody>
#foreach($staff as $value)
<tr>
<td>{{$value->firstname}}</td>
<td>{{$value->lastname}}</td>
<td>{{$value->position}}</td>
{{-- <td>{{$value->department_id}}</td> --}}
<td>{{$value->phone}}</td>
<td>{{$value->office}}</td>
<td>{{$value->age}}</td>
<td>{{$value->startDate}}</td>
<td>N{{$value->salary}}</td>
<td><center>
<a href="#custom-modal" class="btn btn-primary btn-md waves-effect waves-light"
data-animation="fadein" data-id="{{$value->id}}" data-plugin="custommodal" data-overlaySpeed="200" data-overlayColor="#36404a">
<i class="glyphicon glyphicon-refresh "></i> Update
</a>
<a href="attendance.html" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}">
<i class="glyphicon glyphicon-time"></i> Attendance
</a>
</center>
</td>
</tr>
#endforeach
</tbody>
</table>
//Modal for update
<div id="custom-modal" class="modal-demo">
<button type="button" class="close" onclick="Custombox.close();">
<span>×</span><span class="sr-only">Close</span>
</button>
<h4 class="custom-modal-title">Update staff report</h4>
<div class="custom-modal-text text-left">
<form role="form" data-parsley-validate novalidate method="POST" action="{{url('hr/updateRecord/'.$value->id)}}">
<input type="hidden" name="_token" value="{{csrf_token()}}"/>
<div class="form-group">
<label for="name">Age</label>
<input type="number" class="form-control" id="name" name="age" required parsley-trigger="change">
</div>
<div class="form-group">
<label for="name">Phone number </label>
<input type="number" class="form-control" id="phone" name="phone" required parsley-trigger="change">
</div>
<div class="form-group">
<label for="name">Office</label>
<input type="text" class="form-control" id="office" name="office" required parsley-trigger="change">
</div>
<div class="form-group">
<label for="name">Salary </label>
<input type="number" class="form-control" id="salary" name="salary" placeholder="" required parsley-trigger="change">
</div>
<div class="form-group">
<label for="assign">Start date</label>
<input type="text" class="form-control" name="date" id="datepicker" placeholder="format yyyy-mm-dd" required parsley-trigger="change">
</div>
<button type="submit" class="btn btn-success waves-effect waves-light">Save</button>
<button type="button" class="btn btn-danger waves-effect waves-light m-l-5">Cancel</button>
</form>
</div>

If you want to mass update
$data = [
'salary' => $request->salary,
'phone' => $request->phone,
'age' => $request->age,
'startDate' => $request->date,
'office' => $request->office,
];
// or $data = $request->all();
User::where('your-condition')->update($data); // it returns updated record counts
Also check in User model:
protected $fillable = ['your columns'];
Documentation https://laravel.com/docs/5.5/eloquent#updates

Related

A Database Error Occurred Error Number: 1054 Unknown column 'Array' in 'field list'

A PHP Error was encountered Severity: Notice
Message: Array to string conversion
Filename: database/DB_driver.php
Line Number: 1484
Backtrace:
File: C:\xampp\htdocs\sikan_v2\application\models\Stock_m.php Line: 17
Function: insert
File: C:\xampp\htdocs\sikan_v2\application\controllers\Stock.php Line:
26 Function: add_stock_in
File: C:\xampp\htdocs\sikan_v2\index.php Line: 315 Function:
require_once
A Database Error Occurred Error Number: 1054
Unknown column 'Array' in 'field list'
INSERT INTO t_stock (item_id, type, detail, supplier_id,
qty, date, user_id) VALUES ('10', Array, 'aasa', '15', '1',
'2022-12-26', '1')
Filename: C:/xampp/htdocs/sikan_v2/system/database/DB_driver.php
Line Number: 692
My Models: models: Stock_m.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Stock_m extends CI_Model {
public function add_stock_in($post)
{
$params = [
'item_id' => $post['item_id'],
'type' => ['in'],
'detail' => $post['detail'],
'supplier_id' => $post['supplier'] == '' ? null : $post['supplier'],
'qty' => $post['qty'],
'date' => $post['date'],
'user_id' => $this->session->userdata('userid'),
];
$this->db->insert('t_stock', $params);
}
}
My controllers: controllerts/Stock.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Stock extends CI_Controller {
function __construct()
{
parent::__construct();
check_not_login();
check_admin();
$this->load->model(['item_m', 'supplier_m', 'stock_m']);
}
public function stock_in_data() {
$this->template->load('template', 'transaction/stock_in/stock_in_data');
}
public function stock_in_add() {
$item = $this->item_m->get()->result();
$supplier = $this->supplier_m->get()->result();
$data = ['item' => $item, 'supplier' => $supplier];
$this->template->load('template', 'transaction/stock_in/stock_in_form', $data);
}
public function process() {
if(isset($_POST['in_add'])) {
$post = $this->input->post(null, TRUE);
$this->stock_m->add_stock_in($post);
$this->item_m->update_stock_in($post);
if($this->db->affected_rows() > 0) {
$this->session->set_flashdata('success', 'Data Stock-In berhasil disimpan');
}
redirect('stock/in');
}
}
}
My view: transaction/stock_in/stock_in_form.php
<section class="content-header">
<h1>Stock In
<small>Barang Masuk / Pembelian</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i></li>
<li>Transaction</li>
<li></li>
<li class="active">Stock In</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-header">
<h3 class="box-title">Add Stock In</h3>
<div class="pull-right">
<a href="<?=site_url('stock/in')?>" class="btn btn-warning btn-flat">
<i class="fa fa-undo"></i> Back
</a>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="<?=site_url('stock/process')?>" method="post">
<div class="form-group">
<label>Date *</label>
<input type="date" name="date" value="<?=date('Y-m-d')?>" class="form-control" required>
</div>
<div>
<label for="barcode">Barcode *</label>
</div>
<div class="form-group input-group">
<input type="hidden" name="item_id" id="item_id">
<input type="text" name="barcode" id="barcode" class="form-control" required autofocus>
<span class="input-group-btn">
<button type="button" class="btn btn-info btn-flat" data-toggle="modal" data-target="#modal-item">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div class="form-group">
<label>Item Name *</label>
<input type="text" name="item_name" id="item_name" class="form-control" readonly>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<label for="unit_name">Item Unit</label>
<input type="text" name="unit_name" id="unit_name" value="-" class="form-control" readonly>
</div>
<div class="col-md-4">
<label for="stock">Initial Stock</label>
<input type="text" name="stock" id="stock" value="-" class="form-control" readonly>
</div>
</div>
</div>
<div class="form-group">
<label>Detail *</label>
<input type="text" name="detail" class="form-control" placeholder="Tambahan / etc" required>
</div>
<div class="form-group">
<label>Supplier</label>
<select name="supplier" class="form-control">
<option value="">- Pilih -</option>
<?php foreach($supplier as $i =>$data) {
echo '<option value="'.$data->supplier_id.'">'.$data->name.'</option>';
} ?>
</select>
</div>
<div class="form-group">
<label>Qty *</label>
<input type="number" name="qty" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" name="in_add" class="btn btn-success btn-flat">
<i class="fa fa-paper-plane"></i> Save
</button>
<button type="Reset" class="btn btn-flat">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="modal-item">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data.dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select Product Item</h4>
</div>
<div class="modal-body table-responsive">
<table class="table table-bordered table-striped" id="table1">
<thead>
<tr>
<th>Barcode</th>
<th>Name</th>
<th>Unit</th>
<th>Price</th>
<th>Stock</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach($item as $i => $data) { ?>
<tr>
<td><?=$data->barcode?></td>
<td><?=$data->name?></td>
<td><?=$data->unit_name?></td>
<td class="text-right"><?=indo_currency($data->price)?></td>
<td class="text-right"><?=$data->stock?></td>
<td class="text-right">
<button class="btn btn-xs btn-info" id="select"
data-id="<?=$data->item_id?>"
data-barcode="<?=$data->barcode?>"
data-name="<?=$data->name?>"
data-unit="<?=$data->unit_name?>"
data-stock="<?=$data->stock?>">
<i class="fa fa-check"></i> Select
</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('click', '#select', function(){
var item_id = $(this).data('id');
var barcode = $(this).data('barcode');
var name = $(this).data('name');
var unit_name = $(this).data('unit');
var stock = $(this).data('stock');
$('#item_id').val(item_id);
$('#barcode').val(barcode);
$('#item_name').val(name);
$('#unit_name').val(unit_name);
$('#stock').val(stock);
$('#model-item').modal('hide');
})
})
</script>
please help me in solving this problem

Fetching my Data in the table to Input boxes based on their ID

Main Goal: I want to view the whole details of my specific row data in my table into a new form(input text) based on their ID.
Here is my code to fetch my data into table
<?php
include 'connection.php';
$query = "SELECT * FROM appointment WHERE request_status = 2 AND appoint_active = 1";
$run = mysqli_query($conn,$query);
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">Listing All Services</div>
<div class="panel-body">
<table class="tables" id="manageMainteTable" style="width:100%;">
<tr>
<th style="text-align: center;">Service ID</th>
<th style="text-align: center; width:150px;">Order Date</th>
<th style="text-align: center;">Client Name</th>
<th style="text-align: center;">Contact</th>
<th style="text-align: center;">Client Product</th>
<th style="text-align: center;">No. of Items</th>
<th style="text-align: center; width:150px;">Due Date</th>
<th style="text-align: center;">Service Status</th>
<th style="text-align: center;">Action</th>
</tr>
<?php
if ($num = mysqli_num_rows($run)>0) {
while ($result = mysqli_fetch_assoc($run)) {
echo "
<tr>
<td>".$result['appoint_id']."</td>
<td>".$result['order_date']."</td>
<td>".$result['customer_name']."</td>
<td>".$result['customer_contact']."</td>
<td>".$result['item_type']."</td>
<td>".$result['quantity']."</td>
<td>".$result['due_date']."</td>";
if($result['appoint_status'] == 2 ){
echo"<td><label class='label label-success'>Finished</label></td>";
} else {
echo"<td><label class='label label-danger'>On Going</label</td>";
}
if($result['appoint_status'] == 2 ){
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'> VIEW </button>
<a href='php_action/finishAppointRemove.php?appoint_id=".$result['appoint_id']."' class='btn btn-sm btn-success edit_cat' id='dltbtn'>Remove</a></td>";
} else {
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'>VIEW</button>
<a href='php_action/finishAppoint.php?appoint_id=".$result['appoint_id']."' class='btn btn-sm btn-success edit_cat' id='fnhbtn'>Finished</a></td>";
}
}
}
?>
</tr>
</table>
</div>
</div>
</div>
</div>
So what i want is when i click this button **
<button class='btn btn-sm btn-info edit_cat' data-toggle='modal' data-target='#addProductModal'> VIEW </button>
** The corresponding row will fetch its data into input boxes.
<div class="modal" tabindex="-1" role="dialog" id="addProductModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Full Details</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" id="submitProductForm" action="php_action/updateMainte.php" method="POST">
<div class="modal-body">
<div id="add-product-messages"></div>
<div class="form-group">
<label class="control-label col-sm-3" for="appointID">Appoint ID:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="appointID" name="appoint" placeholder="Appoint ID" value="<?php echo $row['appoint_id'];?>" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="customerName">Customer Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="customerName" name="customerName" placeholder="Customer Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="contact">Contact Number:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="contact" name="contact" placeholder="Contact #" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="item_type">Item/s Type:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="item_type" name="item_type" placeholder="Items" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="quantity">Quantity:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" min="1" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="due">Due Date:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="due" name="due" placeholder=" Due Date" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="worker" required>Assinged Worker/s:</label>
<div class="col-sm-9">
<select class="form-control" id="worker" name="worker">
<option value="">---Select---</option>
<?php
$sql = "SELECT brand_id, brand_name FROM brands WHERE brand_status = 1 AND brand_active = 1";
$result = $connect->query($sql);
while ($row = $result->fetch_array()){
echo "<option value='".$row[0]."'>".$row[1]."</option>";
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="createProductBtn" data-loading-text="Loading..">Update Information</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
}
}
</form>
</div>
</div>
</div>
This is the visual example of my table.
And when i click the view button
So what i want is to automatically fetch the correspoding row of the view button that i just clicked. Im kinda new to coding so im not really sure what i need to do that. Thanks and sorry for convenience.
Step 1: Add a appoint_id (i.e. unique id ) to view button using data attribute.
In Your Case data-appoint='".$result['appoint_id']."'
echo "<td>
<button class='btn btn-sm btn-info edit_cat' data-appoint='".$result['appoint_id']."' data-toggle='modal' data-target='#addProductModal'> VIEW </button>";
-Step 2: Add a onclick event listener to view button. In Your Case
$(".edit_cat").click(function(){
let service_id=$(this).data('appoint');
console.log(service_id);
});
so you can able to access service id in function so add ajax or fetch api to request the source and get data from it. And add Data to desired Input

Laravel: Undefined variable in #foreach

I want to display order_details table on web, but #foreach loop says Undefined variable $order_details
Here is my #foreach loop
#foreach($order_details as $order_detail)
<tr>
<td>{{$order_detail->product_id}}</td>
<td>{{$order_detail->name}}</td>
<td>{{$order_detail->phone}}</td>
</tr>
#endforeach
My order controller contains this:
public function index()
{
$order_details=Order_Detail::all();
return view('orders.index',['order_details' => $order_details]);
}
index.blade.php contains only css and javascript code.
my index.blade.php is further connected to livewire(order.blade.php) like this
#livewire('order')
my livewire(order.blade.php) contains this code
<div class="col-lg-12">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header"><h4 style="float:left">Order Products</h4>
<a href="#" style="float:right" class="btn btn-dark"
data-toggle="modal" data-target="#addproduct">
<i class="fa fa-plus"></i>Add new Product </a></div>
<div class="card-body">
<div class="my-2">
<form wire:submit.prevent="InsertoCart">
<input type="text" name="" wire:model="product_code"
id="" class="form-control" placeholder="Enter Product code">
</form>
</div>
#if(session()->has('success'))
<div class="alert alert-success">
{{session('success')}}
</div>
#elseif(session()->has('info'))
<div class="alert alert-info">
{{session('info')}}
</div>
#elseif(session()->has('error'))
<div class="alert alert-danger">
{{session('error')}}
</div>
#endif
<Table class="table table-bordered table-left">
<thead>
<tr>
<th></th>
<th>Product Name</th>
<th>Qty</th>
<th>Price</th>
<th>Discount (%)</th>
<th colspan="6">Total</th>
</tr>
</thead>
<tbody class="addMoreProduct">
#foreach($productIncart as $key=> $cart)
<tr>
<td class="no">{{$key + 1}}</td>
<td>
<input type="text" class="form-control" value="{{$cart->product->product_name}}">
</td>
<td width="15%">
<div class="row">
<div class="col-md-2">
<button wire:click.prevent="IncrementQty({{$cart->id}})"
class="btn btn-sm btn-success"> + </button>
</div>
<div class="col-md-1">
<label for="">{{$cart->product_qty}}</label>
</div>
<div class="col-md-2">
<button wire:click.prevent="DecrementQty({{$cart->id}})"
class="btn btn-sm btn-danger"> - </button>
</div>
</div>
</td>
<td>
<input type="number"
value="{{$cart->product->price}}" class="form-control">
</td>
<td>
<input type="number"
class="form-control">
</td>
<td>
<input type="number"
value="{{$cart->product_qty * $cart->product->price}}"
class="form-control total_amount">
</td>
<td><a href="#" class="btn btn-sm btn-danger rounded-circle">
<i class="fa fa-times" wire:click="removeProduct({{$cart->id}})"></i>
</a></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Total <b class="total1">{{$productIncart->sum('product_price')}}</b></h4>
</div>
<form action="{{route('orders.store')}}" method="POST">
#csrf
#foreach($productIncart as $key=> $cart)
<input type="hidden" class="form-control" name="product_id[]" value="{{$cart->product->id}}">
<!-- <input type="hidden" name="product_name[]" value="{{$cart->product_name}}"> -->
<input type="hidden" name="quantity[]" value="{{$cart->product_qty}}">
<input type="hidden" name="price[]"
value="{{$cart->product->price}}" class="form-control price" >
<input type="hidden" name="discount[]"
class="form-control discount" >
<input type="hidden" name="total_amount[]"
value="{{$cart->product_qty * $cart->product->price}}"
class="form-control total_amount" >
#endforeach
<div class="card-body">
<div class="btn-group">
<button type="button"
onclick="PrintReceiptContent('print')"
class="btn btn-dark"> <i class="fa fa-print"></i>Print
</button>
<button type="button"
onclick="PrintReceiptContent('print')"
class="btn btn-primary"> <i class="fa fa-print"></i>History
</button>
<button type="button"
onclick="PrintReceiptContent('print')"
class="btn btn-danger"> <i class="fa fa-print"></i>Report
</button>
</div>
<div class="panel">
<div class="row">
<table class="table table-striped">
<tr>
<td>
<label for="">Customer Name</label>
<input type="text" name="customer_name" id="" class="form-control">
</td>
<td>
<label for="">Customer Phone</label>
<input type="number" name="customer_phone" id="" class="form-control">
</td>
</tr>
</table>
<td>Payment Method <br>
<div class="">
<span class="radio-item">
<input type="radio" name="payment_method" id="payment_method"
class="true" value="cash" checked="checked">
<label for="payment_method"><i class="fa fa-money-bill text-success"></i>Cash</label>
</span>
<span class="radio-item">
<input type="radio" name="payment_method" id="payment_method"
class="true" value="bank transfer">
<label for="payment_method"><i class="fa fa-university text-danger"></i>Bank Transfer</label>
</span>
<span class="radio-item">
<input type="radio" name="payment_method" id="payment_method"
class="true" value="credit Card">
<label for="payment_method"><i class="fa fa-credit-card text-info"></i>Credit Card</label>
</span>
</td><br>
<td> Payment
<input type="number" wire:model="pay_money" name="paid_amount"
id="paid_amount" class="form-control">
</td>
<td> Returning Change
<input type="number" wire:model="balance" name="balance"
id="balance" readonly class="form-control">
</td>
<td>
<button class="btn-primary btn-lg btn-block mt-3">Save</button>
</td>
<td>
<button class="btn-danger btn-lg btn-block mt-2">Calculator</button>
</td>
<div class="text-center">
<i class=" fa fa-sign-out-alt"></i>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Order Details display -->
<div class="container-fluid">
<div class="col-lg-12">
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-header"><h4 style="float:left">Recent Orders</h4>
</div>
<div class="card-body">
<Table class="table table-bordered table-left">
<thead>
<tr>
<th>id</th>
<th>Order Id</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Discount</th>
</tr>
</thead>
#foreach($order_details as $order_detail)
<tr>
<td>{{$order_detail->product_id}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{$order_detail->unitprice}}</td>
<td>{{$order_detail->amount}}</td>
<td></td>
</tr>
#endforeach
<tbody>
</Table>
</div>
</div>
</div>
</div>
</div>
</div>
What I noticed in your code is that you might be expecting an answer in another place while your code is running somewhere else.
First of all, you are writing a show(Order $order) function that collects parameters, while you are outputting it in the index page, so where you are calling the show function will expect a parameter, while the index will not expect a parameter

Creating an edit modal in Laravel 5

I am trying to create an edit modal for each row in the database. My page looks like this.
When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.
The modal I intend to show is like this.
My view.php
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach ($data as $datas)
<tr>
<td>{{ $datas->username }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
<i class="fa fa-edit"></I>
</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" >
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
How can I achieve the desired output?
Something like this would suffice.
Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs
$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
// on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); // See how its usefull right here?
var row = el.closest(".data-row");
// get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
// fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
<tr class="data-row">
<td class="align-middle iteration">2</td>
<td class="align-middle name">Name 2</td>
<td class="align-middle word-break description">Description 2</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->
Suggestion
I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.
You can use the below code just pass the $data to the view and it will populate.
#foreach ($data as $datas)
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" value="{{$datas->user_id}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username" value="{{$datas->username}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email" value="{{$datas->email}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact" value="{{$datas->contact}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
#endforeach
Easy and simple method.
Simply ensure your data-target and id values are dynamically changing with respect to the individual rows, in this case fix the modal box code into the loop that it takes the values dynamically.
So since you are using Laravel you could do this:
#foreach($rows as $row)
<em class="fa fa-2x fa-edit mr-1"></em>
<div id="myEditModal{{ $row->id }}" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
....
#endforeach

How to Add new tr in each table?

Can anyone please please Help me. I am using laarvel framework. I want to add tr when user click on ADD NEW Service Button. The data is displayed in foreach Loop.
when user click on Add New Service
here is my Html Code:-
enter code here
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
#foreach($alldata as $data)
<div class="services-name">
<h4>{{ $data['name'] }} <button id="{{ $data['id']}}" type="button" class="btn btn-default btn-nail getid" data-toggle="modal" data-target="#myModal-nail" >
<i class="fa fa-plus" aria-hidden="true"> Add New Service</i>
</button>
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="table-class">
<table class="table table-bordered" id="append-{{ $data['id'] }}">
<tr>
<th style="width:33.33%">Services</th>
<th style="width:33.33%">Duration</th>
<th style="width:33.33%">£ Price </th>
</tr>
#foreach($data['sub_services'] as $subservices)
<tr>
<td>{{ $subservices['name']}}</td>
<input type="hidden" name="service_id[]" value="{{ $subservices['service_id'] }}">
<input type="hidden" name="name[]" value="{{ $subservices['name'] }}">
<input type="hidden" name="service_is[]" value="{{ $subservices['service_is'] }}">
<td>
<div class="form-group">
<input class="form-control" type="text" name="duration[]" placeholder="Duration">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control" type="text" name="price[]" placeholder="price">
</div>
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
#endforeach
</div>
And here is My modal
enter code here
<div class="modal fade" id="myModal-nail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="add-cat"> Add Service</h4>
</div>
<form class="servicedata" role="form" method="POST" action="Javascript:;">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group row">
<span class="col-xs-3 add-cate-model">Add Service</span>
<div class="col-xs-8">
<input name="name" class="form-control mdl-txt txtfield m-tb-10" type="text" placeholder="Add Service" >
<input type="hidden" name="list_id" value="{{ $listid }}">
<input type="hidden" class="service" name="service_id" value="">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary addService">Submit</a>
</div>
</form>
</div>
</div>
Jquery Code:-
enter code here
$(document).on('click','.getid', function(){
var serviceid = $(this).attr('id');
alert(serviceid);
$('.addService').addClass(serviceid);
$('.'+serviceid).on('click',function(){
$('.service').val(serviceid);
if(flag==1) {
$.ajax({
type: "POST",
url: "add-category-service",
data: $('.servicedata').serialize(),
success:function(resp){
if($.trim(resp)){
$("#append-"+serviceid).append(resp);
$('.addService').removeClass(serviceid);
$('#myModal-nail').modal('hide');
} else{
alert("error"); return false;
}
}
});
}
});
});
And My laravel function:-
enter code here
ublic function addCategoryService(Request $request){
if($request->ajax()){
$data = $request->input();
//echo "<pre>"; print_r($data); die;
unset($data['_token']);
$subservice = new SessionSubService;
$subservice->name = $data['name'];
$subservice->list_id = 1;
$subservice->service_id = $data['service_id'];
$subservice->service_is = "top";
$subservice->save();
echo '<tr>
<td>'. $data['name'].'</td>
<input type=hidden name=service_id[] value=' .$data['service_id'].'>
<input type=hidden name=name[] value=' . $data['name']. '>
<input type=hidden name=service_is[] value=top>
<td>
<div class=form-group>
<input class="form-control" type="text" name="duration[]" placeholder="Duration">
</div>
</td>
<td>
<div class=form-group>
<input class=form-control type=text name=price[] placeholder=price>
</div>
</td>
</tr>'; die;
}
}

Categories