Generar mapa google con jquery

A tener en cuenta que si dicho mapa se tiene que generar en un div que esta oculto y que luego queremos mostrar por alguna razón, si no seguimos estos tres pasos no podremos generar el mapa bien y nos volveremos locos(lo digo por experiencia…)

IMPORTANTISIMO:
1º MOSTRAR EL DIV QUE CONTENDRA EL MAPA
2º DAR TAMAÑO AL DIV QUE CONTENDRA EL MAPA
3º GENERAR EL MAPA EN DICHO DIV

Si dicho mapa esta siempre visible no hay que tener en cuenta estas tres cosas, pero si se oculta por defecto si.

<script type=»text/javascript» src=»http://maps.google.com/maps/api/js?sensor=true»></script>
<script type=»text/javascript» src=»<?php echo base_url();?>scripts/js/gmaps.js»></script>

 

<script type=»text/javascript»>
var map;
function genera_mapa(){
//IMPORTANTISIMO:
//1º MOSTRAR EL DIV QUE CONTENDRA EL MAPA
//2º DAR TAMAÑO AL DIV QUE CONTENDRA EL MAPA
//3º GENERAR EL MAPA EN DICHO DIV

$(«#map»).show();//1º MOSTRAR EL DIV QUE CONTENDRA EL MAPA
$(«#map»).width(«600px»);//2º DAR TAMAÑO AL DIV QUE CONTENDRA EL MAPA
$(«#map»).height(«300px»);//2º DAR TAMAÑO AL DIV QUE CONTENDRA EL MAPA

$.ajax({//3º GENERAR EL MAPA EN DICHO DIV
type: «POST»,
dataType: «json»,
url: «<?php echo base_url().’index.php/publicaciones/get_coordenadas_cliente’; ?>»,
//data: «pais=»+1,
success: function(data){
map = new GMaps({
div: ‘#map’,
lat: data.latitud,
lng: data.longitud,
zoom: 16
});

map.addMarker({
lat: data.latitud,
lng: data.longitud,
title: data.nombre_comercial_com1
});
}
});//fin $.ajax({

}

$(document).ready(function(){

genera_mapa();

});
</script>

 

<div id=»map»></div>

Limitar entrada a solo números y de una determinada longitud en jquery

//Función que se encargan de no permitir la entrada de valores que no sean numero en el campo al que hace referencia
function solo_numero(ref_campo){
if ($(ref_campo).val() != «» ){
$(ref_campo).val($(ref_campo).val().replace(/[^0-9\.]/g, «»));
}
}
//Función que se encargan de verifica que la longitud de valores introducidos no exceda de un limite
function limita_logintud($ref_campo,$limite_caracteres){
if($($ref_campo).val().length>$limite_caracteres){
alert(«Este campo solo admite «+$limite_caracteres+» dígitos»);
$($ref_campo).val(«»);
}
}

$(document).ready(function(){

$(«#telefono»).keyup(function(){solo_numero(this);limita_logintud(this,9);})

});

Comprobar si un checkbox esta checked con jquery

  1. $(document).ready(function(){
  2.     $(«#checkbox_comprobar»).click(function() {
  3.         if($(«#checkbox»).is(‘:checked’)) {
  4.             alert(«Está activado»);
  5.         } else {
  6.             alert(«No está activado»);
  7.         }
  8.     });
  9. });

Cómo insertar reCAPTCHA en tus formularios?

La web abunda en peligros y molestias que operan bajo forma de bots (robots). En este caso, los bots utilizados con fines maliciosos,son programas creados para determinadas funciones, como ser llenar miles de formularios webs enviando spam, vulnerar algún sitio y/u obtener alguna información en particular.

Los formularios son una puerta de entrada para algunos de estos peligros, por lo que necesitamos imperiosamente colocar algún freno, algo que fuerce la interacción de un ser humano del otro lado de nuestro formulario. Para ello están los CAPTCHAS (Completely Automated Public Turing test to tell Computers and Humans Apart , traducido es Prueba de Turing pública y automática para diferenciar máquinas y humanos), que son las clásicas pruebas en donde vemos texto distorsionado que deberemos ingresar a modo de comprobación.

Nosotros vamos a utilizar reCAPTCHA porque al hacerlo estamos ayudando a digitalizar libros (enterate del proyecto), es gratuito y muy simple de implementar. Con tu cuenta de Google, ingresá al siguiente link para generar tus keys: https://www.google.com/recaptcha/admin/create

Para descargar la librería para PHP nos dirigimos a esta sección de descargas. Si necesitamos trabajar con otros lenguajes o con determinadas plataformas, deberemos acceder a cada una de dichas secciones desde aquí.

Colocamos el archivo recaptchalib.php en nuestro sitio y antes del submit de nuestro formulario insertamos el código:

<form method="post" action="formulario.php">
<?php
// descomentar la linea de abajo si tenemos el codigo de validacion en otro archivo
// require_once('recaptchalib.php');
$publickey = "tu public key";
echo recaptcha_get_html($publickey, $error);
?><
<input type="submit" />
</form>

El reCAPTCHA necesita pasar por una validación para saber si insertar la información en una DB o enviarla por email, dependiendo el caso. Podemos utilizar el mismo archivo para colocar el script o uno nuevo, cualquiera sea el caso de formulario.php (a donde va el formulario ejemplo) deberemos incluir al inicio el siguiente código:

require_once('recaptchalib.php');
$privatekey = "tu private key";
$resp = null;
$error = null;
if ($_POST["recaptcha_response_field"]) {
$resp = recaptcha_check_answer  $privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($resp->is_valid) {
// CODIGO A EJECUTAR SI EL RECAPTCHA VALIDA CORRECTAMENTE
} else {
// RECAPTCHA NO VALIDA ENTONCES IMPRIME ERROR
die ("El codigo reCAPTCHA no fue correctamente ingresado, por favor vuelva atras e intente nuevamente");
}
}

Coloquemos nuestras keys y la ruta al archivo recaptchalib.php, subamos la página con el formulario y verifiquemos que todo haya quedado en su lugar.

Finalmente si queremos personalizar un poco el reCAPTCHA, tenemos cuatro themes para utilizar. Si queremos cambiar el theme, en la página en donde insertamos el reCAPTCHA antes del tag <form> debemos insertar el siguiente código:

<script type="text/javascript">
var RecaptchaOptions = {
theme : 'theme_name'
};
</script>

En donde theme_name se reemplaza por el nombre del theme. También podemos cambiar el lenguaje de los textos mostrados, generar traducciones personalizadas y modificar el css de las distintas instancias del script.

Ver mas sobre personalización

Enviar formulario con jquery

<html>
<script src=»http://code.jquery.com/jquery-1.11.0.min.js»></script>

<script type=»text/javascript»>
$(document).ready(function(){
$(«#btn_enviar»).click(function(){
if($(«#nombre»).val()==»»){
alert(«Debe completar el nombre»);
return false;
}
$(‘#form_captcha’).submit();    

});
});
</script>

<body>
<form name=»form_captcha» id=»form_captcha» action=»respuesta.php» method=»post»>
<input type=»text» id=»nombre» value=»» name=»nombre»/>

<input id=»btn_enviar» type=»button» value=»submit» />
</form>
</body>
</html>

Sustituir jquery live() por on() en un campo select generado por ajax

El ejemplo se realiza sobre un campo select que ha sido generado por ajax, por lo que el siguiente código NO funcionaría:

            $("#ciudad").change(function(){
                genera_combo_localidades_ajax($("#ciudad").val());
            });

El uso correcto sería en estos dos casos, y de los dos el on sustituye al live que esta deprecated:

//Deprecated live() version:   
        
 $("#ciudad").live('change', function(){
      genera_combo_localidades_ajax($("#ciudad").val());
 });

//New on() version
            
$(document).on("change", "#ciudad", function(){
      genera_combo_localidades_ajax($("#ciudad").val());
 });

 

Añadir contenido con append() Jquery

Con la función append(), podemos añadir contenido nuevo a un elemento sin eleminar el que ya está, esto mismo ocurre con las funciones html() y text(), es de decir si tenemos un párrafo con el contenido «hola que tal» con la función append podemos añadir contenido a ese párrafo sin tener que eliminar el contenido ya existente.
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
  <script type="text/javascript">
     $(document).ready(function() {
          $(":button#boton").click(function(){
              $("#caja").append("<span style='font-size: 20px;'>Has añadido contenido nuevo, sin eliminar el contenido anterior.</span>");
          });
     });
  </script>
</head>
<body>
     <input type="button" id="boton" value="append() añadir contenido nuevo">
     <div id="caja">Haz click sobre el botón... </div>
</body>
</html>

Ejemplo Construir url con parámetros get que llama a controlador codeigniter desde evento click jquery

$(«.btn_confirm_delete_imagen»).click(function(evento){

var parametros_get=»/»+<?php echo $this->session->userdata(«idpublicacion»); ?>+»/»+$(«#nombre_imagen_eliminar»).val();
var pagina = «<?php echo base_url(); ?>index.php/c_admin_publicaciones/delete_imagen_publicacion»;
document.location.href=pagina+parametros_get;
});