借助ajax - Laravel在Bootstrap Modal上动态加载数据

时间:2015-03-03 13:32:48

标签: php twitter-bootstrap eloquent laravel-5

  

页面:default.blade.php

你好我想要的是,当我点击show按钮时,下面的模态应该打开,它应该包含来自数据库和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>
  

Modal代码是

<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)
    {
        //
    }

}

1 个答案:

答案 0 :(得分:1)

你需要为每个“节目”添加一个模态 就在你的@foreach添加之前(包含一个文件来做模态代码)

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

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

可以用于显示/编辑/删除,如果有人在那里有解决方案,那么验证就不那么容易了。