1

chamada.js

function clienteChange() {

   var id = $('#idCliente').val();
   $.ajax({ 
       url:"/Entregas/clientes.endereco.php?id=" + id, 
       dataType : 'json', 
       success:function(result) { 
           $('[name="cham_endereco[]"]').val(result.endereco); 
           $('[name="cham_numero[]"]').val(result.numero); 
           $('[name="cham_bairro[]"]').val(result.bairro); 
           $('[name="cham_cidade[]"]').val(result.cidade); 
       } 
   });  
}

Para buscar os resultados, fiz o clientes.endereco.php desta forma:

$result['endereco'] = "teste";
die(json_enconde($result));

chamadasAdicionar.php

<tbody id="servicosTable" style="width: 898px;">
<tr id="servico_0">
    <td style="line-height: 10px !important;">

        <select class="input-small" name="cham_tiposervico[]">
            <option value="0" selected >Coleta</option>
            <option value="1"  >Entrega</option>
            <option value="2"  >Retorno</option>
        </select>
    </td>
    <td style="line-height: 10px !important; font-size: 12px !important;">
        <input class="input-small" style="width: 222px !important;" type="text" name="cham_endereco[]" value="">
    </td>
    <td style="line-height: 10px !important; font-size: 12px !important;">
        <input class="input-small" style="width: 50px !important;" type="text" name="cham_numero[]" value="">
    </td>
    <td style="line-height: 10px !important;  font-size: 12px !important;">
        <select class="input-small selectCidade" name="cham_cidade[]" id="cham_cidade[]" style="width: 140px;">
        <option value="0">Selecione</option>
            <? foreach($this->data['listaCidade'] as $cidade){ ?>
            <option value="<? echo $cidade->idCidade; ?>"><? echo $cidade->cidade; ?></option>
            <? } ?>
        </select>
    </td>
    <td style="line-height: 15px !important; font-size: 12px !important;">                                                                <select class="input-small selectBairro" name="cham_bairro[]" id="cham_bairro[]" style="width: 120px;">
            <option value="">Selecione</option>
        </select>
    </td>
    <td style="line-height: 15px !important; font-size: 12px !important;">
        <input class="input-small" type="text" name="cham_falarcom[]" value="">
    </td>
    <td>
        <button class="btn" type="button" onclick="removerServico(0)" style="padding: 3px; width: 32px !important;"><i class="icon-trash"></i></button>
    </td>
</tr>


</tbody>

Este é o select que busca os clientes... e ao selecionar, deverá imprimir o endereço de cada um nos seus respectivos campos, endereço, numero, bairro e cidade.

Formulário:

select class="input-xxlarge" style="width: 409px !important;" id="idCliente" name="idCliente" onchange="clienteChange()"

Mas não estou acertando desenvolver, o que teria de errado?

1 Resposta 1

1

HTML

André, vamos à algumas observações, talvez uma delas resolva o problema:

  • Não é necessário (e nem recomendável) nomear os campos como arrays (inserindo "[]" ao final do nome) se este não for o intuito
  • Identificando os campos com "id" é recomendável à fim de que IDs são únicos e por isto o JQuery leva MENOS tempo para encontrar os elementos.

Seus campos poderiam ficar nesta estrutura:

 <input type="text" name="cham_endereco" id="cham_endereco" value="">

Seu select idCliente pode utilizar JQuery para interpretar seus eventos, por isto, você pode remover onchange="clienteChange()" (é uma prática anti-JQUERY):

<select class="input-xxlarge" style="width: 409px !important;" id="idCliente" name="idCliente">

JQUERY

E a requisição JQUERY "escuta" através do evento "change" o que vier a ser escolhido no select idCliente:

$('#idCliente').on('change', function()
{
    var id = $(this).val();

    // ajax
    $.ajax({ 
        url:"/Entregas/clientes.endereco.php?id=" + id, 
        dataType : 'json',
        // além da opção "success", você pode utilizar também as opções 
        // "beforeSend" e "always", assim, ANTES de enviar, poderia por exemplo
        // desabilitar o select box e dentro de "always", habilitar, evitando 
        // que o usuário "brinque" com a requisição do select box (flood)
        beforeSend: function()
        {
            // (código que desabilita o selectbox)
        },
        success:function(result) 
        { 
            $('#cham_endereco').val(result.endereco); 
            // outros campos (...) 
        } 
    })
    .always(function(data)
    {
            // habilitar novamente o selectbox
    });
});

CODEIGNITER

É imprescindível que se retorne o "header" da requisição como JSON (application/json):

$result['endereco'] = "teste"; 

return $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($result));

DICA

Utilize a extensão POSTMAN do CHROME, é essencial para validações e simulações AJAX sem precisar utilizar uma linha de código.

5
  • Então, sobre o nome do campo tem que ser com [] porque se trata de um array, onde postaremos vários campos com o mesmo nome, podendo adicionar com um botão ou remover com outro. No mais, farei os testes para ver, é uma idéia interessante... Agradeço. Commented 24/06/2015 às 1:48
  • Opa @AndréBaill, sim! Se esta é a intenção, desculpe o intrometimento então hehe. Mas o problema está no retorno. Pelo POSTMAN você consegue ver o tipo de documento (precisa vir como JSON). Se estiver online, há ferramentas como webconfs.com/http-header-check.php para ver o header Commented 24/06/2015 às 1:51
  • Não se esqueça de votar na minha resposta se obter êxito hehe. Commented 24/06/2015 às 1:56
  • Ok Felipe, grato pela ajuda. Farei os testes. Usa skype ai? Abraço! Commented 24/06/2015 às 2:34
  • Puts cara, não uso =/ Commented 24/06/2015 às 2:39

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 .