Ad

I Want To Show Modal Popup And Pass Data To Modal According To User-id In Laravel Blade

I want to show a popup modal with information for an individual user when someone clicks on view Details Button. I want to pass the user data according to the user-id and show this in the modal popup. My data are in $user.

I want to do exactly done in the link below website http://ssipgujarat.in/sgh201920/problem_statement.php as you click on view details, it shows the modal for that particular problem statement. I hope that it make sense to you.

@extends('layouts.app')

@section('content')
    <div class="container" id="blur-wrapper">
        <div class="row">
            @foreach($data as $user)
                @if($user->user_type == 'user')
                    <div class="col-md-6  col-sm-12">
                        <div class="card-wrapper">
                            <div class="info-wrapper">
                                <h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
                                <h6>{{ $user->email }}</h6>
                                <hr/>
                                <h6>Department: {{$user->StudentProfile->department}}</h6>
                                <h6>Sem: {{ $user->StudentProfile->sem }}</h6>
                            </div>
                            <div class="button-wrapper">
                                <form action="{{ $user->id }}">
{{--                                    <button class="btn btn-primary" id="view-detail">View Details</button>--}}
                                    <a class="btn btn-info" id="view-detail" target="_blank" rel="nofollow noreferrer" href="{{ $user->id }}">View Details</a>
                                </form>
                                <form method="POST" action="/admin/reject/{{ $user->id }}">
                                    @csrf
                                    <button class="btn btn-danger" type="submit">Delete Account</button>
                                </form>
                            </div>
                        </div>
                        <div class="popup">
                            <h2>{{  }}</h2>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
@endsection

Ad

Answer

Did this with jQuery and Ajax and a data-entry attribute:

blade (CSS: bulma)

<!-- list of elements -->
<li class="dashboard">
  <p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>

<!-- MODAL -->
<div class="modal" id="QuickInfo">
  <div class="modal-background"></div>

  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Quick-Info</p>
      <button class="delete closeQuickInfo" aria-label="close"></button>
    </header>
    <section class="modal-card-body">

     <!-- PUT INFORMATION HERE, for example: -->

        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Rubrik</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input class="input" id="category" type="text" value="" readonly>       
              </div>         
            </div>
          </div>
        </div>


        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Kunde</label>
          </div>
          <div class="field-body">
            <div class="field">
              <input class="input" id="customer" type="text" value="" readonly>       
            </div>
          </div>
        </div>

      <!-- END PUT INFORMATION HERE -->

    </section>
    <footer class="modal-card-foot">
      <button class="button is-link closeQuickInfo">Schließen</button>
    </footer>
  </div>
</div>

jQuery

$(document).ready(function () {
  $('.showQuickInfo').click(function () {
    $('#QuickInfo').toggleClass('is-active'); // MODAL

    var $entry = this.getAttribute('data-entry');
    getEntryData($entry);
  });
}

function getEntryData(entryId) {
  $.ajax({
    url: '/entries/getEntryDataForAjax/' + entryId,
    type: 'get',
    dataType: 'json',
    success: function (response) {
      if (response.length == 0) {
        console.log( "Datensatz-ID nicht gefunden.");
      } else { 
        // set values
        $('#category').val( response[0].category );         
        $('#customer').val( response[0].customer );
        // and so on
      }
    }
  });
}

Controller

 public function getEntryDataForAjax(int $id) 
    {
      $entries = new Entry(); 
      $entry = $entries->where('id', $id)->get();

      echo json_encode($entry);
    }
Ad
source: stackoverflow.com
Ad