如何在laravel中的模型对话框内传递动态数据

时间:2018-04-11 08:36:44

标签: laravel laravel-5 laravel-4 laravel-5.1 laravel-5.3

在下面找到刀片文件中的代码:

 @foreach($value['products']['product'] as $key)


    <tr role="row">
      <td  class="sorting_desc" tabindex="0" aria- 
      controls="DataTables_Table_0" rowspan="1" colspan="1" aria- 
      label="Rendering engine: activate to sort column ascending" aria- 
      sort="descending">{{$key['id']}}</td>
      <td  class="sorting" tabindex="0" aria-controls="DataTables_Table_0" 
      rowspan="1" colspan="1"
       aria-label="Browser: activate to sort column ascending">


       <a href="" style="color:#23b7e5" data-toggle="modal"
        data-target="#myModal">{{$key['groupname']}} - {{$key['name']}}</a>
       </td>
      <td  class="sorting" tabindex="0" aria-controls="DataTables_Table_0" 
      rowspan="1" colspan="1" aria-label="Platform(s): activate to sort 
      column ascending">{{$key['regdate']}} - {{$key['nextduedate']}}</td>
      <td  class="sorting" tabindex="0" aria-controls="DataTables_Table_0" 
      rowspan="1" colspan="1" aria-label="Platform(s): activate to sort 
      column ascending">{{$key['domain']}} </td>
      <td class="sorting" tabindex="0" aria-controls="DataTables_Table_0" 
       rowspan="1" colspan="1" aria-label="Engine version: activate to sort 
       column ascending">{{$key['serverhostname']}}</td>
      <td  class="sorting" tabindex="0" aria-controls="DataTables_Table_0" 
       rowspan="1" colspan="1" aria-label="Engine version: activate to sort 
       column ascending">
      <label class="checkbox-inline">
      <input type="checkbox" checked data-toggle="toggle">Auto Renew
      </label>
      </td>

     </tr>
     <!-- Modal -->
     <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog-lg">

     <!-- Modal content-->
     <div class="modal-content">
     <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal">&times; 
      </button>
      <h4 class="modal-title"><b>{{$key['groupname']}} - {{$key['name']}} 
      </b></h4>
    </div>
    <div class="modal-body modal-header">
      <p>Domain Name - {{$key['domain']}}</p>
    </div>

    <div class="row" style="padding-top:20px;">
  <div class="col-lg-6">
          <a href="" class="block panel padder-v bg-primary item" >
            <span class="text-white font-thin h1 block text-center"></span>
            <p class="text-center text-muted customFont" >Email Accounts</p>

          </a>
        </div>
       <div class="col-lg-6"  style="padding-left:20px;"><a href="" 
       class="block panel padder-v bg-info item">
            <span class="text-white font-thin h1 block text-center"></span>
            <p class="text-muted text-center customFont">Addon Domain</p>

          </a>
        </div>
  </div>


    <div class="row">
  <div class="col-lg-6">
          <a href="" class="block panel padder-v bg-info item" >
            <span class="text-white font-thin h1 block text-center"></span>
            <p class="text-center text-muted customFont" >Add Sub Domain</p>

          </a>
        </div>
     <div class="col-lg-6"  style="padding-left:20px;"><a href="" 
     class="block panel padder-v bg-primary item">
            <span class="text-white font-thin h1 block text-center"></span>
            <p class="text-muted text-center customFont">change Primary 
      Domain</p>

          </a>
        </div>
  </div>

  </div>

</div>

         <!-- my modal closed -->
         @endforeach

在下面提到的代码中的刀片文件中,我正确地显示了数据,但在模式dailogue中,我为不同的 groupname 获得了相同的名称。建议我解决这个问题。

        <a href="" style="color:#23b7e5" data-toggle="modal"
        data-target="#myModal">{{$key['groupname']}} - {{$key['name']}}</a>

对于模态独裁,我使用了以下代码:

     <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal">&times; 
      </button>
      <h4 class="modal-title"><b>{{$key['groupname']}} - {{$key['name']}} 
      </b></h4>
      </div>

在下面找到路线代码:

Route::get('clientlayout.main.myservices','MyServicesController@show');

控制器代码如下:

class MyServicesController extends Controller
{

public function show(){
    $value = Whmcs::GetClientsProducts([]);

    return view('clientlayout.main.myservices',compact('value'));
}

}

2 个答案:

答案 0 :(得分:2)

此解决方案基于表视图中有多个记录的假设,并且对于每个记录,您希望模式显示其值。

我不会使用您提供的数据,但解决方案可行。我要从桌子上走一排。

<强> table.blade.php

ChannelInterceptorAdapter#preSend

<强>的jQuery

<tr>
    <td>{{ $product->id }}</td>
    <td>{{ $product->name }}</td>
    <td>{{ $product->price }}</td>
    <td>
        <a
            href="#"
            data-target="#yourModalId"
            data-toggle="modal"
            data-id="{{ $product->id }}"
            data-name="{{ $product->name }}"
            data-price="{{ $product->price }}"
        >
            View Product Details
        </a>
    </td>
</tr>

<强> yourModal.blade.php

现在,只要用户点击var productId; $('#yourModalId').on('show.bs.modal', function(e) { var link = $(e.relatedTarget), id = productId = link.data('id'), name = link.data('name'), price = link.data('price'), modal = $(this); modal.find('.modal-title').html('Edit Product: ' + name); modal.find('.modal-body #name').val(name); modal.find('.modal-body #price').val(price); }); 链接,它就会打开一个包含动态值的模态窗口。

View Product Details

使用这种方法,您不必在表视图中创建多个模态窗口。相反,创建一个模态,并通过<div id="yourModalId" class="modal fade" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title p-0 m-0"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body p-2"> <form method="POST" autocomplete="off" id="formEdit" > {!! csrf_field() !!} <div class="form-group"> <label for="name">Product Name:</label> <input type="text" name="name" id="name" class="form-control form-control-sm" required="required" > </div> <div class="form-group"> <label for="price">Product Price:</label> <input type="text" name="price" id="price" class="form-control form-control-sm" required="required" > </div> <div class="errorsInEditing"></div> <button type="submit" class="btn btn-info submitButton btnEdit p-1 font-weight-bold"> Submit </button> </form> </div> </div> </div> </div> 内的表中的jQuery调用它。

答案 1 :(得分:0)

你应该试试这个

更改链接的日期目标

<a href="" style="color:#23b7e5" data-toggle="modal" data-target="#myModal{{$key['id']}}">

更改模型div id

 <div class="modal fade" id="myModal{{$key['id']}}" role="dialog">