Sucede que tengo una web en WordPress en la que cada entrada tiene enlaces de descarga que son generados y obtenidos usando PHP desde un campo de Custom Field cada vez que se carga el post, entonces deseo que ese código PHP ya no se ejecute cada vez que se visualiza una entrada si no que se ejecute solo si el usuario hace click en un botón que lo llamaremos "Generar enlaces" el problema es que deseo que no se recargue la página al pulsar el botón (Usar Ajax), deseo que al pulsar el botón este desaparezca y se comience a ejecutar el código PHP que genera los enlaces y por supuesto aparezcan los botones de descarga generados segundos después de que PHP haya procesado todo el código. Es decir en un principio aparezca solo un único botón llamado "Generar enlaces" que al pulsarlo este desaparezca y se reemplace este fragmento de la página por los botones de descarga como en la siguiente imagen:
Necesariamente es necesario que solo se ejecute el fragmento de código PHP que genera los botones de descarga cuando se oprime el botón porque la razón es que PHP se toma en ejecutar ese código unos 50 segundos y cada vez que se carga una entrada esperar todo ese tiempo es un problema grave de experiencia para el usuario.
Tengo el siguiente código que es el que mejor se asemeja a la solución del problema, pero como mencioné ante, el problema es que necesito devolver y ejecutar código PHP no HTML como lo hace este.
Esto va en el single.php de las entrada (ó index.php de cada entrada) es el código que
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function llamar(){
$.ajax({
url: '/wp-content/themes/NOMBREDEMITEMA/generador.php',
type: 'post',
success: function (data) {
$("#resultado").html(data);
}
});
}
</script>
</head>
<body>
<button type="button" name="name" class="clase" onClick="llamar();">Generar Enlaces</button>
Resultado: <span id="resultado"></span>
</body>
</html>
En vez de leer el HTML que devuelve la variable 'data' de Ajax necesito ejecutar código PHP (El cual lee el Custom Field del post que contiene URL's de descarga y genera botones de descarga para cada uno) dentro del mismo single.php (No desde una fuente externa como lo está haciendo acá leyendo el resultado HTML de generador.php).
Les agradezco de antemano toda su ayuda !!
NUEVO CÓDIGO IMPLEMENTADO single.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/NOMBREDEMITEMA/js/script.js"></script>
<button id="btnEnviar">Enviar</button>
<div id="result"></div>
script.js
$(function() {
var $btnEnviar = $('#btnEnviar');
var $divResult = $('#result');
$btnEnviar.on('click', function() {
$divResult.empty();
var request =
$.ajax({
url: "/cont/themes/NOMBREDEMITEMA/generador.php",
method: "GET",
dataType: "html"
});
request.done(function(data) {
var htmlButtons = '';
$btnEnviar.hide()
$("#result").html(data);
});
request.fail(function(jqXHR, textStatus) {
alert("Error en la petición: " + textStatus);
});
})
});
generador.php
<?php
echo 'Hola Mundo';
?>
CÓDIGO SOLUCIÓN @alo Malbarez (EN PROCESO)
functions.php
<?php
// imprimir el boton en el hook luego del content filter si hay customfield
function EMP_Boton_add_to_content( $content ) {
$btnContent = "";
if( is_single() ) {
$postID = get_the_id();
$ajax_url = admin_url('admin-ajax.php');
$elCampoCustom = types_render_field("prueba-enlaces", array("output" => "raw"));
if(!empty($elCampoCustom)) {
// abro buffer asi el editor me colorea el html
ob_start();?>
<button class="button button-primary" id="mostrarEnlaces-<?php echo $postID;?>">Mostrar enlaces</button>
<div id="resultados-<?php echo $postID;?>"></div>
<script>
document.getElementById("mostrarEnlaces-<?php echo $postID;?>")
.onclick = function() {
document.getElementById("resultados-<?php echo $postID;?>")
.innerHTML = "<em>Procesando aguantame los trapos...</em>";
const formData = new URLSearchParams();
formData.append("action", "post_get_enlacesCampoCustom");
formData.append("post_id", <?php echo $postID;?>);
fetch(
"<?php echo $ajax_url;?>",
{
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: formData.toString(),
}
)
.then(function(response) {
return response.text();
})
.then(function(body) {
document.getElementById("resultados-<?php echo $postID;?>").innerHTML = body;
});
};
</script>
<?php
// cierro buffer, lo guardo en una var
$btnContent = ob_get_clean();
}
}
// retorno el content + el html generado
return $content . $btnContent;
}
add_filter( 'the_content', 'EMP_Boton_add_to_content' );
// action para usuarios anónimos: wp_ajax_nopriv_{action}
add_action(
'wp_ajax_nopriv_nombreDeTuAction',
'nombreDeTuFuncionParaElAction' );
// action para usuarios logueados: wp_ajax_{action}
add_action(
'wp_ajax_nombreDeTuAction',
'nombreDeTuFuncionParaElAction' );
function post_get_enlacesCampoCustom(){
$elCampoCustom = types_render_field("prueba-enlaces", array("output" => "raw"));
// si tiene campo y si es ajax
if(!empty($elCampoCustom) && defined( 'DOING_AJAX' ) && DOING_AJAX ) {
// abro buffer asi el editor me colorea el html
ob_start();
//COMIENZO DE MI CODIGO GENERADOR Y CLASIFICADOR DE ENLACES
echo 'Hola Mundo by oijm17';
//FIN DE MI CODIGO GENERADOR Y CLASIFICADOR DE ENLACES
// cierro buffer, lo guardo en una var
$responseContent = ob_get_clean();
echo $responseContent;
}
die(); // sin esto se muestra un 0
}
function nombreDeTuFuncionParaElAction(){
// Aquí procesamos el action
if (!empty($_POST['unparametro'])) {
echo "El parametro es:". $_POST['unparametro'];
}
// el procesador ajax por default devuelve un 0 al final, aquí evitamos eso
die();
}
?>
<script>
jQuery.post(
"https://www.midominio.com/wp-admin/admin-ajax.php",
{
'action': 'nombreDeTuAction',
'unparametro': 123
},
function(response) {
console.log('La respuesta es: ', response)
}
);
</script>
request.done(function(data) {
es donde se trata la respuesta del servidor cuando ésta es exitosa. Pero ahora mismo no haces nada con la respuesta, que vendría en el parámetrodata
que está entre paréntesis. Si por ejemplo pones esto:$divResult.append(data);
verás aparecer en eldiv
la palabraHola mundo
que está devolviendo el servidor. Si observas el ejemplo basado en Github, se recorre el JSON, creando botones (dentro deleach
) y luego esos botones se agregan aldiv
. Quizá debí explicar mejor esa parte y no lo hice por rapidez.