1

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">&times;</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 .= '&nbsp;&nbsp;&nbsp;<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');
}

EDIT: Aún no he podido solucionar el problema y la solución que se me planteo no funciona

1 respuesta 1

0

Lo que puedes hacer es asignarle nombres específicos a las columnas que tienes y así poder obtener su valor con un selector de javascript o jquery.

Primero, debes asignarle una clase específica para cada columna:

$('#user_table').DataTable({
  processing: true,
  serverSide: true,
  ajax: {
   url: "{{ route('getdata') }}",
  },
  columns: [
   {
    data: 'name',
    name: 'name',
    className: 'user-name',
   },
   {
    data: 'email',
    name: 'email',
    className: 'user-email',
   },
   {
    data: 'action',
    name: 'action',
    orderable: false
   }
  ]
 });

Luego, al abrir al modal cargas la data de la siguiente manera:

$(document).on('click', "#edit-item", function() {
    //obtenemos la instancia de la fila
    $tr = $(this).closest('tr');
    
    //rellenamos los campos en el modal
    $("#modal-input-name").val($('.user-name', $tr).text());
    $("#modal-input-email").val($('.user-email', $tr).text());
    
    // Mostramos el modal
    $('#edit-modal').modal('show');
  })
1
  • Intente eso y no salen los datos todavía, salen en blanco los textboxs
    – Shredder
    Commented el 7 ago. 2020 a las 21:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.