Johan de Bruin » AJAX http://www.johandebruin.com Programación en php, tutorial de api wordpress y posicionamiento en buscadores seo. Sun, 05 Feb 2012 15:18:06 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Mostrar elementos ocultados con javascript http://www.johandebruin.com/mostrar-elementos-ocultados-con-javascript/ http://www.johandebruin.com/mostrar-elementos-ocultados-con-javascript/#comments Sat, 05 Jun 2010 17:55:26 +0000 Johan http://www.johandebruin.com/?p=593 Aquí una rápida pieza de código que permitira ocultar contenido para luego mostrarlo si así lo quiere el usuario. Empleamos javascript junto al reconocimiento DOM de elementos html para definir el contenido de un div.

<head>
<script type="text/javascript">
function mostrar()
{
	document.getElementById("contenedor").innerHTML = 'hola mundo';
}
</script>
</head>
<body>
<a href="javascript://" onclick="mostrar()">Mostrar contenido del contenedor</a>
<div id="contenedor>
<!-- Este contenedo ahora mismo esta vacio -->
</div>


Y así de facil, únicamente tenemos que hacer referencia con el atributo de onclick a la función que insertara contenido al elemento que queramos mostrar, también sirve para cambiar de imagen, únicamente deberiamos usar el atributo de javascript document.getElementById(“contenedor”).src al hacer click a la imagen…

]]> http://www.johandebruin.com/mostrar-elementos-ocultados-con-javascript/feed/ 0 Integrar jquery con wordpress http://www.johandebruin.com/integrar-jquery-con-wordpress/ http://www.johandebruin.com/integrar-jquery-con-wordpress/#comments Sun, 24 Jan 2010 20:01:13 +0000 Johan de Bruin http://www.johandebruin.com/?p=312 WordPress permite gracias a su api usar códigos de jquery, con esta libreria de javascript permitirás establecer una nueva forma de funcionamiento de las páginas web. Para usar jquery tendremos que invocar su código contenido en un archivo .js gracias a una serie de funciones que wordpress nos proporciona.


Para poder invocar el directorio del plugin, podemos usar el siguiente snnipet de wordpress:

$root_codigo = trailingslashit( WP_PLUGIN_URL.'/'. dirname( plugin_basename(__FILE__) ));

Ahora que ya tenemos establecida la url de la base donde se mantendrán distintos códigos, (como el .js con el jquery), podemos decir a wordpress que incluya susodicho código entre sus códigos:

function codigo() {
wp_enqueue_script('jquery');
wp_enqueue_script('un_nombre_script', $root_codigo.'/codigojquery.js', array('jquery'));
//Linea de código para pasar parametros al jquery
wp_localize_script('un_nombre_script', 'clase', array('algun_parametro' =&gt; 'valor'));
}
add_action('wp_print_scripts', 'codigo');

Usamos wp_localize_script para pasar los parámetros a la función jquery, en este caso la ruta del plugin, si quisieramos acceder en el jquery a dicho parámetro podemos usar la clase que enviamos asi: clase.algun_parametro.

Por último, un ejemplo de la estructura que podria tener codigojquery.js:

$(document).ready(function())
{
     $("a").click(function()
     {
          alert("Gracias por tu visita!");
     });
});

Por último, aquí un video de introducción sobre jquery:

]]> http://www.johandebruin.com/integrar-jquery-con-wordpress/feed/ 0 Actualizar tu feed de twitter con AJAX http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/ http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/#comments Tue, 05 Jan 2010 12:43:13 +0000 Johan de Bruin http://www.johandebruin.com/?p=183 Hoy con la nueva categoria AJAX os mostrare un código en AJAX que os permitira actualizar los mensajes de twitter sin tener que actualizar la página. Para ello, tendremos que dividir el código de programación en 2 archivos. el código de AJAX se mostrará en el archivo cliente, mientras que el código twitterfeed.php será de donde obtendrá los nuevos feed el código en AJAX.

Primero definiremos el código javascript necesario para poder actualizar el feed de twitter. Emplazaremos este código junto al resto de código javascript de la página (orden porfavor).

<script type="text/javascript">
//Primero creamos el objeto XMLHttpRequest que nos permite establecer conexiones HTTP
xmlhttp = new XMLHttpRequest();
//Con esta función actualizamos el contenido de cualquier div con el de algún archivo
function makerequest(serverPage, objID)
{
    var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}
</script>

Ahora, debemos definir el código HTML, la primera vez que mostremos el feed de twitter lo haremos con PHP con tal de que los buscadores puedan rastrearlo, luego usaremos un botón para actualizar el feed usando AJAX y el usuario no tenga que estar refresando la página web.

<ul>
    <div id="twitterfeed">
        <?php include("twitterfeed.php"); ?>
    </div>
</ul>
<center><input type="button" onclick="makerequest('twitterfeed.php','twitterfeed')" value="Actualizar"></center>

Ahora solo nos queda crear twitterfeed.php, para ello usaremos una función que ya publique con anterioridad: Mostrar feed de busqueda en twitter

<?php twitterfeed('<li>','</li>','johandebruin','5'); ?>

Y con esto queda terminado el código, podeis verlo funcionando en esta página web: Blog nexus one.

]]> http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/feed/ 1