In Laravel Blade, I am looking to display a Modal popup and dynamically pass data based on the user's ID

When a user clicks on the "View Details" Button, I need to display a popup modal with information specific to that user. The data for each user is stored in the $user variable.

I would like to achieve the same functionality as demonstrated on this website: . On this site, clicking on "view details" opens a modal window displaying details about a particular problem statement. I hope this example clarifies what I am looking for.

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

Answer №1

To add a view details button in Bootstrap, you can use the following code:

<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>

Make sure to set up the necessary routes for this functionality.

Here is an example of how you can structure your modal's code:


@foreach($users as $user)
    <div class="modal fade" id="exampleModal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Edit Brand
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

      <div class="col-md-offset-2">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" class="form-control" value="{{$user->first_name}}">
        </div>

        <input type="submit" value="Edit" class="btn btn-success">

    </div>

                </div>

            </div>
        </div>
    </div>
@endforeach

Answer №2

Utilized jQuery and Ajax along with 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);
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to remove a row with php, html, and ajax?

Trying to remove a row from an HTML table has been my latest challenge while working with Materialize CSS. Here is what I have so far, where the ID corresponds to the employee ID: https://i.stack.imgur.com/rjwba.png Below is the code snippet: <?php ...

React: Implementing localStorage token addition in loginHandler function using State hook is not functioning as expected

I've implemented an AuthContextProvider in my React application to handle user authentication and logout functionality: import React, { useState } from "react"; import axios from "axios"; import { api } from "../api"; co ...

jQuery floating sidebar that dynamically adjusts position based on content overflow

I've come across an interesting scenario with a fiddle that I'm working on: http://jsfiddle.net/yFjtt/1/ The main concept is to allow users to scroll past the header and have the sidebar 'stick' in place as they continue scrolling down ...

JavaScript: Invoking a nested function within a namespace

script1.js var MyNamespace = {}; MyNamespace.addNewFunction = function(a,b,c) { function doSomething() { // Perform some action here } } script2.js MyNamespace.addNewFunction.doSomething() ?? I’m a bit unsure on how to access the content ...

React onClick event image attribute is unique because it allows for interactive

Is there a way to dynamically add the onClick attribute to an image, but have the click event not working? //Code const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, "text/html" ); const imageDa ...

Utilizing the map function in Angular while disregarding any null values

I have an array of objects in my dataset. Here's a glimpse of how it is structured: [ { "id": 1, "name": "john", "address": { "number": 42, "street": "High Street"} }, { ...

Tips for combining values from two inputs to an angular ng-model in AngularJS

I am working with an angular application and I am trying to figure out how to combine values from multiple inputs into one ng-model. Here is an example of my current input: <input type="text" class="form-control input-md" name="type" ng-model="flat.f ...

Injecting components into the DOM using JavaScript in Vue.js

I am currently developing a GUI for a webgame using Vue.JS and opting to use http-vue-loader instead of Webpack or similar tools. Personally, I find them cumbersome and prefer to avoid using them. Typically, in order to integrate my components into the DO ...

AngularJS directive not registering event after model update

Within my angularjs application, I have implemented an element directive that is equipped with an event listener. This listener is designed to respond to a broadcast event from the controller. app.directive('listItem', function(){ return { ...

Tips for switching images in a grid using jQuery

I have implemented an image grid using flexbox on a website I am developing. The grid consists of 8 boxes, and my goal is to randomly select one box every 2 seconds and assign it one of 12 random images. My strategy involves creating an array containing UR ...

Using React, retrieving the value of a checked radio button from the state

My issue involves a list of radio buttons generated from a map loop containing numbers like 1, 2, and 3. When I select a radio button, it should set a state: <ul className="flex gap-6 justify-center"> {maxPaxArr.map((keypax) => ...

Struggling to generate a functional link with Laravel and Vue?

For the past few days, I've been facing a problem. The issue I'm encountering is this: I have created a link in my .vue page to download a simple PDF file: <a href= {{ asset('download/form.pdf') }}> Download here. </a> (Th ...

Tips for obtaining the retrieved URL from an ajax call

How can I extract only the returned URL from an ajax request? I have tried implementing it like this: $.ajax({ type: "GET", dataType : "jsonp", async: false, url: $('#F ...

What is the best way to organize an Express application that handles both API requests and views?

Currently, I am in the process of developing a small application that will function as both a website and its API. To achieve this, I am utilizing Node, Express, and Webpack. The structure of my directory is organized as follows: >client |>dist ...

Incorporate 'Additional features' into the Navbar when adjusting window size

When the window is resized, I want to display a collapsed 'More options' button that will collapse all hidden <li> elements. Here is an example: <li id="menu_more_container" class="dropdown" style="display: none; ...

Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

To enhance comprehension, I've created a straightforward example. For this scenario, ng-repeat is used to call a template that has its own controller. However, the controller of the template requires injected data from a service for each ng-repeat it ...

Sending Grunt Jade configurations to a specific file

I'm currently using grunt-contrib-jade and I'm trying to utilize the pkg.name and pkg.version variables to generate my css file name. Unfortunately, I haven't been able to make this work on my own and would appreciate any assistance. Below i ...

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

Tips for importing a different js file from an npm package without needing to include the entire node_modules path

When using the ES2016 import syntax to load the select2 library from an npm module via Webpack, everything works smoothly and the select2.js file is loaded from the node_modules directory. The node_modules directory also contains a full version of the lib ...

Navigating the intricacies of platform-specific settings in JavaScript

Currently, I am in the process of transferring an application from one PHP-based CMS to another (such as Wordpress, Joomla, etc.). I have established classes that enable my code to function seamlessly on each platform without any alterations (so far so goo ...