Return database data in the label with Javascript

Question

Return database data in the label with Javascript

Navigation

#1 by (0 votes)

0

I need to return the database data inside the inputs when I select the "Edit" button without the page being reloaded, however, by clicking "Edit", I see that the button action changes, according to the javascript code, but the inputs are not filled with the data that is in the database. Here's the script:

$(document).on('click','.update', function(){
    var id = $(this).attr("id");
    $.ajax({
        url:"../control/control_salvaEdicao.php",
        method:"POST",
        data:{id:id},
        datatype:"json",
        success:function(data){
            $('#action').text("Editar");
            $('#id').val(id);
            $('#nome').val(data.nome);
            $('#sobrenome').val(data.sobrenome);
            $('#endereco').val(data.endereco);
        }
    });
});

HTML

<head>
    <title>Cadastro de Pessoas</title>
    <link rel="stylesheet" type="text/css" href="Css/Style.css"/>
    <script language="JavaScript" src="Js/jquery-1.12.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><linkrel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">       
</head>
<body>
    <div id="tudo">
        <div id="pessoas">      
        </div>
        <div id="boxcentral" align="center">
            <label>Nome: </label>
            <input type="text" name="nome" id="nome"/>
            </br></br>
            <label>Sobrenome: </label>
            <input type="text" name="sobrenome" id="sobrenome"/>
            </br></br>
            <label>Endereço: </label>
            <input type="text" name="endereco" id="endereco"/>
            </br></br>
            <input type="hidden" name="id" id="id"/>
            <button type="button" name="action" id="action">adicionar</button>
            <div id="resultado">
            </div>  
        </div>

File editaEvento.php

if (isset ($_POST['id'])){

$pessoa = new Pessoa();
$peopleDAO = new PessoaDAO();   

$pessoa->getId($_POST['id']);

        $retornoPessoa = $peopleDAO->buscaPessoaID($pessoa);

        if($retornoPessoa != null){
            foreach ($retornoPessoa as $obj){
                $obj->getId();  
                $obj->getNome();    
                $obj->getSobrenome();   
                $obj->getEndereco();
            }

            return $obj;

        }
}

File salvaEdicao.php

if($_POST["action"]== "editar"){    
$pessoa = new Pessoa();
$pessoaDAO = new PessoaDAO();   

    $pessoa->setId($_POST['id']);
    $pessoa->setNome($_POST['nome']);
    $pessoa->setSobrenome($_POST['sobrenome']);
    $pessoa->setEndereco($_POST['endereco']);



    try{
        $resultado = $pessoaDAO->update($pessoa);
    }catch(exeption $e){
        $erro=$e->getmessage();
        echo $erro;
    }

    if ($resultado == true){
        $sucess_message="Cadastro atualizado com sucesso!";
        echo $sucess_message;
    }       
}

php javascript assincronismo ajax json

asked by anonymous 12.12.2017 / 01:34

1 answer

Gmail notifies that email is usually used to steal information when I use content-type="text / html; charset = utf-8 " Multiple requests with ajax - Jquery

score 0 · Answer 1

You're just returning a success message, what you have to do is return the updated object:

php:

 if ($resultado == true){
            $sucess_message="Cadastro atualizado com sucesso!";
            echo json_encode([
                   'message' => $sucess_message, 
                   'pessoa' => $pessoa
            ]);
    }

ajax:

$(document).on('click','.update', function(){
    var id = $(this).attr("id");
    $.ajax({
        url:"../control/control_salvaEdicao.php",
        method:"POST",
        data:{id:id},
        datatype:"json",
        success:function(data){
            $('#action').text("Editar");
            $('#id').val(data.pessoa.id);
            $('#nome').val(data.pessoa.nome);
            $('#sobrenome').val(data.pessoa.sobrenome);
            $('#endereco').val(data.pessoa.endereco);
        }
    });
});

This is when you click on the event to save it, if it is in the event to pull the data I believe that only the URL of your ajax that is incorrect should be url:"../control/control_editaEvento.php"

Try to also put a console.log on your Ajax return to see how the result is coming from, if you come from the editEvent.php file the correct way to get the data is:

$('#action').text("Editar");
$('#id').val(data.id);
$('#nome').val(data.nome);
$('#sobrenome').val(data.sobrenome);
$('#endereco').val(data.endereco);

The ID is probably coming filled because note you get the value of the variable you pass to ajax.