4

Galera, como posso fazer um script para salvar todo dado logo após sua inserção. No caso a view seria essa.

inserir a descrição da imagem aqui

Após digitar e teclar enter o dado já seria salvo no bd.

Qual a melhor forma de fazer isso?

Aqui o trecho do meu form:

<!-- Domain start -->
    <label for="domain_input">Domains</label>
    <div class="input-group">
        <input id="domain_input" name="domain_input" type="text" class="form-control" placeholder="Add domain" required="required" pattern="[A-Za-z0-9]{1,20}"/>
        <span class="input-group-btn">
            <button id="add_domain_button" class="btn btn-default" type="button">
                <i class="glyphicon glyphicon-plus"></i>
            </button>
        </span>
    </div>
    <br/>
    <table id="domain_list" class="table table-responsive">

    </table>

</div>
<!-- Domain end -->

Acredito que eu não esteja sabendo "pegar" os dados inseridos nessa table e nem como realizar essa inserção (no caso jogar os dados para a controller de alguma forma (post talvez?)).

Tentei com algumas funções de keyevent mas sem sucesso (falha minha acredito).

Edit1@

Consegue com alert mostrar alguns dados inseridos na tabela com o seguinte code

<script>
  function testa() { 
    $('#lc_searchresult > table > tbody > tr').each(function() {
    var data = $(this).find('td').text();
    alert(data);        
}); }
</script>

Porém, parece falhar as vezes e vir campo em branco.

A dúvida continua em como eu farei para salvar os dados no banco assim que o usuário inserir um item. Inseriu - salvou.

5
  • 1
    Está bastante ampla sua pergunta. Não que ela não seja boa. Uma solução, bastante usada, seria usar o AJAX. Com o javascript você "chama" um arquivo php que salva esses dados e atualiza uma div. Como se fosse um "chat". Dá uma pesquisada, tem muitos exemplos na internet. Se você tiver um problema mais específico ai você posta ele aqui que será mais fácil de te ajudar. Commented 8/05/2018 às 1:19
  • Acho que não soube me explicar, eu achei alguns exemplos, mas realmente não sou bom com js e queria continuar escrevendo código que eu consiga entender. Basicamente eu quero realizar uma query e salvar no banco cada vez que o usuário inserir algo nesse campo. Já achei "n" exemplos, inclusive no momento estou tentando, <script> $("input[name=domain_input]").keypress(function(){ $.post( "<?=base_url()?>protocol/add_domain", { dado: $("input[name=domain_input]").val() } ); }); </script> porém sigo não conseguindo trabalhar direito com esses dados do table.
    – Guto G
    Commented 8/05/2018 às 1:29
  • Entendi. Coloque esse código que você comentou aqui, na pergunta. Vai ajudar alguém a te responder. Já salvei aqui nos favoritos. Commented 8/05/2018 às 1:35
  • 1
    Se ninguém responder até amanhã. Eu farei um exemplo para você. Commented 8/05/2018 às 1:36
  • Fico grato pela ajuda amigo, tenha uma ótima noite.
    – Guto G
    Commented 8/05/2018 às 1:38

1 Resposta 1

3

A pergunta não inclui jQuery mas usar esse framework as vezes facilita o trabalho, então uma forma que você poderia fazer o que quer é a seguinte:

  1. Coletar os dados do form : Olhe esse post sobre serializeArray()
  2. Convertê-los para o formato JSON: Explicado abaixo
  3. Enviá-los via AJAX para o PHP
  4. No script PHP convertê-los para array com json_decode() e salvar no BD
  5. Se obtiver resposta de sucesso do PHP, insere o item na página.

OBS:

PASSO 1

Os dados coletados do form com serializeArray() estarão no seguinte formato

[ { name: "domain-input", value: "meuConteúdo" }, 
  { name: "domain-input2", value: "conteúdo qualquer" } 
] 

PASSO 2

var unindexed_array = $("form").serializeArray();  // Coleta os dados do form
var jsonData = {}

$.each(unindexed_array, function(i, item) {
    // Para cada item em 'unindexed_array', fazer o que está aqui dentro.
    jsonData[item["name"]] = item["value"];  // salva 
});
    

Depois disso, jsonData estará no seguinte formato (JSON):

jsonData = { 
     "domain-input" : "meuConteúdo",
     "domain-input2" : "conteúdo qualquer"
 }

PASSO 3

$.ajax({
        data: jsonData,           // dados a serem enviados
        dataType: "json",         // Formato do dado **recebido como resposta do servidor**.  html, json, text ...
        method: "post",           // post ou get
        url: "myPHPscript.php",   // url invocada
        success: function(data, textStatus, jqXHR) {
            // Executado em caso de sucesso.
            alert(data+" "+textStatus+" "+jqXHR+" ");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Executado em caso de erro.
            alert(jqXHR+" "+ textStatus+" "+ errorThrown);
            error();
        }
    });

Você pode ver mais nesse post ou na documentação do jQuery.

PASSO 4

Receber os dados em PHP com json_decode().

Arquivo PHP:

$domain-input = json_decode($_POST["domain-input"], true);
$domain-input2 = json_decode($_POST["domain-input2"], true);
// Salva no BD

if (sucesso) { 
    $resposta_array['status'] = 'success';
} else {
    $resposta_array['status'] = 'error';
}

echo json_encode($resposta_array);

Espero ter ajudado.


EDIÇÃO

No PASSO 3, para garantir que os dados passados estejam no formato JSON, você pode usar a função JSON.stringify do Javascript. O que ela faz é converter o argumento passado à ela para uma string JSON - o que já era de se esperar pelo seu nome hehe. Ainda, acrescentar contentType: "application/json" ao objeto de opções passado à função $.ajax. Então:

$.ajax({
        contentType: "application/json",  
        data: JSON.stringify(jsonData),                   // dados a serem enviados agora com a certeza de estarem em JSON.
        dataType: "json",                 // Formato do dado **recebido como resposta do servidor**.  html, json, text ...
        method: "post",                   // post ou get
        url: "myPHPscript.php",           // url invocada
        success: function(data, textStatus, jqXHR) {
            // Executado em caso de sucesso.
            alert(data+" "+textStatus+" "+jqXHR+" ");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // Executado em caso de erro.
            alert(jqXHR+" "+ textStatus+" "+ errorThrown);
            error();
        }
    });

No PASSO 4, o correto seria

header('Content-Type: application/json; charset=utf-8');    // Altera o cabecalho para que o retorno seja em JSON

$aDados = json_decode(file_get_contents("php://input"), true); // Ver comentário abaixo.

// Verificar se foi recebido dados
// Usar assim: $aDados['domain-input']
// Salvar no BD

if (sucesso) { 
    $resposta_array['status'] = 'success';
} else {
    $resposta_array['status'] = 'error';
}

echo json_encode($resposta_array);         // Converte para JSON e imprime na página.

A expressão file_get_contents("php://input") é usada para coletar os dados enviados pelo AJAX porque $_POST estará vazio já que o content-type do pedido (leia mais aqui) será application/json (passado pela função ajax) o que não é suportado pela variável $_PHP segundo a sua documentação.

Um problema causado por isso (e que talvez não faça diferença para a maioria dos casos) é que php://input não estará disponível caso o form seja enviado usando enctype="multipart/form-data" o que significa que não será possível incluir, por exemplo, uploads de imagens. Para o seu caso, não parece haver problemas já que você enviará apenas textos.

3
  • 1
    Ótima resposta. Commented 8/05/2018 às 14:36
  • 1
    Cara, sua resposta foi simplesmente fantástica. Existe muito material sobre isso na internet, mas para quem está começando no mundo do js fica tudo um quanto confuso. Novamente, muito obrigado.
    – Guto G
    Commented 8/05/2018 às 18:30
  • Que bom que a resposta te ajudou. Fiz algumas edições importantes a fim de funcionar. Qualquer dúvida pergunta aqui e eu ou mais alguém pode tentar te ajudar. Commented 9/05/2018 às 16:15

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 .