Pasar variable PHP a JavaScript

Question

Pasar variable PHP a JavaScript

19 abr 2013, 01:02:53

Vistas: 21.5K

Votos: 17

¿Existe alguna posibilidad de pasar algunas variables PHP a JavaScript para poder usarlas después?

Solo en single.php.
He oído hablar de wp_enqueue_scripts pero con eso es necesario declarar una ruta a un archivo JS, pero no necesito uno.

Sebastian Corneliu Vîrlan

293

plugins desarrollo de plugins páginas jquery plantillas

Comentarios

¿Qué quieres decir con más tarde y dónde quieres usar las variables (en relación a dónde están las variables PHP)? Por supuesto que puedes hacer echo/print de código JavaScript a través de PHP, y así insertar valores de variables PHP. Pero supongo que esto no es lo que quieres...

tfrommen

19 abr 2013 01:17:47

Creé una nueva tabla en la base de datos con algunos response.id`s de la API de Facebook. Esta es la tabla: action_id, user_id, post_id, fb_id donde fb_id es response.id de una acción de Facebook. Luego en single.php tengo un botón donde al presionarlo debo eliminar la acción de Facebook con la API: FB.api('/'+fb.response, 'delete'); donde fb.response debería ser fb_id de la tabla.

Sebastian Corneliu Vîrlan

19 abr 2013 01:23:40

Todas las respuestas a la pregunta

Comentarios

Soy un poco principiante en esto, así que intento implementar esto en mi WordPress: http://papermashup.com/jquery-iphone-style-ajax-switch/. Como puedes ver hay un archivo js y unas pocas líneas de código js para poner en el archivo de uso. ¿O puedo poner esas pocas líneas de código en otro archivo?

Sebastian Corneliu Vîrlan

19 abr 2013 01:30:48

¿Entonces para cualquier acción pequeña de javascript debería crear un archivo? Si estás disponible ¿puedes agregarme en skype: sebyku17?

Sebastian Corneliu Vîrlan

19 abr 2013 01:40:58

Eso depende de lo que quieras hacer, dónde quieras hacerlo, etc. En general: No, no tienes que usar un archivo JS externo. Pero si decides hacerlo, puedes poner lo que quieras dentro de un solo archivo. No es necesario tener múltiples archivos si tienes múltiples funciones, si es eso lo que estabas preguntando. Sin embargo, ya aceptaste esta (en mi opinión bastante compleja y en tu caso un poco excesiva clase de) respuesta - sin haberla entendido completamente, según lo que veo. Sin ofender, @Johannes. ;)

tfrommen

19 abr 2013 01:45:33

Bueno, al final todo se reduce a preferencias personales, supongo. Pero una cosa es segura: cuanto más grande se vuelve tu base de código, más difícil será leerla más adelante, y más importante es mantenerla limpia. Personalmente, no me gusta tener código del lado del servidor y del cliente en el mismo archivo, con excepciones, obviamente. Un simple onclick de una línea puede dejarse en línea, pero también renuncias al poder de wp_localize_script.

Johannes Pille

19 abr 2013 01:46:08

Esta es mi página: http://funny-videoro.com/the-dark-knight-rises-trailer-oficial/, después de presionar en el reproductor e iniciar sesión, en la parte inferior del reproductor hay un botón, cuando lo presionas para apagar debería eliminar la publicación de Facebook. Intentaré crear un archivo js para todas las funciones. Espero que funcione.

Sebastian Corneliu Vîrlan

19 abr 2013 01:49:13

Mostrar los 9 comentarios restantes

https://developer.wordpress.org/reference/functions/wp_add_inline_script/ debería ser la opción preferida hoy en día

EDIT: De la documentación anterior:

function mytheme_enqueue_typekit() {
   wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );
   wp_add_inline_script( 'mytheme-typekit', 'try{Typekit.load({ async: true });}catch(e){}' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );

Así que primero encolas el script, y después pasas las variables

Sin embargo, este código simplemente genera lo siguiente

<script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"></script>
<script type="text/javascript"> try{Typekit.load({ async: true });}catch(e){} </script>

En mi caso, simplemente expongo los datos que necesito escribiendo directamente el código JavaScript (en la plantilla) y usando una variable global de JS con un nombre específico (no he encontrado una mejor manera) (usando Timber, PHP puro debería ser equivalente)

<script>
    my_global_variable.data1 = {{ custom_timber_function()|json_encode }}
</script>

$twig->addFunction(new Timber\Twig_Function('custom_timber_function', function () {
    return [
      'theme' => get_stylesheet_directory_uri(),
    ];
}));

GWorking

165

20 jul 2020 18:46:11

Comentarios

Estoy de acuerdo con tu evaluación, pero las respuestas deben ser autosuficientes y no solo un enlace. ¿Podrías por favor agregar un ejemplo y una explicación?

Nicolai Grossherr

20 jul 2020 19:12:21

totalmente correcto

GWorking

20 jul 2020 19:57:14

Después de leer tu comentario, entiendo que te gustaría hacer algo como esto:

// Hacer algo para obtener el ID
$facebook_id = ...

// Crear e imprimir el botón
echo '<input onclick="FB.api(\'/\'+'.$facebook_id.', \'delete\')" />';

tfrommen

9.23K

19 abr 2013 01:29:52

Comentarios

No, esta es la página en la que estoy trabajando: http://funny-videoro.com/the-dark-knight-rises-trailer-oficial/. Si quieres puedes iniciar sesión en el sitio web. Entonces verás un botón estilo iOS con jQuery. Cuando lo deslizo hacia "off" debo eliminar con la API de Facebook una publicación. El ID de la publicación está en la base de datos.

Sebastian Corneliu Vîrlan

19 abr 2013 01:35:19

Bueno, eso es básicamente lo que escribí en mi respuesta. Recupera el ID de la base de datos y guárdalo en una variable. Luego imprímelo directamente en tu llamada de función JavaScript de una línea. El <input ... /> y su función era solo para propósitos de demostración. Según lo que entendí, ya está todo dicho lo que necesitas. Si no, por favor trata de explicar un poco más, pero en tu pregunta, no en comentarios.

tfrommen

19 abr 2013 01:39:10

No quiero usar código PHP y JS en la misma línea, en WordPress hay algunas funciones automáticas...

Sebastian Corneliu Vîrlan

19 abr 2013 02:24:58

Johannes Pille 11.1K · Accepted Answer · 2013-04-19T01:21:13Z

Método de mejores prácticas

Echa un vistazo a wp_localize_script, que está diseñado para hacer exactamente eso.

Pero requiere el uso previo de wp_enqueue_scripts, por lo que necesitarás mover tu JS a un archivo separado.
Sin embargo, valdrá la pena esos pocos minutos de esfuerzo, seguro.

function wpse_96370_scripts()
{
    if ( is_single() ) {

        wp_register_script(
           'your_script_handle',
           get_template_directory_uri() . '/js/your-script.js',
           array( /* dependencias */ ),
           1.0,
           true
       );

       wp_enqueue_script( 'your-script-handle' );

       $script_params = array(
           /* ejemplos */
           'post' => 99,
           'users' => array( 1, 20, 2049 )
       );

       wp_localize_script( 'your-script-handle', 'scriptParams', $script_params );

    }
}
add_action( 'wp_enqueue_scripts', 'wpse_96370_scripts' );

En el JS podrás usar los parámetros pasados así:

var posts = scriptParams.post,
    secondUser = scriptParams.users[1]; /* el índice comienza en 0 */

// iterar sobre usuarios
for ( var i = 0; i < scriptParams.users.length; i++ ) {
    alert( scriptParams.users[i] );
}

[Edición] Tu situación

Según tu comentario

Creé una nueva tabla en la base de datos con algunos response.id de la API de Facebook. Esta es la tabla: action_id, user_id, post_id, fb_id donde fb_id es response.id de una acción de Facebook. Luego en single.php tengo un botón que al presionarlo debo eliminar la acción de Facebook con la API: FB.api('/'+fb.response, 'delete'); donde fb.response debería ser fb_id de la tabla.

Coloca lo siguiente en la carpeta /js/ de tu tema, créala si no existe.
Llamemos al archivo fb-response.js:

jQuery( '#button_id' ).click( function() {
    FB.api( '/' + fbParams.id, 'delete' );
});

Luego registra, encola y localiza como se mostró anteriormente. Asumiendo que tienes el ID que deseas pasar en, digamos, $fb_id:

wp_register_script(
    'fb-response',
     get_template_directory_uri() . '/js/fb-response.js',
     array( 'jquery' ),
     1.0,
     true
);

wp_enqueue_script( 'fb-response' );

wp_localize_script( 'fb-response', 'fbParams', array( 'id' => $fb_id ) );

Nota: Obviamente, lo anterior asume que esto está en un tema. Si hablamos de un "plugin", modifica las ubicaciones en consecuencia.