Javascript Jquery Borrar todas opciones dentro de Select

Este pequeño Snippet de código te ayudará a eliminar TODOS los elementos dentro de un input de tipo select

Es poco común, lo sé, pero quizá algún día la requieran.


var removeAllOptionsSelect = function(element_class_or_id){
var element = $(element_class_or_id+" option");
$.each(element,function(i,v){
value = v.value;
$(element_class_or_id+" option[value="+value+"]").remove();
})
}

Solo tienes que correr
removeAllOptionsSelect(“#id_select”);

Función base_url() para javascript similar a la de codeigniter

Una de las funciones muy útiles del framework PHP Codeigniter es la de base_url(), la cual regresa una cadena con la url del proyecto.

Se me ocurrió hacer una similar para javascript.

Me es ideal para el tema de las rutas relativas al momento de hacer una patición $.ajax({}) o
$.post({})

function base_url() {
var base = window.location.href.split(‘/’);
return base[0]+’//’+base[2]+’/’;
}

Ejemplo

$.ajax({
type : “POST”,
url : “mi_modulo/get_informacion”,
data : base_url()+”marca=”+v,
dataType :”json”,
beforeSend:function() {/*Ingresa tus comentarios*/ },
success:function(respuesta){/*Recibe tu respuesta*/}
});

Usar Jquery para iterar sobre una respuesta Json

Supongamos que con $.ajax recuperas con Json el siguiente resultado
{“usuarios”:[“carlos”,”javier”,”151_img_0002.jpeg”,”cesar”}
Y necesitas iterar sobre esos resultados:

Lo puedes hacer con el siguiente código

$.each(datos.usuarios, function(key, valor) {
  console.log(key + valor)
})
Donde data.usuarios es el resultado del $.ajax:
Ejemplo
function stream()
{
 $.ajax({
                    dataType: ‘json’,
                    type: ‘POST’,
                    async: true,
                    data: {position:1,rand:Math.random()},
                    url: ‘mi_archivo.php’, success: function(datos)
              {
                         if(data.usuarios!=null)
                        {
                 $.each(datos.usuarios, function(key, valor) {
               alert(valor);
                 })
             }
       }
   });
}
Ahora si lo que necesitas es iterar sobre el resultado de arreglos que han sido regresados por Json en Jquery, puedes revisar este código 

Como iterar sobre arreglo Json recuperado con Ajax Jquery

Supongamos que el resultado del Json es el siguiente

[
{“MI_VAR_1″:5,”MI_VAR_2″:98,”MI_VAR_3″:”info1”},
{“MI_VAR_1″:26,”MI_VAR_2″:45,”MI_VAR_3″:”INFO2”},
{“MI_VAR_1″:34,”MI_VAR_2″:22,”MI_VAR_3″:”info33”}
]
$.post(“archivo.php”,{variable:parametro},
function(resultadoJson){

//Para poder iterar sobre sus valores, usamos la función $.each de jQuery
$.each(resultadoJson,function(indice)
{
console.log(resultadoJson[indice].MI_VAR_1);
console.log(resultadoJson[indice].MI_VAR_2);
console.log(resultadoJson[indice].MI_VAR_3);
});
});

Validar solo números enteros positivos con javascript

var patron = /^\d*$/; //Expresión regular para aceptar solo números enteros
var numero = 10; //Variable a analizar

// Este método regresa true si la cadena coincide con el patrón definido en la expresión regular
if (patron.test(numero)) {            
  alert(“Número es correcto”)
}else {
alert(“El número es incorrecto”);
}

Quitar acentos con Javascript

Recientemente tuve la necesidad de manejar cadenas con javascript, de tal forma que no contengan acentos.

Les comparto esta función Javascript para remover acentos y tildes de una cadena.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <!– Esto es muy importante–>
<title>Quitar acentos a cadena con Javascript</title>
<script>
function remover_acentos(str) {

var map={
À’:’A’,’Á’:’A’,’Â’:’A’,’Ã’:’A’,’Ä’:’A’,’Å’:’A’,’Æ’:’AE’,’Ç’:’C’,’È’:’E’,’É’:’E’,’Ê’:’E’,’Ë’:’E’,’Ì’:’I’,’Í’:’I’,’Î’:’I’,’Ï’:’I’,’Ð’:’D’,’Ñ’:’N’,’Ò’:’O’,’Ó’:’O’,’Ô’:’O’,’Õ’:’O’,’Ö’:’O’,’Ø’:’O’,’Ù’:’U’,’Ú’:’U’,’Û’:’U’,’Ü’:’U’,’Ý’:’Y’,’ß’:’s’,’à’:’a’,’á’:’a’,’â’:’a’,’ã’:’a’,’ä’:’a’,’å’:’a’,’æ’:’ae’,’ç’:’c’,’è’:’e’,’é’:’e’,’ê’:’e’,’ë’:’e’,’ì’:’i’,’í’:’i’,’î’:’i’,’ï’:’i’,’ñ’:’n’,’ò’:’o’,’ó’:’o’,’ô’:’o’,’õ’:’o’,’ö’:’o’,’ø’:’o’,’ù’:’u’,’ú’:’u’,’û’:’u’,’ü’:’u’,’ý’:’y’,’ÿ’:’y’,’Ā’:’A’,’ā’:’a’,’Ă’:’A’,’ă’:’a’,’Ą’:’A’,’ą’:’a’,’Ć’:’C’,’ć’:’c’,’Ĉ’:’C’,’ĉ’:’c’,’Ċ’:’C’,’ċ’:’c’,’Č’:’C’,’č’:’c’,’Ď’:’D’,’ď’:’d’,’Đ’:’D’,’đ’:’d’,’Ē’:’E’,’ē’:’e’,’Ĕ’:’E’,’ĕ’:’e’,’Ė’:’E’,’ė’:’e’,’Ę’:’E’,’ę’:’e’,’Ě’:’E’,’ě’:’e’,’Ĝ’:’G’,’ĝ’:’g’,’Ğ’:’G’,’ğ’:’g’,’Ġ’:’G’,’ġ’:’g’,’Ģ’:’G’,’ģ’:’g’,’Ĥ’:’H’,’ĥ’:’h’,’Ħ’:’H’,’ħ’:’h’,’Ĩ’:’I’,’ĩ’:’i’,’Ī’:’I’,’ī’:’i’,’Ĭ’:’I’,’ĭ’:’i’,’Į’:’I’,’į’:’i’,’İ’:’I’,’ı’:’i’,’IJ’:’IJ’,’ij’:’ij’,’Ĵ’:’J’,’ĵ’:’j’,’Ķ’:’K’,’ķ’:’k’,’Ĺ’:’L’,’ĺ’:’l’,’Ļ’:’L’,’ļ’:’l’,’Ľ’:’L’,’ľ’:’l’,’Ŀ’:’L’,’ŀ’:’l’,’Ł’:’L’,’ł’:’l’,’Ń’:’N’,’ń’:’n’,’Ņ’:’N’,’ņ’:’n’,’Ň’:’N’,’ň’:’n’,’ʼn’:’n’,’Ō’:’O’,’ō’:’o’,’Ŏ’:’O’,’ŏ’:’o’,’Ő’:’O’,’ő’:’o’,’Œ’:’OE’,’œ’:’oe’,’Ŕ’:’R’,’ŕ’:’r’,’Ŗ’:’R’,’ŗ’:’r’,’Ř’:’R’,’ř’:’r’,’Ś’:’S’,’ś’:’s’,’Ŝ’:’S’,’ŝ’:’s’,’Ş’:’S’,’ş’:’s’,’Š’:’S’,’š’:’s’,’Ţ’:’T’,’ţ’:’t’,’Ť’:’T’,’ť’:’t’,’Ŧ’:’T’,’ŧ’:’t’,’Ũ’:’U’,’ũ’:’u’,’Ū’:’U’,’ū’:’u’,’Ŭ’:’U’,’ŭ’:’u’,’Ů’:’U’,’ů’:’u’,’Ű’:’U’,’ű’:’u’,’Ų’:’U’,’ų’:’u’,’Ŵ’:’W’,’ŵ’:’w’,’Ŷ’:’Y’,’ŷ’:’y’,’Ÿ’:’Y’,’Ź’:’Z’,’ź’:’z’,’Ż’:’Z’,’ż’:’z’,’Ž’:’Z’,’ž’:’z’,’ſ’:’s’,’ƒ’:’f’,’Ơ’:’O’,’ơ’:’o’,’Ư’:’U’,’ư’:’u’,’Ǎ’:’A’,’ǎ’:’a’,’Ǐ’:’I’,’ǐ’:’i’,’Ǒ’:’O’,’ǒ’:’o’,’Ǔ’:’U’,’ǔ’:’u’,’Ǖ’:’U’,’ǖ’:’u’,’Ǘ’:’U’,’ǘ’:’u’,’Ǚ’:’U’,’ǚ’:’u’,’Ǜ’:’U’,’ǜ’:’u’,’Ǻ’:’A’,’ǻ’:’a’,’Ǽ’:’AE’,’ǽ’:’ae’,’Ǿ’:’O’,’ǿ’:’o’
};

var res=”; //Está variable almacenará el valor de str, pero sin acentos y tildes
for (var i=0;i<str.length;i++)
{
c=str.charAt(i);res+=map[c]||c;
}
return res;
}
alert(remove_accent(“ñ”));
</script>
</head>

<body>
</body>
</html>

Validar espacios en blanco con Javascript

En esta ocación les traigo el código para validar con Javascript y una expresión regular, que los usuarios no dejen campos vacíos en sus formularios.

<script >
var espacio_blanco    = /[a-z]/i;  //Expresión regular

var campo_validar = $(“#mi_campo”).val();  //Si usamos Jquery podemos obtener el valor con la siguiente línea.
var campo_validar = document.getElementById(“mi_campo”).value; //Si no usamos  jquery
if(!espacio_blanco.test(campo_validar ))
{
alert(“Error”)
}
</script>

Función PHP para remover todo código Javascript

Con la siguiente función podrán remover todos los códigos Javascript almacenados en una variable.

Por ejemplo, si están usando Fckeditor y no desean que alguien pueda insertar un código Javascript, esta función les servirá de mucho.

<?php
function remover_javascript($html)
{
$javascript = ‘/<script[^>]*?>.*?<\/script>/si’;  //Expresión regular buscará todos los códigos Javascripts 
$html = preg_replace($javascript, “”, $html);
$javascript = ‘/<script[^>]*?javascript{1}[^>]*?>.*?<\/script>/si’;
$html = preg_replace($javascript, “”, $html); //Expresión regular buscará todos los códigos Javascripts 
return $html;
}

//Ejemplo de uso

$html = “<html><head><script>alert(‘Hola mundo’);</script></head><body><h2>Hola</h2></body> </html>”;

echo remover_javascript($html);

//Retornará

<html><head></head><body><h2>Hola</h2></body> </html>

?>

HTML5 como dibujar un cuadrado con fillRect y CANVAS

Por si no sabian que es canvas es un elemento HTML incorporado en HTML5 que permite generar gráficos estáticos y animaciones.
Osea, es una etiqueta html donde podemos hacer dibujos y animaciones

La sintáxis de canvas es

<canvas id=“identificador” width=“600” height=“600”> </canvas>

Donde width=“600” height=“600” definen el área de trabajo donde se podrá dibujar e id=”identificador” es el atributo que nos servirá como referencia al momento de dibujar sobre <canvas>.

En está ocación les mostraré como hacer un cuadrado dentro del elemento <canvas>

  • PASO 1 Configurar el doctype de la página y  escribir  etiqueta <canvas> con sus respectivos atributos
    <!DOCTYPE html>  (ESTO VA EN LA PRIMERA LINEA DE CÓDIGO)
    <canvas id=”identificador” width=”600″ height=”600″> </canvas>  (Dentro del <body>)
  • Paso 2.- Crear función JAVASCRIPT  que dibuje sobre canvas

function dibujar_cuadro()
{
var lienzo = document.getElementById(“lienzo”);
var trabajo = lienzo.getContext(“2d”); //Siempre requerida
trabajo.fillStyle=”#ccc”;
trabajo.fillRect(150,150,300,300);

  • Paso 3.- Agregar función al onload, para que sea ejecutada al abrir la página
<body onload=“dibujar_cuadro();”

Explicación de la función


* En la primera línea de nuestra función var lienzo = document.getElementById(“lienzo”); estamos almacenando en una variable al elemento <canvas> para poder trabajar con el.
* En la segunda línea  var trabajo = lienzo.getContext(“2d”); crea una variable llamada trabajo la cual tendrá los métodos para dibujar líneas, cuadros, círculos y más…
* La tercera trabajo.fillStyle=“#ccc“; está indicando que el color del relleno será “#ccc” mas o menos gris.
* La cuarta y última línea trabajo.fillRect(150,150,300,200); Está indicando el tamaño y la posición del cuadrado dentro de la etiqueta <canvas>
la función fillRect dibuja un cuadrado relleno con el color especificado en fillStyle y utiliza la siguiente sintáxis:

 fillRect(Espaciado a la izquierda , Espaciado superior, Ancho del rectangulo, Alto del rectangulo);

El código final quedará asi!
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> Como dibujar un cuadrado con fillRect y CANVAS </title>
<script>
function dibujar_cuadro()
{
var lienzo = document.getElementById(“lienzo”);
var trabajo = lienzo.getContext(“2d”); //Siempre requerida
trabajo.fillStyle=“#ccc”;
trabajo.fillRect(150,150,300,200);
}
</script>
</head>
<body onload=”dibujar_cuadro();“>
<canvas id=”lienzo” style=“border:1px #D5D5D5 solid;” width=”600” height=”600“></canvas>
</body>
</html> 

Para mas información visitar: http://www.w3schools.com/html5/html5_ref_canvas.asp

Como usar ajax $.ajax con Jquery y PHP

En este breve tutorial les voy a explicar como utilizar la forma mas básica de AJAX con Jquery: $.ajax y enviar un grupo de variables a un archivo PHP, al igual que mostrar un indicador al usuario de que se está procesando su solicitud.

Paso 1.- Primero que nada debes incluir la librería de Jquery en tu página (ya sea HTML o PHP) por medio de una etiqueta <script>:
<script src=http://code.jquery.com/jquery-1.5.js“></script>
Paso 2.- Ya teniendo la librería en nuestro página podemos ejecutar  $.ajax();
$.ajax se usa de la siguiente manera: Sigue leyendo