2

Boas! Estou a tentar chamar uma função PHP num clique de um botão. A minha solução até agora:

<?php
    $result = getResult($mysqli,"SELECT * from todos WHERE sender = '$username' AND status = '$value' AND journal = '$journal' ORDER BY expiration_date");

    while($row = $result->fetch_array()){
        $receiver = $row['receiver'];
        $sender = $row['sender'];
        $title = $row['title'];
        $todo_text = $row['todo_text'];
        $status = $row['status'];
        $expiration_date = $row['expiration_date'];
        $todo_id = $row['todo_id'];
?> 

<div class="toDo"><b><?php echo $title; ?></b> 
    <ul class='date'>
        <li><img src="icons/date.png" style="width:60px;"></li>
        <li><?php echo "Due " . $expiration_date ?></li>
    </ul>
    <ul>
        <li><?php echo $todo_text; ?></li>
        <li><i><?php echo "assigned to ".$receiver." by ".$sender;?></i></li>
    </ul>

    <?php if($value == 'pending'){?>
    <?php
            if(isset($_POST['delete_x'])){ 
                $todo_id = $_POST['todo_id'];
                deleteToDo($mysqli,$todo_id,$journal);
                exit();
            }

            if(isset($_POST['markAsDone_x'])){ 
                $todo_id = $_POST['todo_id'];
                markToDoAsDone($mysqli,$todo_id,$journal);
                exit();
            }
    ?>
    <form method ="POST" action="">
        <input type="hidden" name="todo_id" value="<?php echo $todo_id ?>"/>
        <input type="image" name = "delete" src="icons/delete.png" style="width:20px"/>
        <input type="image" name = "markAsDone" src="icons/done.png" style="width:20px"/>
    </form>

    <?php } ?>

</div>
<hr> 
<?php 
    } 

Isto funciona. Estou a correr um loop while, logo este código está a ser corrido várias vezes. No meu site, tenho uma página que lista diferentes 'To Do's', e cada um tem um botão 'Delete' e outro 'Mark as Done'. No entanto, quando clico num destes botões, tenho de atualizar a minha página para que esta me dê a listagem dos To Do's. Por exemplo: quero apagar o terceiro To Do da lista. Clico no botão 'Delete' do terceiro To Do, mas por alguma razão a página mostra-me o PRIMEIRO todo do ciclo while. Se atualizar a página, já me aparece a lista atualizada sem esse mesmo To Do. Ou seja: a conexão com a base de dados é feita com sucesso, mas no momento após de clicar na imagem deveria aparecer a listagem já atualizada dos To Do's, mas simplesmente aparece-me o PRIMEIRO To Do do while. A ação é realizada com sucesso, mas o processo não é 'smooth' para o utilizador! A página deveria ser atualizada logo após o clique no botão Delete!

Ainda tentei utilizar um header('location:MINHA_PAGINA') antes dos exits, mas sem sucesso.

Listagem antes de realizar a ação 'Delete': Listagem antes de realizar a ação 'Delete'

O que aparece depois de clicar no icon 'Delete' do terceiro ToDo: O que aparece depois de clicar no icon 'Delete' Alguma sugestão? Obrigado :)

6
  • Coloque o código das funções...
    – MagicHat
    3/11/2016 às 12:55
  • Você poderia postar a parte onde efetivamente imprime o Todo ? Você quer fazer isso somente com PHP mesmo ? O ideal seria usar Javascript e requisições assíncronas para atualizar a página sem dar refresh. 3/11/2016 às 12:55
  • Adicionei o código com o ciclo while, bem como a disposição dos elementos do ToDo. Também já pensei usar Javascript, mas não sei como adaptá-lo..
    – cortereal
    3/11/2016 às 13:02
  • Uma dica @cortereal, está faltando a chave de fechamento do while no código postado.
    – Oliveira
    3/11/2016 às 13:07
  • @Oliveira forgot that! Já atualizei :)
    – cortereal
    3/11/2016 às 13:09

1 Resposta 1

1

Sem Ajax

Seguindo seu modelo (a página é atualizada quando o botão é clicado):

<?php
if(isset($_POST['delete_x'])) { 
    $todo_id = $_POST['todo_id'];
    deleteToDo($mysqli,$todo_id,$journal);
}
    
if(isset($_POST['markAsDone_x'])){ 
    $todo_id = $_POST['todo_id'];
    markToDoAsDone($mysqli,$todo_id,$journal);
}

$result = getResult($mysqli,"SELECT * from todos WHERE sender = '$username' AND status = '$value' AND journal = '$journal' ORDER BY expiration_date");

while ($row = $result->fetch_array()):
        $receiver = $row['receiver'];
        $sender = $row['sender'];
        $title = $row['title'];
        $todo_text = $row['todo_text'];
        $status = $row['status'];
        $expiration_date = $row['expiration_date'];
        $todo_id = $row['todo_id'];
?> 

<div class="toDo"><b><?php echo $title; ?></b> 
    <ul class='date'>
        <li><img src="icons/date.png" style="width:60px;"></li>
        <li><?php echo "Due " . $expiration_date ?></li>
    </ul>
    <ul>
        <li><?php echo $todo_text; ?></li>
        <li><i><?php echo "assigned to ".$receiver." by ".$sender;?></i></li>
    </ul>

    <?php if($value == 'pending'): ?>
    <form method ="POST" action="">
        <input type="hidden" name="todo_id" value="<?php echo $todo_id ?>"/>
        <input type="image" name = "delete" src="icons/delete.png" style="width:20px"/>
        <input type="image" name = "markAsDone" src="icons/done.png" style="width:20px"/>
    </form>
    <?php endif; ?>

</div>
<hr> 
<?php endwhile; ?>

Eu só movi o markToDoAsDone e deleteToDo pro topo do código, antes de realizar a consulta de novo.

Com Ajax

Seria interessante você usar ajax, assim a página não precisaria atualizar, porém envolveria javascript (no caso estou usando jQuery).

O form ficaria assim:

<form>
    <input type="hidden" name="action" value="" />
    <input type="hidden" name="todo_id" value="<?php echo $todo_id; ?>" />
    <input type="image" name="delete" src="icons/delete.png" style="width:20px"/>
    <input type="image" name="markAsDone" src="icons/done.png" style="width:20px"/>
</form>

Quando os botões fossem clicados:

$(document).on('click', '[name=delete], [name=markAsDone]', function(e) {
    // Capturamos o valor de name do botão.
    var actionValue = $(this).attr('name');

    // Atualizamos o valor do action.
    $(this).siblings('[name=action]').val(actionValue);

    // Enviamos o form.
    $(this).parent().submit();

    e.preventDefault();
});

// Quando o form for enviado.
$(document).on('submit', '.toDo form', function(e) {
    var form = $(this);

    $.ajax({
        url: 'url.php',
        method: 'POST',
        data: form.serialize(),
        dataType: 'json',
    }).done(function(r) {
        // resposta aqui.. exemplo:
        if (r.type == 'delete') {
            form.parents('div.toDo').fadeOut(300, function() {
                // Ele vai desaparecer em 300ms e depois
                // será removido.
                $(this).remove();
            });
        }
    });

    // Impedimos o envio padrão.
    e.preventDefault();
});

Você poderia criar um arquivo php somente pra fazer o handling das chamadas ajax (minha preferência), ou usar a mesma página mesmo:

<?php
    if (isset($_POST['action'])) {
        $todo_id = $_POST['todo_id'];
        $resp = array(
            'type' => ''
        );

        switch ($_POST['action']) {
            case 'delete':
                $resp['type'] = 'delete';
                deleteToDo($mysqli, $todo_id, $journal);
            break;

            // Outros cases aqui...
        }

        echo json_encode($resp);
        die();
    }
?>

Vale lembrar que o jQuery.ajax tem outras duas callbacks: fail e always. O callback fail, como o próprio nome diz, vai ser chamado se acontecer algum erro.

O callback always será chamado sempre, com ou sem erro. Você pode ler mais sobre a api ajax aqui.

Fui fazendo o código de cabeça, revisei e acho que vai funcionar, é que agora não tem como eu testar e,e.

3
  • Boas! Deste já muito obrigado pela resposta! A primeira solução de facto funciona, e tem lógica. Agora estou a tentar adaptar o segundo código! No entanto não está a funcionar.. Tentei fazer uma print do actionValue da primeira parte e de facto ele deteta o nome da variável. Também entra no '$(document).on('submit', '.toDo form', function(e) {', mas penso que não consegue chegar ao 'done(function(r) {'. Obrigado e cumps!
    – cortereal
    3/11/2016 às 16:24
  • Perdoe-me, não é type: 'POST' e sim method: 'POST'. Atualizei a resposta.
    – Kiritonito
    3/11/2016 às 17:28
  • Obrigado novamente! Neste momento já consegue fazer delete ao ToDo, mas é necessário fazer o refresh manual para que a lista seja atualizada. Ou seja, não faz o fadeOut do div.toDo
    – cortereal
    3/11/2016 às 17:49

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 .