在 ajax 的帮助下在 Bootstrap Modal 上动态加载数据 - Laravel

Question

页面：default.blade.php

你好，我想要的是，当我点击显示按钮时，下面的模式应该打开，它应该包含来自数据库和通过 ajax 的数据，所以请帮助我。非常感谢任何帮助。

<div class="container">
          <table class="table">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Name</th>
                          <th width="300">Adress</th>
                          <th>Contact</th>
                          <th>Email</th>
                          <th>Phone</th>
                          <th>Show</th>
                          <th>Edit</th>
                          <th>Delete</th>

                        </tr>
                      </thead>
                      <tbody>


                     @foreach ($usertoshow as $us)

                      <tr>
                        <td>{{$us->u_id}}</td>
                        <td>{{$us->u_name}}</td>
                        <td>{{$us->u_add}}</td>
                        <td>{{$us->u_contact}}</td>
                        <td>{{$us->u_eml}}</td>
                        <td>{{$us->u_phn}}</td>
                        <td>
                          <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#clientInfo" id="showButton"><span class="glyphicon glyphicon-th"></span> **Show**</button>
                        </td>
                        <td>
                          <button type="button" class="btn btn-xs btn-info"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
                        </td>
                        <td>
                          <button type="button" class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-remove-sign"></span> Delete</button>
                        </td>

                      </tr>

                      @endforeach

                      </tbody>

                </table>

          </div>

模态代码是

<div class="modal fade" id="clientInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

           <div class="alert alert-info" role="alert">
            Name: <strong></strong> 
          </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

控制器代码

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;

use Illuminate\Http\Request;
use App\User;
use View,
    Response,
    Validator,
    Input,
    Mail,
    Session;



class UserController extends Controller {

    /**
     * Display a listing of the resource.
     *
     * @return Response
     */
    public function index()
    {
        $usertoshow = User::all();
        return view('pages.default')->with('usertoshow',$usertoshow);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function insert()
    {

        $user = User::create(['u_name' => Input::get('inputName'), 'u_eml' => Input::get('inputMail'), 'u_srname' => Input::get('inputsurName'),'u_add' => Input::get('inputAdd'),'u_phn' => Input::get('inputPhone'),'u_contact' => Input::get('inputContact')]);

    }

    /**
     * Store a newly created resource in storage.
     *
     * @return Response
     */
    public function showdetail()
    {


    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function update($id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function destroy($id)
    {
        //
    }

}

Answer 1

您需要为每个“节目”添加一个模态 就在您的@foreach 添加之前（包括一个文件来执行模态代码）

@include ('layouts.modals.genModal' , ['record' => $us])

在 genModal
像这样的东西：

<div class="modal fade"
  id="show-form{{{ $record->id }}}" tabindex="-1" role="dialog" 
  aria-labelledby="myModalLabel" area-hidden="true"
  style="display: none;" >

.... 模态的东西

并将您的 data-traget 更改为相同的 us id

<button type="button" class="btn btn-xs btn-success" 
  data-toggle="modal" data-target="#clientInfo" 
  id="showButton">
  <span class="glyphicon glyphicon-th"></span> **Show**
</button>

data-target="#show-form{{{ $record->id }}}"

适用于 show / edit / delete ，如果有人有解决方案，验证不是那么容易，请告知。