如何根據模態選擇更新輸入

Question

我目前正在使用Laravel Framework。 我發送一個用戶關於事件的所有記錄，但是如果用戶有多個事件記錄，那么他需要選擇他想要編輯的事件，我已經創建了顯示所有事件的模態，但是如何我可以獲取所選事件並填寫該特定事件的所有輸入嗎？ 這是我的代碼

調節器

public function dashboardEvents(){                                          
//Brings all the info from the user events                              
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get(); 
//This is to know if there's more than one record
if(UserEvent::where('user_id', Auth::user()->id)->get()->count()>1) {   
    $data['multiple'] = true;                                           
}  else {                                                               
    $data['multiple'] = false;                                          
}                                                                       
return view('user-pages/my-events', $data);

}

視圖

<title>User Dashboard</title>
<body  class="html not-front not-logged-in no-sidebars page-node page-

<!-- Al the Inputs -->
<select class="form-control" style="margin-bottom: 15px;" id="user_roles">
  <option value="bride">I am a bride</option>
  <option value="groom">Im a groom</option>
  <option value="groomsman">Im a guest</option>
  <option value="wedding_planner">Im a wedding planner</option>
</select>

<input type="text" class="form-control" style="margin-bottom: 15px;">
  <div class="input-group date" data-provide="datepicker" style="margin-bottom: 15px;">
    <input type="text" class="form-control">
      <div class="input-group-addon">
         <span class="glyphicon glyphicon-th"></span>
      </div>
</div>

<select class="form-control" style="margin-bottom: 15px;" id="party-type">
  <option id="wedding">Wedding</option>
  <option id="party">Party</option>
  <option id="prom">Prom</option>
</select>

<select class="form-control" style="margin-bottom: 15px;" id="user-task">
   <option>I am shopping for just Groomsmen</option>
   <option>I am shopping for me</option>
</select>

<input type="text" class="form-control" id="phone_number_user" style="margin-bottom: 15px;">

<input type="text" class="form-control" id="usr" style="margin-bottom: 15px;" placeholder="New Password">

語氣

<div class="modal fade" id="UserDashboardModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Choose an Event to Edit</h4>
        </div>
        <div class="modal-body">
            <select class="form-control">
                @foreach($event as $key=>$cat)
                <option value="{{ $cat->user_event_id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="modalFromEventButton">Select</button>
        </div>
    </div>
</div>

打開Modal的腳本

<script>
  $(document).ready(function () {
      $('#UserDashboardModal').modal('show');
  });
</script>

我如何獲得所選的活動？ 並自動上傳具有正確數據的輸入？

Answer 1

我會稍微改變你的查詢，因為現在你要查詢userEvents兩次。 您可以從第一個結果集中獲取計數：

控制器：

public function dashboardEvents()
{                                          
    // Get all the event ids for the user.
    $data['events'] = UserEvent::where('user_id', Auth::user()->id)->get(); 
    // Check count.
    $data['multiple'] = $data['events']->count() > 1 ? true : false;
    // Return view.
    return view('user-pages/my-events', $data);
}

使用編輯表單的表單元素更新您的Blade，其中包含與您的模式中select之下的userEvent ID對應的id。

刀：

<form action="/your/update/route" method="POST">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    @foreach($event as $key => $cat)
        <div id="cat-{{ $cat->user_event_id }}" style="display:none">
            <!-- build your form elements for update -->
        </div>
    @endforeach
</form>

使用選擇框事件更新腳本，您可以在其中決定向用戶顯示哪個表單。

腳本：

$(document).ready(function () {

    $('#UserDashboardModal').modal('show');

    $('.modal-body select').change(function() {
        // Get selected userEventId.
        var userEventId = $('.modal-body select option:selected').val();
        // Change your form with $('#cat-' + userEventId)
        // code...
    });

});

最后注意：最好只查詢id和name以在儀表板上預先填充你的選擇（因為用戶可能有很多userEvents ）。 然后，當用戶使用ajax選擇事件時，在單獨調用時獲取完整數據。 祝好運！

如何根據模態選擇更新輸入

問題描述

1 個解決方案

解決方案1
0 已采納 2016-09-10 19:24:40

如何根據模態選擇更新輸入

問題描述

1 個解決方案

解決方案1 0 已采納 2016-09-10 19:24:40

解決方案1
0 已采納 2016-09-10 19:24:40