0

Bem pessoal, gostaria de fazer a inclusão de um dado e ao mesmo tempo atualizar o ajax que se encontra ao lado ...

No código eu informo o conteúdo e após selecionar o botão novo eu incluo o conteúdo e atualizo o periférico com AJAX.

<form name="sai_frm_alte_excl_mode">
<body>
    <table border="0" width="100%">
        <tr>
            <td colspan="3" bgcolor="Silver" align="center">
            <b><font face="arial" color="blue" size="2">Outros Periféricos</font>
            </td>
        </tr>
    </table><br>
    <table border="0" width="100%">
        <tr>
            <td align="right" width="25%">
            <font face=arial color="blue" size=2>Descrição :</font>
            </td>
            <td width="70%" align="left" colspan="3">   
                <input type="text" align="left" size="40" maxlength="45" value="">
            </td>  
            <td width="40%" align="center">
                <button type="submit" style="width:65"><image src="../sai_imag/novo-reg.ico" ></button>
            </td>
        </tr>
<tr>
    <td align=right width=10% >
        <font face=arial color=blue size=2>Periférico :</font>
    </td>
    <td id="td_fk_seq_mode" colspan="3">
    <select name="nm_cb_fk_seq_mode" id="id_cb_fk_seq_mode" style="font-size:13; color:#FF7F00;" width="250">
        <option id="opc_fk_seq_mode" value="0"> ==>Selecione o Periférico<==
        </option>
    </select>
    </td>
</tr>   

Mas como eu não tenho muita noção de como fazer a inclusão e ao mesmo tempo atualizar o AJAX, vim pedir apoio a vocês .. Alguma dica?

4
  • 1
    por acaso isso resolve seu problema? jsfiddle.net/dieegov/WUXe6/1 Commented 23/07/2014 às 13:17
  • Ajuda um pouco! Obrigado pela dica!
    – Felipe
    Commented 23/07/2014 às 13:29
  • Você utiliza algum framework? E em qual linguagem está sendo desenvolvido?
    – Dante
    Commented 23/07/2014 às 13:30
  • Após a inclusão, ele atualiza o periférico assim chamando um iframe com outros dados! E está sendo desenvolvido em html / php
    – Felipe
    Commented 23/07/2014 às 13:36

1 Resposta 1

1

Para receber e atualizar via Ajax, faça dessa forma

HTML

<table>
    <tr>
        <td>
            <label for="descricao">Descrição:</label>
        </td>
        <td>
            <input type="text" id="descricao" class="descricao" />
        </td>
        <td>
            <button type="button" id="Add">Adicionar</button>
        </td>
    </tr>

    <tr>
        <td>
            <label for="periferico">Periférico</label>
        </td>
        <td>
            <select name="periferico" id="periferico">
                <option value="-1" disabled selected>Selecione o Periférico</option>
            </select>
        </td>
    </tr>
</table>

JQuery

$(function(){
    $('#Add').click(function(e){
        e.preventDefault();
        var str = $('#descricao').val();
        var removeEspaco = str.replace(/^\s+|\s+$/g,"");

        if(removeEspaco.length != 0) {

            $.post( "exemplo.php", { periferico: str })
              .done(function( data ) {
                  if(data.status)
                      $('#periferico').append('<option value="'+data.perifericoID+'">'+data.periferico+'</option>');
                  else
                      alert("Erro ao inserir, tente novamente");
              });
        }
        else
            alert("Por favor digite uma descrição");
    });
});

PHP (exemplo.php)

<?php

$data = array (
    'status'    => false
);

if($_POST)
{
    $periferico = $_POST['periferico'];

    if(strlen(trim($perifetico)) != 0)
    {
        //execucao da sua logica para salvar no banco de dados//

        $data = array(
            'status'        => true,
            'periferico'    => $resultadoQuery['periferico'],
            'perifericoID'  => $resultadoQuery['cdPeriferico']
        );
    }
}

echo json_encode($data);

?>

O código acima, irá receber via POST o valor do campo, feito o tratamento do dado ele irá retornar por JSON os dados para o cliente.

Acredito que com essa base você consiga desenvolver o restante da sua aplicação, adapte à sua estrutura.

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 .