Ejecutar javascript cargado por ajax
diciembre 13, 2010 Publicado en Admin-tips, Dia a Dia, JavaScript, Tecnología con Comentarios desactivados
Muchas veces tenemos queremos cargar por ajax una pagina o servicio y ejecutar un código javascript que viene en la respuesta, debido a que la respuesta del ajax es simple texto, esto no es posible de manera natural. Por tal razón es necesario parsear el código javascript de la respuesta y adicionarlo al elemento <HEAD> del documento, para poder utilizarlo posteriormente.
Vamos a ver esto por medio de un ejemplo donde cargamos por ajax una página que se encarga de actualizar la información de un div por medio de javascript. Se que esto se puede hacer directamente, simplemente es para efectos de demostrar como se haria.
La siguiente es la respuesta que devuelve la página que es llamada por ajax:
<div id="ajax-js"> Este div se cargará por medio de AJAX y despues se actualizara desde una función que esta en esta misma respuesta </div> <script type="text/javascript"> document.getElementById("ajax-js").innerHTML = "Ya fui actualizado desde JS"; </script>
Ahora en la página donde hacemos el llamado ajax es necesario colocar la función que se encargara de hacer el parseo de la respuesta, y hacer el llamado a la función una vez la página se ha cargado en su totalidad:
<script> function runJS() { var search = CONTENIDO DE LA RESPUESTA AJAX; var script; while( script = search.match(/(<script[^>]+javascript[^>]+>\s*(<!--)?)/i)) { search = search.substr(search.indexOf(RegExp.$1) + RegExp.$1.length); if (!(endscript = search.match(/((-->)?\s*<\/script>)/))) break; block = search.substr(0, search.indexOf(RegExp.$1)); search = search.substring(block.length + RegExp.$1.length); var oScript = document.createElement('script'); oScript.text = block; document.getElementsByTagName("head").item(0).appendChild(oScript); } } window.onload= function(){runJS();} </script>
De esta manera lograremos ejecutar funciones o codigo Javascript que ha sido cargado mediante AJAX.
En el ejemplo anterior omiti el llamado ajax y la asignación de la respuesta a la función runJS, hay diferentes maneras de hacerlo, como por ejemplo con jquery, donde en el callback del ajax podemos ejecutar la función runJS de una manera mas pro, para una próxima entrada les mostrare como hacerlo.
Tags: ajax, appendChild, callback, createElement, ejecutar, getElementById, getElementsByTagName, head, innerHTML, javascript, jquery, response, respuesta, script
Jquery – AutoCompletar
agosto 10, 2010 Publicado en Admin-tips, JavaScript con 30 Comentarios
En días pasados tuve la necesidad de crear una interfaz web para redacción, donde a partir de un textbox y lo que ellos iban escribiendo, se hacia una consulta a la Base de Datos y les desplegaba unos terminos que contenian el texto hasta ese momento ingresado, para esto utilice jquery y jquery-ui (User Interface), realmente fue muy sencillo y a continuación les muestro los pasos necesarios.
Lo primero que debemos hacer es descargar las librerias de jquery-ui que nos permitirán usar la funcionalidad de autocompletar:
- Ir a http://jqueryui.com/download
- En la parte superior derecha hacer click en “Deselect all components” , lo cual dejara el listado limpio
- En la sección de “Widgets” seleccionar “Autocomplete”, al hacer esto se seleccionarán las librerias necesarias para que el autocomplete funcione sin problemas
- En la Barra de la Derecha seleccionar la versión 1.8.4 de jquery-ui, y hacer clic en Download
- Desempaquetar el archivo en una carpeta llamada jquery
Aqui ya tenemos las librerias necesarias para hacer nuestro autocompletar por medio de javascript.
Ahora creamos una página html cualquiera y la modificamos para incluir las librerias js y css antes descargadas, puede ser en el head o en el body del documento html:
<script src="../jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jquery/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
Vamos a crear un textbox con id “palabra” que será el que utilizaremos para hacer el llamado al autocompletar, y dos campos de tipo oculto donde vamos a almacenar el id y el valor de la palabra que seleccionemos:
<input id="palabra" size="30" value='' > <input type='hidden' id='palabraId' value='' > <input type='hidden' id='palabraTexto' value='' >
Creamos la función que se va a encargar de hacer el llamado al script que trae las posibles opciones a partir del texto ingresado en el textbox:
<script type="text/javascript"> $(function() { //Se encarga de ejecutar la función autocomplete de jqueryui $("#palabra").autocomplete({ source: function(request, response) { //Llamado al script Search.php que devuelve arreglo JSON $.getJSON("/Search.php", { term: request.term }, response); }, minLength: 2, //Numero de caracteres minimos //Cuando el usuario selecciona una opción asigna los valores a los campos ocultos select: function(event, ui) { $("#palabraId").val(ui.item.id); $("#palabraTexto").val(ui.item.value); }, }) //Función que se encarga de desplegar las opciones .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.value + "</a>" ) .appendTo( ul ); }; }); </script>
<style> //Asignamos un gif para mostrarle al cliente que se estan buscando opciones .ui-autocomplete-loading { background: url(../jquery/css/images/indicator.gif) no-repeat right; } #palabra{ width: 15em; } </style>
El script Search.php debe devolver un arreglo de tipo JSON con las columnas “id” y “value” para que sean desplegadas como opciones en el textbox, aca les dejo un ejemplo de respuesta:
[{"id":711,"value":"Columnistas","total":0},{"id":600,"value":"Econom\u00eda","total":0},{"id":510,"value":"F\u00fatbol Colombiano","total":0},{"id":100,"value":"Colombia","total":14},{"id":810,"value":"Telecomunicaciones","total":0},{"id":814,"value":"Consejos","total":0},{"id":1113,"value":"Ecolog\u00eda","total":0},{"id":1548,"value":"contenido","total":1},{"id":1562,"value":"Atl\u00e1ntico","total":4},{"id":1572,"value":"Puerto Colombia","total":1},{"id":1576,"value":"Centro de Convenciones","total":3}]
Esta es una imagen de como se veria el textbox en el momento en que se escriben dos caracteres:
despues en el momento de navegar con las flechas por las posibles opciones:
En siguientes entradas les mostrare como acceder con jquery a las estructuras html, adicionar, modificar y eliminar entidades HTML.
Tags: ajax, autocompletar, autocomplete, javascript, jquery, jqueryui, tags, textbox
