0

Tenho um sistema feito em CodeIgniter.

Possuo no sistema um campo para adicionar colaboradores com foto(avatar), consigo cadastrar, editar e exibir as informações em uma tabela.

Criei um botão para chamar um Modal e exibir a foto do operador selecionado.

Só que não estou conseguindo exibir a foto somente do colaborador selecionado, está aparecendo no Model todas as fotos cadastradas no BD.

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

colaboradores_model.php

function __construct() {
    parent::__construct();
}


function get($table,$fields,$where='',$perpage=0,$start=0,$one=false,$array='array'){

    $this->db->select($fields);
    $this->db->from($table);
    $this->db->order_by('idColaboradores','desc');
    $this->db->limit($perpage,$start);
    if($where){
        $this->db->where($where);
    }

    $query = $this->db->get();

    $result =  !$one  ? $query->result() : $query->row();
    return $result;
}

function getById($id){
    $this->db->where('idColaboradores',$id);
    $this->db->limit(1);
    return $this->db->get('colaboradores')->row();
}

function add($table,$data){
    $this->db->insert($table, $data);         
    if ($this->db->affected_rows() == '1')
    {
        return TRUE;
    }

    return FALSE;       
}

function edit($table,$data,$fieldID,$ID){
    $this->db->where($fieldID,$ID);
    $this->db->update($table, $data);

    if ($this->db->affected_rows() >= 0)
    {
        return TRUE;
    }

    return FALSE;       
}

function delete($table,$fieldID,$ID){
    $this->db->where($fieldID,$ID);
    $this->db->delete($table);
    if ($this->db->affected_rows() == '1')
    {
        return TRUE;
    }

    return FALSE;        
}   

function count($table){
    return $this->db->count_all($table);
}

Html

<!--view/colaboradores/colaboradores.php-->
<?php if($this->permission->checkPermission($this->session->userdata('permissao'),'aColaborador')){ ?>
    <a href="<?php echo base_url();?>index.php/colaboradores/adicionar" class="btn btn-success"><i class="icon-plus icon-white"></i> Adicionar Colaborador</a>
<?php } ?>

<?php

if(!$results){?>
	<div class="widget-box">
     <div class="widget-title">
        <span class="icon">
            <i class="icon-user"></i>
         </span>
        <h5>Colaboradores</h5>

     </div>

<div class="widget-content nopadding">


<table class="table table-bordered ">
    <thead>
        <tr>
            <th>RE</th>
            <th>Nome</th>
            <th>Cargo</th>
            <th>Situação</th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td colspan="5">Nenhum Colaborador Cadastrado</td>
        </tr>
    </tbody>
</table>
</div>
</div>

<?php } else{?>

<div class="widget-box">
     <div class="widget-title">
        <span class="icon">
            <i class="icon-user"></i>
         </span>
        <h5>Colaboradores</h5>

     </div>

<div class="widget-content nopadding">


<table class="table table-bordered ">
    <thead>
        <tr style="backgroud-color: #2D335B">
            <th>RE</th>
            <th>Nome</th>
            <th>Cargo</th>
            <th>Situação</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($results as $r) {
			if($r->situacao == 0){$situacao = 'Ativo';}else{ $situacao = 'Não Ativo';};
            echo '<tr>';
            echo '<td>'.$r->idColaboradores.'</td>';
            echo '<td>'.$r->nome.'</td>';
            echo '<td>'.$r->cargo.'</td>';
			echo '<td>'.$r->situacao.'</td>';
            
            echo '<td>';
            if($this->permission->checkPermission($this->session->userdata('permissao'),'vColaborador')){
                echo '<a style="margin-right: 1%" href="'.base_url().'index.php/colaboradores/visualizar/'.$r->idColaboradores.'" class="btn tip-top" title="Visualizar Colaborador"><i class="icon-eye-open"></i></a>  '; 
            }
			if($this->permission->checkPermission($this->session->userdata('permissao'),'vColaborador')){
                echo '<a style="margin-right: 1%" href="#modal-foto" role="button" data-toggle="modal" colaborador="'.$r->idColaboradores.'" class="btn btn tip-top" title="Visualizar Foto"><i class="icon-camera icon-white"></i></a>'; 
            }
            if($this->permission->checkPermission($this->session->userdata('permissao'),'eColaborador')){
                echo '<a style="margin-right: 1%" href="'.base_url().'index.php/colaboradores/editar/'.$r->idColaboradores.'" class="btn btn-info tip-top" title="Editar Colaborador"><i class="icon-pencil icon-white"></i></a>'; 
            }
            if($this->permission->checkPermission($this->session->userdata('permissao'),'dColaborador')){
                echo '<a href="#modal-excluir" role="button" data-toggle="modal" colaborador="'.$r->idColaboradores.'" class="btn btn-danger tip-top" title="Excluir Colaborador"><i class="icon-remove icon-white"></i></a>'; 
            }
                     
            echo '</td>';
            echo '</tr>';
        }?>
        <tr>
            
        </tr>
    </tbody>
</table>
</div>
</div>
	
<?php echo $this->pagination->create_links();}?>



<!-- Modal -->
<div id="modal-excluir" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="<?php echo base_url() ?>index.php/colaboradores/excluir" method="post" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h5 id="myModalLabel">Excluir Colaborador</h5>
  </div>
  <div class="modal-body">
    <input type="hidden" id="idColaborador" name="id" value="" />
    <h5 style="text-align: center">Deseja realmente excluir este colaborador?</h5>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-danger">Excluir</button>
  </div>
  </form>
</div>

<!-- Modal visualizar foto -->
<div id="modal-foto" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="<?php echo current_url(); ?>" id="formColaborador" enctype="multipart/form-data" method="post" class="form-horizontal" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Visualizar Foto</h3>
  </div>
  <div class="modal-body">
  <?php foreach ($results as $r) {
	  echo '<div style="text-align: center"><td style="width: 14%"><img id="fotoPreview" src='.$r->url_foto.'></td></div>';}?>
	  
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
  </form>
</div>

<style>
#fotoPreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<script type="text/javascript">
$(document).ready(function(){


   $(document).on('click', 'a', function(event) {
        
        var colaborador = $(this).attr('colaborador');
        $('#idColaborador').val(colaborador);

    });

});

</script>

3
  • 1
    Cadê o códego ? Cadê ? Cadê o Where ID ? 6/04/2016 às 15:43
  • @Zoom, Postei o Where ID que está no colaboradores_model, e o código da View, creio que não precisa do array, pois não quero gravar ou editar dados, somente visualizar uma url em <img> num model. Mas eu quero clicar no botão referente ao ID 1 e ver somente a foto deste ID. 6/04/2016 às 18:44
  • passe o valor como data-id="<?php echo $ID;?>", olha esse exemplo e esse outro exemplo. 6/04/2016 às 19:29

1 Resposta 1

1

Passe a imagem através do atributo data-url para o elemento através do botão de clique:

<button type="button" class="btn btn-default" data-url="/path/<?php echo $IMAGEM; ?>" data-toggle="modal" data-target="#seu_modal"><i class="fa fa-eye"></i></button>

Capture ela no modal através do script:

$(document).ready(function() {
    $('#seu_modal').on('show.bs.modal', function(event) {
        var imagem = $(event.relatedTarget).data('url');
            $("#foto").attr('src', imagem);
    });
});

No Modal, coloque:

<div class="modal fade" id="#seu_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Foto</h4>
      </div>
      <div class="modal-body">
        <img src="/path/sem_foto.jpg" id="foto" border="0">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Editado para explicar mais uma coisa:

Você está trazendo uma coleção aqui:

<?php foreach ($results as $r) {
       echo '<div style="text-align: center"><td style="width: 14%">
              <img id="fotoPreview" src='.$r->url_foto.'></td>
             </div>';
     } ?> 

Neste lugar, você deveria passar a sua ID e não pegar todas as imagens.

Sua query SQL deveria ser algo assim, juntando as tabelas, você teria a imagem relacionada pela chave estrangeira:

SELECT c.*, if(i.imagem_colaborador != NULL,i.imagem_colaborador, 'sem_imagem.jpg') as foto 
FROM tab_colaboradores c
LEFT JOIN tab_imagens i ON (c.id_colaborador=i.id_colaborador)
where 1 GROUP BY id_colaborador';

E se você colocou tudo na mesma tabela...é só chamar o registro do campo da imagem. Agora se a imagem é a ID do colaborador, é só pega o path/{$id}.jpg. e imprimir no atributo do botão, que pode ser data-qualquercoisa="valor".

O javascript em jQuery se encarrega de "inputar" o valor no "source" da imagem na ação de abrir o modal...

9
  • obrigado por responder, Tentei pelo atributo data-url, mas falhou ao puxar uma imagem que está atrelada ao ID de um registro. a tabela é exibida por linha, conforme imagem acima. Existe um botão para exibir os detalhes, outro para editar e outro para excluir. Agora adicionei um botão para exibir a imagem relacionada aquele registro em um modal. a url da imagem está gravada no banco de dados. 6/04/2016 às 20:53
  • mas vc está fazendo um loop, pq, vc não traz o registro pela id, na posição 0? 6/04/2016 às 21:11
  • o problema está aqui: <?php foreach ($results as $r) { echo '<div style="text-align: center"><td style="width: 14%"><img id="fotoPreview" src='.$r->url_foto.'></td></div>';}?> </div> 6/04/2016 às 21:12
  • esse result, tem que ser 1 result apenas, com a ID. 6/04/2016 às 21:13
  • Esse é o problema @ivanFerrer, Não consegui declarar somente o ID para utilizar no model, diferente do que foi feito em visualizar. 6/04/2016 às 21:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .