2017-05-26 49 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}}',它也會返回最後一個條目,忽略傳遞給模式的數據。 –