pass data to a bootstrap modal in laravel

Question

I want to create a new register in my Database using a modal with just 5 fields. Now it works fine for the first register only. When I use the button to create other registers, It doesn't work,

I just want to take the cod('id') from my equipment and pass it to the hidden field in the modal, but this works only for the first as I said above.

I think my problem is on my Include modal inside of foreach in the view but I couldn't found the problem

My store function:

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);
            
    }

My table in index view:

@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

This is my modal code:

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

Thx for the help!

Answer 1

You can re-use one modal in whole project to add or edit an item. You can find a sample project on Github where two modals are used. One for delete which is used as a confirmation modal and another for edit or update an item.

Answer 2

Although, you are including the modal multiple time the button will call the first one because of the id

To solve your problem you have to use javascript or jQuery. i have used jQuery.

My table in index view:

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

This is my modal code:

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