2017-05-26 52 views
0

我想将注册用户的ID发送到模式,以便能够直接从模式编辑DB,但由于它是模式而不是其他页面,所以我无法使用路由方法。而且我不知道是否有可能使用JavaScript传递id以实现模式laravel

这里是我的视图代码:

table class="highlight responsive-table"> 
    <thead> 
     <tr> 
      <th data-field="id" hidden>ID</th> 
      <th data-field="name">Nombre</th> 
      <th data-field="last_name">Apellidos</th> 
      <th data-field="course">Curso</th> 
      {{-- <th data-field="date">Fecha</th> --}} 
      <th style="text-align: right;">Acciones</th> 
     </tr> 
    </thead> 

    <tbody> 

     @foreach($professors as $professor) 
      <tr> 
       <td hidden>{{$professor->id}}</td> 
       <td>{{$professor->name}}</td> 
       <td>{{$professor->last_name}}</td> 
       <td>{{$professor->course}}</td> 
       <td style="text-align: right; width: 20em"> 

        <button data-target="modalEdit" class="waves-effect waves-light btn yellow darken-2"><i class="material-icons left" style="margin:0">create</i></button> 

        </form> 

       </td> 
      </tr> 
     @endforeach 

    </tbody> 
</table> 

    <!-- Modal Structure --> 
<div id="modalEdit" class="modal modal-fixed-footer"> 
    <form class="col s12" method="POST" action="/professors"> 
     <div class="modal-content"> 
      <h4>Editar a {{ $professor->name }}</h4> 
      {{csrf_field()}} 
     <div class="row"> 
      <div class="input-field col s6"> 
       <input id="name" name="name" type="text" class="validate" required> 
        <label for="first_name">Nombre</label> 
      </div> 
      <div class="input-field col s6"> 
       <input id="last_name" name="last_name" type="text" class="validate" required> 
       <label for="last_name">Apellidos</label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="input-field col s12"> 
       <input id="course" name="course" type="text" class="validate" required> 
       <label for="course">Nombre de curso</label> 
      </div> 
     </div> 
     <div class="file-field input-field"> 
      <div class="btn btn yellow darken-2"> 
       <span>Subir foto</span> 
       <input type="file"> 
      </div> 
      <div class="file-path-wrapper"> 
       <input class="file-path validate" type="text"> 
      </div> 
     </div> 
     <p>Nota: Porás actualizar la foto usando el botón editar.</p> 
    </div> 

    <div class="modal-footer"> 
     <button type="submit" class="waves-effect waves-light btn blue darken-2 ">Registrar</button> 
     <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Cerrar</a> 
    </div> 
</form> 

<script> 
    $(document).ready(function(){ 
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
     $('#modalEdit').modal(); 
    }); 
</script> 

我需要ID传递给模态得到的资讯用户来自数据库。

+0

你打算在类'darken-2'上点击''按钮'来打开'modal'吗? – eeya

+0

确切地说,模态实际上是打开的,因为我没有传递任何数据,模态是空的。 –

回答

1

你可以通过把一个属性上的DOM按钮

<button data-target="modalEdit" class="waves-effect waves-light btn yellow darken-2" data_professor_id="{{$professor->id}}"><i class="material-icons left" style="margin:0">create</i></button> 

通过id和地点的模式里面input[type="hidden"]输入:

<div id="modalEdit" class="modal modal-fixed-footer"> 
<form class="col s12" method="POST" action="/professors"> 
    <div class="modal-content"> 
     <h4>Editar a {{ $professor->name }}</h4> 
     {{csrf_field()}} 
     <div class="row"> 
     <!-- Hidden Input Professor Id --> 
     <input type="hidden" name="professor_id" /> 
     .... 
     </div> 
    </div> 
</form> 

然后单击按钮时,您可以使用attr方法来获得该特定的教授ID并将其传递到您的新隐藏inputmodal

如果你想获得 {{ $professor->name }}为好,采用同样的方法一样的,你正在过 id以及:
$(document).ready(function() { 
    $('button.darken-2').click(function(event) { 
     var sProfessorId = $(this).attr('data_professor_id'); 
     var oModalEdit = $('#modalEdit'); 
     oModalEdit.find('input[name="professor_id"]').val(sProfessorId); 
     oModalEdit.modal(); 
    }); 

}); 

希望这有助于为你的情况

编辑。

// Add this in the button as well 
data_professor_name="{{$professor->name}}" 

$('button.darken-2').click(function(event) { 
    var sProfessorId = $(this).attr('data_professor_id'); 
    var sProfessorName = $(this).attr('data_professor_name'); 
    var oModalEdit = $('#modalEdit'); 
    oModalEdit.find('input[name="professor_id"]').val(sProfessorId); 
    oModalEdit.find('h4').html('Editar a ' + sProfessorName); 
    oModalEdit.modal(); 
}); 
+0

它不起作用,'{{$ professor-> name}}'返回最后一个条目,而不是发送的ID –

+0

因为您在初始加载页面时放置了{{$ professor-> name}}'获得最后一个入口。如果你还想动态地获得'{{$ professor-> name}}',你也可以像'{{$ professor-> id}}'' – eeya

+0

那样传递它''我改变了,我使用'{{$教授 - >名称}}'为了从数据库中动态获取名字,并且如果我使用'{{professor-> id}}',它也会返回最后一个条目,忽略传递给模式的数据。 –