将数据传递给 laravel 中的引导模式

Posted

技术标签:

【中文标题】将数据传递给 laravel 中的引导模式【英文标题】:pass data to a bootstrap modal in laravel 【发布时间】:2014-12-12 05:17:36 【问题描述】:

我想使用只有 5 个字段的模式在我的数据库中创建一个新寄存器。现在它只适用于第一个寄存器。当我使用按钮创建其他寄存器时,它不起作用,

我只想从我的设备中取出 cod('id') 并将其传递到模态中的隐藏字段,但这仅适用于我上面所说的第一个。

我认为我的问题出在视图中 foreach 内的包含模式上,但我找不到问题

我的店铺功能:

public function store()
    
        $input = array_except(Input::all(), '_token');
        
        $validation = Validator::make($input, Localizacao::$rules);

        if ($validation->passes())
        
            $this->localizacao->create($input);

            return Redirect::route('equipamentos.index');
        

        return Redirect::route('equipamentos.index')
            ->withInput()   
            ->withErrors($validation);
            
    

我在索引视图中的表格:

@foreach ($equipamentos as $equipamento)
            <tr>
<td> $equipamento->descricao_uso </td>
                <td> $equipamento->data_compra->format('d/m/Y') </td>
                <td> $equipamento->nota_fiscal </td>
                <td> $equipamento->valor_compra </td>
                <td> $equipamento->fornecedor </td>
                <td> $equipamento->taxa_depreciacao </td>
                <td> $item </td>
                <td> - </td>
                
                    <td>
                        <a href=" route('equipamentos.edit', array($equipamento->cod)) " data-toggle="tooltip" title="Editar" data-placement="top" class="legenda">
                        <i class="btn btn-info glyphicon glyphicon glyphicon-pencil" style="width: 41px; height:34px;"></i></a>
                    </td>   
                    <td>
                        <button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-success glyphicon glyphicon-transfer" style="width: 41px; height:34px;" title="Alterar Localização"></button>
                        
                        @include('localizacao.partials.form', array($equipamento, $itens_contabil))
                          
                    </td>
        </td>
            </tr>

            @endforeach

这是我的模态代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Alterar Localização:  $equipamento->descricao_equipamento </h4>
      </div>
      <div class="modal-body" align="center">
        
         Form::open(array('route' => 'localizacao.store', 'class'=>'form-inline')) 
            
         Form::hidden('created_by',  Auth::user()->cod);  
         Form::hidden('cod_equipamento', $equipamento->cod); 

         Form::label('data_movimentacao', 'Data Movimentação:') 
         Form::text('data_movimentacao', null, array('class'=>'form-control datepicker', 'style' => 'width:100%')) 

         Form::label('local_atual', 'Local:') 
         Form::select('local_atual', $itens_contabil, null ,array('class' => 'chosen-select')) 

        <div class="clear"><br></div>  

         Form::label('projeto_atual', 'Projeto:') 
         Form::text('projeto_atual', null, array('class'=>'form-control', 'style' => 'width:100%')) 

         Form::label('funcionario_responsavel', 'Funcionário responsável:') 
         Form::text('funcionario_responsavel', null, array('class'=>'form-control', 'style' => 'width:100%')) 

         Form::label('motivo', 'Motivo:') 
         Form::text('motivo', null, array('class'=>'form-control', 'style' => 'width:100%')) 

        <br>
        <br>
        <br>
          
      </div>
      <div class="modal-footer" align="center">
         Form::submit('Alterar Localização', array('class' => 'btn btn-success')) 
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         Form::close() 
      </div>
    </div>
  </div>
</div>

感谢您的帮助!

【问题讨论】:

我相信您将“创建”和条目与“更新”条目混为一谈。请澄清您的问题。 【参考方案1】:

虽然,由于id,您多次包含模式按钮将调用第一个按钮

要解决您的问题,您必须使用 javascript 或 jQuery。我用过 jQuery。

我在索引视图中的表格:

@foreach ($equipamentos as $equipamento)
 <tr>
      <td> $equipamento->descricao_uso </td>
      <td> $equipamento->data_compra->format('d/m/Y') </td>
      <td> $equipamento->nota_fiscal </td>
      <td> $equipamento->valor_compra </td>
      <td> $equipamento->fornecedor </td>
      <td> $equipamento->taxa_depreciacao </td>
      <td> $item </td>
      <td> - </td>
      <td>
          <a href=" route('equipamentos.edit', array($equipamento->cod)) " data-toggle="tooltip" title="Editar" data-placement="top" class="legenda">
          <i class="btn btn-info glyphicon glyphicon glyphicon-pencil" style="width: 41px; height:34px;"></i></a>
      </td>   
      <td>
          <button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-success glyphicon glyphicon-transfer registerBtn" style="width: 41px; height:34px;" title="Alterar Localização" data_value=" $equipamento->cod "></button>
      </td>
 </tr>
 @endforeach
 @include('localizacao.partials.form', array($itens_contabil)) 
 <script type="text/javascript" charset="utf-8">
    $(document).ready(function() 
        $('.registerBtn').click(function() 
            $("#cod_equipamento").val($(this).attr('data_value'));
        );
    );
  </script>

这是我的模态代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Alterar Localização:  $equipamento->descricao_equipamento </h4>
      </div>
      <div class="modal-body" align="center">

         Form::open(array('route' => 'localizacao.store', 'class'=>'form-inline')) 

         Form::hidden('created_by',  Auth::user()->cod);  
         Form::hidden('cod_equipamento', '', array('id' => 'cod_equipamento')); 

         Form::label('data_movimentacao', 'Data Movimentação:') 
         Form::text('data_movimentacao', null, array('class'=>'form-control datepicker', 'style' => 'width:100%')) 

         Form::label('local_atual', 'Local:') 
         Form::select('local_atual', $itens_contabil, null ,array('class' => 'chosen-select')) 

        <div class="clear"><br></div>  

         Form::label('projeto_atual', 'Projeto:') 
         Form::text('projeto_atual', null, array('class'=>'form-control', 'style' => 'width:100%')) 

         Form::label('funcionario_responsavel', 'Funcionário responsável:') 
         Form::text('funcionario_responsavel', null, array('class'=>'form-control', 'style' => 'width:100%')) 

         Form::label('motivo', 'Motivo:') 
         Form::text('motivo', null, array('class'=>'form-control', 'style' => 'width:100%')) 

        <br>
        <br>
        <br>

      </div>
      <div class="modal-footer" align="center">
         Form::submit('Alterar Localização', array('class' => 'btn btn-success')) 
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
         Form::close() 
      </div>
    </div>
  </div>
</div>

【讨论】:

你太棒了!效果很好,只需创建模态样式,然后将 id 传递给模态,谢谢! 我还有一个问题,我使用“registerBtn”作为按钮“id”并调用 Jquery 部分。然后它不起作用。所以我添加了“registerBtn”作为“类”选择器。然后 JQuery 部分起作用了。是什么原因?【参考方案2】:

您可以在整个项目中重复使用一个模式来添加或编辑项目。您可以在Github 上找到一个示例项目,其中使用了两个模态。一个用于删除,用作确认模式,另一个用于编辑或更新项目。

【讨论】:

以上是关于将数据传递给 laravel 中的引导模式的主要内容,如果未能解决你的问题,请参考以下文章

如何使用引导程序将数据传递给模态

使用 jQuery post 使用 Laravel 将动态数据传递给引导模式

Bootstrap 4 将数据传递给远程模式

如何将数据传递给 ASP.NET MVC 中的模式视图

在使用 Laravel 和 Vue 时,通过 Blade Views 将数据传递给 Vue 与使用 Axios 直接传递给 Vue Components 的优缺点是啥? [关闭]

Laravel 5.3 将数据传递给 Modal 以编辑评论