javascriptjquerytwitter-bootstraplaravel

How to update inputs based on a modal selection

I'm currently working with 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">I'm a groom</option>
  <option value="groomsman">I'm a guest</option>
  <option value="wedding_planner">I'm 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 
<script>
  $(document).ready(function () {
      $('#UserDashboardModal').modal('show');
  });
</script>

How can I obtain the selected event? And upload the inputs automatically with the correct data?

Solution

  • I would change your query a little as now you're querying the userEvents twice. 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:

    <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). And then fetch the complete data on a seperate call on selection of an event by the user with ajax. Good luck!