Skip to content

Listening for variable changes in JavaScript (Detectar cambios en variable)

JavaScript

 

 

 

You can define an object like this, in which aInternal represents the field a:

x = {
  aInternal: 10,
  aListener: function(val) {},
  set a(val) {
    this.aInternal = val;
    this.aListener(val);
  },
  get a() {
    return this.aInternal;
  },
  registerListener: function(listener) {
    this.aListener = listener;
  }
}

Then you can register a listener using the following:

x.registerListener(function(val) {
  alert("Someone changed the value of x.a to " + val);
});

So whenever anything changes the value of x.a, the listener function will be fired. Running the following line will bring the alert popup:

x.a = 42;

See an example here: https://jsfiddle.net/5o1wf1bn/1/

You can also user an array of listeners instead of a single listener slot, but I wanted to give you the simplest possible example.

Continue reading "Listening for variable changes in JavaScript (Detectar cambios en variable)"

AJAX DENTRO DE FOR EN JAVASCRIPT

JavaScript


 

 

Código Java Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <title>Ajax dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
       
      for(indice = 0; indice < ids.length; indice++){
      // Es importante notar que estamos utilizando jQuery
      $.ajax({
          url: "test.php",
          method: "POST",
          data: { parametro: ids[indice] }
            }).done(function(data) {
               console.log(data);
          });
      }
    </script>
  </body>
</html>
 

Peticiones AJAX dentro del ciclo for en Java Script

Una de las opciones para solucionar este problema es la recursividad, si no están muy familiarizados con este tema los invito al leer el tutorial que explica que es la programación recursiva. Para este caso podemos crear una función que se llama a sí misma dentro de done con el parámetro del índice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <title>AJAX dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
       
      function enviar(indice){
        // Es importante notar que estamos utilizando jQuery
        if(indice < ids.length){
          $.ajax({
            url: "test.php",
            method: "POST",
            data: { parametro: ids[indice] }
            }).done(function(data) {
              console.log(data);
              enviar(indice + 1);
          });
        }
      }
      enviar(0);
    </script>
  </body>
</html>

Con el script anterior nos aseguraremos que nuestro código se ejecute de la misma forma (estructural) siempre, donde cada petición AJAX se va a ejecutar una vez que termine la anterior.

Continue reading "AJAX DENTRO DE FOR EN JAVASCRIPT"

Close a Modal using the ESC Key? / Cerrar Modal usando ESC

JavaScriptJQuery

 

 

 

$(document).ready(function(){

    $('.modal').modal({show: false, keyboard: false}); // disable keyboard because it conflicts below

    $('.modal').on('show.bs.modal', function (event) {
       //add modal id to array
       modals.push(event.target.id);
    });


    document.onkeydown = function(evt) {
        evt = evt || window.event;
        var isEscape = false;
        if ("key" in evt) {
            isEscape = (evt.key === "Escape" || evt.key === "Esc");
        } else {
            isEscape = (evt.keyCode === 27);
        }
        if (isEscape) {

            if(modals.length>0){
                //get last modal id by using pop(). 
                //This function also removes last item in array.
                var id = modals.pop();
                if($('#'+id).is(':visible')){ // if modal is not closed by click or close button
                    $('#'+id).modal('toggle');
                }
            }else{
                alert("Could not find any modals!");
            }
        }
    };

});
Continue reading "Close a Modal using the ESC Key? / Cerrar Modal usando ESC"

Fetch, recuperar datos del servidor

JavaScript

 

 

Podría ocurrir que necesites enviar datos por POST pero que no dispongas de un formulario en la página donde el usuario haya escrito esos datos. Es decir, generar desde cero los datos del formulario, con variables o datos que tengas en Javascript.

Esto es perfectamente posible, aunque es algo más relativo al uso del objeto FormData que a la propia llamada Ajax con Fetch. Lo conseguimos mediante dos pasos.

  1. Creamos un objeto FormData vacío, simplemente enviando al constructor FormData los paréntesis vacíos.
  2. Creamos todos los datos arbitrarios con el método append() que recibe el dato que se quiere agregar al FormData, con su par clave/valor.

El código te quedará como puedes ver a continuación.

const data = new FormData();
data.append('empresa', 'DesarrolloWeb.com');
data.append('CIF', 'ESB00001111');
data.append('formacion_profesional', 'EscuelaIT');
fetch('../post.php', {
   method: 'POST',
   body: data
})
.then(function(response) {
   if(response.ok) {
       return response.text()
   } else {
       throw "Error en la llamada Ajax";
   }

})
.then(function(texto) {
   console.log(texto);
})
.catch(function(err) {
   console.log(err);
});

 

Continue reading "Fetch, recuperar datos del servidor"

Insertar Html dentro de otro HTML

JavaScriptJQuery

 

 

My solution is similar to the one of lolo above. However, I insert the HTML code via JavaScript's document.write instead of using jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

Alternatively for browsers that support template literals the following also works:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);
 
Continue reading "Insertar Html dentro de otro HTML"

Array de objetos, sort, order, by key

JavaScriptJQuery

 

How to sort alphabetically an array of objects by key in JavaScript

To sort an array of objects by some key, you will need a valid structure in your array, obviously an array of objects can only have objects with at least one key (the one that you want to sort). In this example, we'll have the MyData variable that has the following structure: 

var MyData = [
    { id : 1, name: "Angel Miguel",   city: "Nex Mexico" },
    { id : 2, name: "Michael Rogers", city: "Bogotá"     },
    { id : 3, name: "Steve Rogers",   city: "New York"   },
    { id : 4, name: "Ángel José",     city: "Bucaramanga"},
    { id : 5, name: "Carlos Delgado", city: "Nex Mexico" },
    { id : 6, name: "Jhonny Zapata",  city: "Zacatecas"  },
    { id : 7, name: "Bruce Wayne",    city: "Gotham"     },
    { id : 8, name: "Speedy Gonzales",city: "Nex Mexico" }
];

Create a custom sort Function

you can simply use:

/**
  Function to sort alphabetically an array of objects by some specific key.
  
  @param {String} property Key of the object to sort.
 /
function dynamicSort(property) {
    var sortOrder = 1;

    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }

    return function (a,b) {
        if(sortOrder == -1){
            return b[property].localeCompare(a[property]);
        }else{
            return a[property].localeCompare(b[property]);
        }        
    }
}

 

 Sort by key in ascending order

// Sort the MyData array with the custom function
// that sorts alphabetically by the name key
MyData.sort(dynamicSort("name"));
// Display data with new order !
console.log(MyData);

object with the new order:

[  
    { "id":4, "name": "Ángel José",     "city":"Bucaramanga" },
    { "id":1, "name": "Angel Miguel",   "city":"Nex Mexico"  },
    { "id":7, "name": "Bruce Wayne",    "city":"Gotham"      },
    { "id":5, "name": "Carlos Delgado", "city":"Nex Mexico"  },
    { "id":6, "name": "Jhonny Zapata",  "city":"Zacatecas"   },
    { "id":2, "name": "Michael Rogers", "city":"Bogotá"      },
    { "id":8, "name": "Speedy Gonzales","city":"Nex Mexico"  },
    { "id":3, "name": "Steve Rogers",   "city":"New York"    }
]

Sort by key in descending order

// Sort the MyData array with the custom function
// that sorts alphabetically in descending order by the name key
MyData.sort(dynamicSort("-name"));
// Display data with new order !
console.log(MyData);

This would output:

[
    { "id" :3, "name" : "Steve Rogers",    "city":"New York"   },
    { "id" :8, "name" : "Speedy Gonzales", "city":"Nex Mexico" },
    { "id" :2, "name" : "Michael Rogers",  "city":"Bogotá"     },
    { "id" :6, "name" : "Jhonny Zapata",   "city":"Zacatecas"  },
    { "id" :5, "name" : "Carlos Delgado",  "city":"Nex Mexico" },
    { "id" :7, "name" : "Bruce Wayne",     "city":"Gotham"     },
    { "id" :1, "name" : "Angel Miguel",    "city":"Nex Mexico" },
    { "id" :4, "name" : "Ángel José",      "city":"Bucaramanga"}
]
Continue reading "Array de objetos, sort, order, by key"

Apache Cordova, mapas, geolocalizacion

JavaScript

 

 

This is what I use:

function (lat, lon) {
    var latLon = lat + ',' + lon;

    if (device.platform.toUpperCase() === "ANDROID") {
        window.open("geo:" + latLon, "_system");
    } else if (device.platform.toUpperCase() === "IOS") {
        window.open("http://maps.apple.com/?sll=" + latLon + "&z=100&t=k", "_system");
    }
}

Note: when opening Apple maps, the sll=... and t=k, which means I'm specifying an exact longitude and latitude, and t=k means I want apple maps to display satellite imagery. Also, I'm only writing for iOS and Android, so if you're using other platforms be sure to check explicitly for each! I'm pretty sure Android's geo: always works as you would expect, but I could be wrong. Remember: test everything on a real device!

Continue reading "Apache Cordova, mapas, geolocalizacion"

Deferred, Promises, Promesas

JavaScriptJQuery

 

 

$.Deferred. ¿Qué es?

El objeto deferred se introdujo en jQuery a partir de la versión 1.5 y provocó una importante mejora en las interfaces de programación asíncrona (y síncrona …) que se usaban hasta entonces. Es un objeto concatenable sobre el que se pueden registrar múltiples callbacks que se ejecutarán en función del resultado final de la deferred.

¿Como creamos uno?

Cuando creamos un objeto deferred mediante …

var deferred = new $.Deferred(); 
//o bien 
var deferred = $.Deferred();

Este objeto deferred puede estar en 3 estados:

pending: El objeto está en un estado incompleto
resolved: El objeto se ha resuelto
rejected: el objeto se ha rechazado;

Cuando lo creamos, por supuesto, estará “pending”.

Si llamados al método resolve() del objeto deferred lo pasaremos al estado “resolved”.

Por el contrario, si llamamos al método reject() lo pasaremos al estado “rejected”.

Usar el método done() para asociar un callback (o varios) que se ejecutarán cuando la deferred pase a “resolved”.

Usar el metodo fail() si en lugar de “resolved” pasa a “rejected”.

Además de done() y fail() hay otros muchos más métodos que nos permiten hacer otras cosas como:

always(): Ejecutará sus callbacks independientemente del estado al que pase la deferred

progress(): Ejecutará callbacks cuando la deferred emita notificaciones de progreso mediante notify()

notify(): Hace que se llamen las callbaks de progress()

then(): puedo usar then() para asociar callbacks para done, fail o progress

También tenemos otra serie de métodos para averiguar el estado de la deferred, por ejemplo

isRejected(): Para saber si ha sido rechazada

isResolved(): Para averigar si se ha resuelto

state(): Para comprobar el estado actual

Retornando promises

function wait() { 
    var deferred = $.Deferred(); 
    setTimeout(function() { 
        deferred.resolve(); 
    }, 5000); 
    return deferred.promise(); 


wait().done(function() { 
    alert("He esperado 5 segundos!!"); 
});

 

Los métodos deferred.resolve y deferred.reject además permiten devolver valores para ser utilizados por las funciones de devolución.

Función con deferred.resolve y deferred.reject devolviendo valores reutilizables

// función que calcula si un numero entero es par o impar
var isEven = function(number) {
 
    var dfd = $.Deferred();
 
    // resuelve o rechaza al objeto utilizando
    // y devuelve un texto con el resultado
    if (number%2 == 0){
        dfd.resolve('El número ' + number + ' es par');
    } else {
        dfd.reject('El número ' + number + ' es impar');
    }
 
    // devuelve al objeto diferido con su estado definido
    return dfd.promise();
 
}
 
isEven(2).then(
 
       function(result){
           console.log(result); // Registra 'El número 2 es par'
       },
 
       function(result){
           console.log(result);
       }
 
);

Nota

Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pendingresolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.

Continue reading "Deferred, Promises, Promesas"