Estou desenvolvendo um site wordpress usando templates / temas personalizados, mas estou tendo dificuldade. Quero usar Ajax para chamar uma função quando um usuário clica em um botão. Em uma página, tenho um botão assim: 

<p class="form-submit"> <input name="message_read" type="submit" class="submit button mark-as-read" value= "Mark as read" /> </p>

E tenho uma função jQuery / Ajax como esta: 

jQuery(document).ready(function() { jQuery(".mark-as-read").click(function () { console.log("The function is hooked up"); jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: { action: "mark_message_as_read", }, success: function (output) { console.log(output); } }); }); });

A função acima reside em wp-content/themes/my-theme/js/wp_ajax_calls.js. Eu adicionei o script ao site desta forma:

1) Eu adicionei isso ao meu arquivo functions.php: 

wp_enqueue_script( "ajax calls", get_template_directory_uri() ."/js/wp_ajax_calls.js", array("jquery"), "1.0", true);

2) Incluí o script no cabeçalho. 

<script type="text/javascript" src="https://mysite//wp-content/themes/twentyfifteen/js/wp_ajax_calls.js"></script>

Quando clico no botão como está, a instrução console.log é exibida. No meu entendimento, quero que minha função ajax chame uma função php que me permita usar $ wpdb. Eu tenho isso em functions.php: 

function mark_message_as_read() { global $wpdb; // do stuff. }

É aqui que estou ficando confuso. Tenho duas perguntas principais:

1) Acho que devo ter alguns add_action () “s em algum lugar, mas não sei para onde coloque-os e também não sei que gancho devo usar.

2) Além disso, Eu quero ser capaz de passar dados (o id da mensagem) para a função php para minha consulta de banco de dados. Como faço para passar um argumento para essa função?

Não quero usar algo como if( isset($_POST["message_whatever"]) ) twentyfifteen_message_whatever(); por causa da maneira como as mensagens foram configuradas.

Fico feliz em fornecer mais informações, se necessário. Agradecemos antecipadamente por sua ajuda !!

Comentários

Resposta

  1. Crie um tema filho para não mexer com o código de um tema existente porque da próxima vez que você “atualizar o tema, poderá perder todas as suas alterações (consulte Temas filhos )

  2. Veja como passar valores para sua solicitação ajax: 

    jQuery(document).ready(function() { jQuery(".mark-as-read").click(function () { console.log("The function is hooked up"); jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: { action: "mark_message_as_read", // add your parameters here message_id: $(".your-selector").val() }, success: function (output) { console.log(output); } }); }); });

Você pode fazer algumas pesquisas no Nonces também, para adicionar uma camada de segurança ao seu aplicativo: https://codex.wordpress.org/WordPress_Nonces

  1. Finalmente, o código PHP para lidar com a solicitação (aqui também você deve lidar com o nonce no código da vida real): 

    // register the ajax action for authenticated users add_action("wp_ajax_mark_message_as_read", "mark_message_as_read"); // register the ajax action for unauthenticated users add_action("wp_ajax_nopriv_mark_message_as_read", "mark_message_as_read"); // handle the ajax request function mark_message_as_read() { $message_id = $_REQUEST["message_id"]; // add your logic here... // in the end, returns success json data wp_send_json_success([/* some data here */]); // or, on error, return error json data wp_send_json_error([/* some data here */]); }

Comentários

  • Muito obrigado! Eu ' definitivamente darei uma olhada nos nonces também. : D

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *