Ejemplos de Ajax

ejemplosAjax

Las función GET:

 function llamadaAjax(action) {
 var mail = document.getElementById("mail").value;
 var num = document.getElementById("numero").value;
 var miajax = new XMLHttpRequest();
 miajax.onreadystatechange = function () {
 if (miajax.readyState == 4 && miajax.status == 200) {
 document.getElementById('resultado').innerHTML = miajax.responseText;
 }
 }
 miajax.open('GET', 'test.php?num=' + num + '&mail=' + mail + "&action=" + action, true);
 miajax.send();
 }

La función POST:

  function llamadaAjaxPost() {
            var mail = document.getElementById("mail").value;
            var miajax = new XMLHttpRequest();
            miajax.onreadystatechange = function () {
                if (miajax.readyState == 4 && miajax.status == 200) {
                    document.getElementById('resultado').innerHTML = miajax.responseText;
                }
            }
            miajax.open('POSt', 'testpost.php', true);
            miajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            miajax.send("mail="+mail);
        }

Ejemplo de autocomplete con AJAX

Código html:

 $( "#paises2" ).autocomplete({
 source: "paises_lista.php"
 });

Código php:

<?php
include_once 'conexionPDO.php';
$sql = "select * from country where country_id=-1";
$sql = "select country as value from country where country like '%" . $_GET["term"] . "%'";
$resul = $conn->query($sql);
$paises = $resul->fetchAll();
echo json_encode($paises);

productos_autocomplete

Página de contenido para Drupal

function mimodulo_menu() {
 $items = array();

 $items['admin/config/content/mimodulo'] = array(
 'title' => 'Mi módulo',
 'description' => 'Configuración de mi módulo',
 'page callback' => 'drupal_get_form',
 'page arguments' => array('mimodulo_form'),
 'access arguments' => array('access administration pages'),
 'type' => MENU_NORMAL_ITEM,
 );
 $items['mimodulo'] = array(
 'title' => 'Mi módulo',
 'page callback' => '_mimodulo_page',
 'access arguments' => array('access mimodulo content'),
 'type' => MENU_NORMAL_ITEM, 
 );
 return $items;
}
 function _mimodulo_page() {
 $result = mimodulo_contenido();
 
 $items = array();
 
 foreach ($result as $node) {
 $items[] = array(
 'data' => l($node->title, 'node/' . $node->nid),
 ); 
 }
 
 if (empty($items)) { 
 $page_array['mimodulo_arguments'] = array(
 
 '#title' => t('Contenido mi módulo'),
 '#markup' => t('No hay.'),
 );
 return $page_array; 
 } 
 else {
 $page_array['mimodulo_arguments'] = array(
 '#title' => t('Contenido mi módulo'),
 '#items' => $items,
 //Theme hook with suggestion. 
 '#theme' => 'item_list__mimodulo',
 );
 return $page_array;
 }
}

Configuración básica Drupal

1.- Instalar Drupal. Necesitamos una base de datos y los archivos de Drupal:

https://www.drupal.org/project/drupal

2.- Instalar y configurar algún tema si es necesario:

https://www.drupal.org/project/project_theme

3.- Instalar módulos básicos:

Wysiwyg: https://www.drupal.org/project/wysiwyg

Bajar librerías de TyniMCE (Versión 3.5.11):

TynMCE 3.5

O de CKEditor:

http://ckeditor.com/download

En este último caso modificar la línea 81 de sites\all\modules\wysigyg\editors\ckeditor.inc por esta:

if (preg_match(‘@version:\”(?:CKEditor )?([\d\.]+)(?:.+revision:\”([\d]+))?@’, $line, $version)) {

Las tenemos que guardar en sites\all\libreries

ckeditor

Tenemos que configurar qué editor vamos a usar para cada estilo y los botones que añadiremos a cada uno. ¡Ojo con el BBcode en el tinyMCE, que nos quita las imágenes!

IMCE: Para subir imágenes:

https://www.drupal.org/project/imce

https://www.drupal.org/project/imce_wysiwyg

3.- Menús

Instalar el módulo superfish:

https://www.drupal.org/project/superfish

Y bajar la librería superfish:

https://github.com/mehrpadin/Superfish-for-Drupal/archive/1.x.zip

4.- Vistas

Necesitamos los siguientes módulos:

Chaos Tools

https://www.drupal.org/project/ctools

Views

https://www.drupal.org/project/views

5.- Otros tipos de campos:

Fechas:

http://drupal.org/project/date

Youtube:

https://www.drupal.org/project/youtube

Referencias a nodos:

https://www.drupal.org/project/references