Popular combo with ajax call

Asked

Viewed 75 times

0

Well people, I would like to include a data and at the same time update the ajax that is next ...

In the code I inform the content and after selecting the new button I include the content and update the peripheral with 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>

But as I don’t have much notion of how to do the inclusão and at the same time update the AJAX, I came to ask for support from you. Some hint?

php ajax
  • 1

    Does this solve your problem? http://jsfiddle.net/dieegov/WUXe6/1/

  • Help a little! Thanks for the tip!

  • Do you use any framework? And in what language is being developed?

  • After inclusion, it updates the peripheral by calling an iframe with other data! And is being developed in html / php

1 answer

1

To receive and update via Ajax, do so

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 (example.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);

?>

The code above will receive via POST the value of the field, made the data treatment it will return by JSON the data for the customer.

I believe that on this basis you can develop the rest of your application, adapt to your structure.

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.