Tengo el siguiente código y me gustaría saber como puedo pasar los datos de mi tabla al modal
Este es mi codigo en editar.blade.php. El modal si funciona pero no sé como hacer que los datos salgan en el modal, lo de hacer POST a la base de datos lo haré yo mismo pero solo quiero saber como hago que esos datos salgan para poderlos editar.
Los datos que quiero que salgan en el modal son la id, el nombre y el email.
<script src="{{ url('/js/vendor/jquery-1.12.4.min.js') }} "></script>
<script src="{{ url('/js/bootstrap.min.js') }} "></script>
<link rel="stylesheet" href="{{ url('/css/bootstrap.min.css') }} ">
<script src="{{ url('/js/jquery.dataTables.min.js') }} "></script>
<div class="container">
<h2>Editar estudiante</h2>
<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
<table id="user_table" class="table table-bordered table-striped">
<thead>
<tr>
<th width="35%" id="name">Name</th>
<th width="35%" id="email">Email</th>
<th width="30%">Action</th>
</tr>
</thead>
</table>
</div>
<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 -->
<input type="hidden" name="modal-input-id" class="form-control" id="modal-input-id" required>
<!-- /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-email" class="form-control" id="modal-input-email" 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>
<script type="text/javascript">
$(document).ready(function(){
$('#user_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('getdata') }}",
},
columns: [
{
data: 'name',
name: 'ame'
},
{
data: 'email',
name: 'email'
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$(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 name = row.children("name").text();
var email = row.children("email").text();
// fill the data in the input fields
$("#modal-input-name").val(name);
$("#modal-input-email").val(email);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
});
</script>
Esta es mi ruta actual, es solo una ruta get porque me quede atorado en esa parte
Route::get('/getdata', 'AdminController@getPosts')->name('getdata');
Este es mi controlador en AdminController, solo coloque la función que es relevante para la pregunta
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\DB;
use Carbon\Carbon;
use App\StudentModel;
use DataTables;
use App\DataTables\UsersDataTablesEditor;
public function getPosts(Request $request)
{
if($request->ajax()){
$data = StudentModel::latest()->get();
return DataTables::of($data)
->addColumn('action', function($data){
$button = '<button type="button" name="edit-item" data-target-id="'.$data->id.'" class="edit btn btn-primary btn-sm" data-toggle="modal" data-target="#edit-modal">Edit</button>';
$button .= ' <button type="button" name="edit" data-target-id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('editar');
}