如何根据模态选择更新输入

Question

I'm currently working with Laravel Framework. 我目前正在使用Laravel Framework。 I send all the records from one user about events, but if the user has more than one record of event then he needs to choose which event he would like to edit, i've already created the modal that shows all the events, but how can I obtain the selected event and fill all the inputs with that specific event? 我发送一个用户关于事件的所有记录，但是如果用户有多个事件记录，那么他需要选择他想要编辑的事件，我已经创建了显示所有事件的模态，但是如何我可以获取所选事件并填写该特定事件的所有输入吗？ Here is my code 这是我的代码

Controller 调节器

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);

} }

View 视图

<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">

Modal 语气

<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>

The script to open the Modal 打开Modal的脚本

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

How can I obtain the selected event? 我如何获得所选的活动？ And upload the inputs automatically wich the correct data? 并自动上传具有正确数据的输入？

Answer 1

I would change your query a little as now you're querying the userEvents twice. 我会稍微改变你的查询，因为现在你要查询userEvents两次。 You can get the count from your first result set: 您可以从第一个结果集中获取计数：

Controller: 控制器：

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);
}

Update your Blade with form elements for the edit form wrapped with an id corresponding with the userEvent ID below the select in your modal. 使用编辑表单的表单元素更新您的Blade，其中包含与您的模式中select之下的userEvent ID对应的id。

Blade: 刀：

<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>

Update your script with a select box event in which you decide which form gets shown to the user. 使用选择框事件更新脚本，您可以在其中决定向用户显示哪个表单。

Script: 脚本：

$(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...
    });

});

Final note: It might be better to query only id & name to pre-populate your select on the dashboard (as a user might have a lot of userEvents ). 最后注意：最好只查询id和name以在仪表板上预先填充你的选择（因为用户可能有很多userEvents ）。 And then fetch the complete data on a seperate call on selection of an event by the user with ajax. 然后，当用户使用ajax选择事件时，在单独调用时获取完整数据。 Good luck! 祝好运！

如何根据模态选择更新输入

问题描述

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