How to pass the `id` of a post via``by ultilizing AJAX?

Question

I would like to update via ajax, but I’m having a hard time sending the id of postage via post or get for the external form: php/editarDespesa.php. The form is not displaying the dados, but without using ajax the data appears in the form.

Table ec_despesas have the following fields:

`id, aba, status, nome, categoria, conta, valor, data`

---

index php.:

<div id="dadosDespesas">
                <?php
                    $despesas = dbRead('despesas', "WHERE aba = 'Despesas'", 'id, nome, categoria, valor, data');

                    if(!$despesas)
                        echo '<h3>Nenhuma Despesa Para Pagar!</h3>';
                    else
                        foreach ($despesas as $visual):
                            $valorNormal = $visual['valor'];
                            $valorDecimal = decimalBr($valorNormal);

                            echo '<li>'
                                    .'<p class="b">'.$visual['nome'].'</p>'
                                    .'<p>'.$visual['categoria'].'</p>'
                                    .'<p>'.$valorDecimal.'</p>'
                                    .'<p>'.$visual['data'].'</p>'
                                .'</li>';

                ?>
                <a class="editarDespesa" href="php/editarDespesas.php?id=<?php echo $visual['id']; ?>">Editar</a>

                <?php endforeach; ?>
            </div>

---

js control.

    // ABRE A CAIXA DE FORMULARIO PARA EDITAR
$(".editarDespesa").click(function() {
$("#formularioDespesas[class]") .attr("class","formVisivel");

$.post("php/editarDespesa.php?id=<?php echo $visual['id']; ?>", function(data){
    $("#formularioDespesas").html(data);
});

    return false;
}); });

---

editarDespesa.php

<?php
require_once 'config.php';
require_once 'database.php';

if( !isset( $_GET['id'] ) || empty($_GET['id']) )
    header('Location: index.php');
else{

    $id   = dbEscape( strip_tags( trim( $_GET['id'] ) ) );
    $post = dbRead( 'despesas', "WHERE id = '{$id}' LIMIT 1");

        $post = $post[0];
} ?>


<div class="titulo">
                    <span>Editar Despesa</span>
                    <a id="fecharFormularioDespesas" class="icon-close"></a>
                </div>
                <div id="conteudo">
                    <form action="" method="post">  
                        <li><p>Descrição</p><input id="nomeDespesas" name="descricao" placeholder="Nome" type="text" value="<?php echo $post['nome']; ?>"></li>
                        <li><p>Valor</p><input id="valorDespesas" name="valor" placeholder="0.00" type="text" value="<?php echo $post['valor']; ?>"></li>
                        <li id="toggle1"><p>pago</p><input id="statusDespesas" type="checkbox" name="status" value="0">
                            <label for="statusDespesas" data-text-true="Sim" data-text-false="Não"><i></i></label>
                        </li>
                        <li><p>Data</p><input id="dataDespesas" name="data" maxlength="10" placeholder="30/12/2014" type="text" value="<?php echo $post['data']; ?>"></li>
                        <li><p>Categoria</p><select id="categoriaDespesas" name="assunto">
                            <option value="<?php echo $post['categoria']; ?>"><?php echo $post['categoria']; ?></option>
                            <option value="Salário">Salário</option>
                            <option value="Investimentos">Investimento</option>
                            <option value="Contas">Conta</option>
                            <option value="Empréstimo">Empréstimo</option>
                            <option value="Serviços prestados">Serviços prestados</option>
                            <option value="Outros">Outros</option>
                        </select></li>
                        <input id="abaDespesas" type="hidden" name="aba" value="Despesas"/>
                        <input id="contaDespesas" type="hidden" name="conta" value="bb"/>
                    </form>

                    <button id="botao_limparDespesas">
                        <span>LIMPAR</span>
                    </button>
                    <button id="butao_alterarDespesas" type="submit">
                        <span>ALTERAR</span>
                    </button>                   
                    <div id="loardDespesas"></div>
                </div>

Answer 1

In your index.php you give a href anchor to edit the expense. You can use this href that creates here:

<a class="editarDespesa" href="php/editarDespesas.php?id=<?php echo $visual['id']; ?>">Editar</a>

That is, in your file .js use like this:

$(".editarDespesa").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    $("#formularioDespesas[class]").attr("class", "formVisivel");

    $.post(href , function (data) {
        $("#formularioDespesas").html(data);
    });

    return false;
});

Answer 2

I know it’s been a while, but as some people still use this question as a basis, I decided to refine it by following what @Sergio did.

<a class="editarDespesa" href="#" data-id="<?php echo $visual['id']; ?>">Editar</a>

Switch to using the attribute date adding the value to it by setting the data-id="".

And in the javascript block insert like this:

$('body').on('click','.editarDespesa',function (e) {
e.preventDefault();
var id = $(this).data('id');
var href = 'php/editarDespesas.php?id='+id;
$("#formularioDespesas[class]").attr("class", "formVisivel");

$.post(href , function (data) {
    $("#formularioDespesas").html(data);
});

return false;
});

Personally I prefer to work that way.