ingresar datos en la URL

edward18_1 · #1 (**permalink**) 25/12/2011, 17:36

Hola quisiera saber si hay alguna forma de ingresar datos en la URL sin recargar la pagina para que no se vea afectado nada ps....o sea q por ejemplo esta es mi pagina

pagina.com entonces por ejemplo tengo un boton y ps...mediante una funcion en javascript o jquery lo q sea....me le agregue algo a la URL por ejemplo pagina.com?agregado=1
....bueno..pero primero...eso es posible??? gracias...si es posible... díganme cmo se hace...gracias :D

truman_truman · #2 (**permalink**) 25/12/2011, 18:12

mmm. creo que no es posible, pero no estoy seguro

edward18_1 · #3 (**permalink**) 25/12/2011, 18:18

he estado leyengo y con el hash se puede hacer...pero como le hago una funcion donde me agregue el hash a la URL....q segun eso no recarga la pagina que es el q aparece el # y con jquery se puede saber el hash...pero y ahora...jaja como se hace eso? es q estoy un poco crudo con el javascript o el jquery

truman_truman · #4 (**permalink**) 25/12/2011, 18:21

Pregunta: Conque fin quieres hacer esto? quizás haya otra forma de hacer lo que auieres

edward18_1 · #5 (**permalink**) 25/12/2011, 18:37

es que tengo una pagina donde ps...muestro unas cosas sin recargar la pagina...entonces quiero hacer que cuando le de a que me muestre esas cosas...me modifique la URL para que asi la url se pueda copiar...y enviarse entre usuarios o cosas asi...para q con solo acceder a el link...me lleve a la pagina entonces si tiene el # lo rescato con el jquery lo proceso y muestro el contenido referente a ese hash....porq de lo contrario si no tengo eso entonces la URL siempre seria la misma...y los usuarios cuando entran el la web...tendran que buscar nuevamente lo q quieran ver :S Gracias

edward18_1 · #6 (**permalink**) 25/12/2011, 18:53

pude encontrar esto

Código Javascript:

Ver original<script>
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }
</script>

ahora solo me falta es hacer que este if...me funcione dentro de un onload....y la funcion que agregara el hash a la URL como lo hago? gracias

truman_truman · #7 (**permalink**) 25/12/2011, 18:56

pero , no podés guardar la url en otro lado? por ejemplo en un input hidden, o en una variable javascript?

edward18_1 · #8 (**permalink**) 25/12/2011, 19:02

como asi??? nooo es q la cosa es q se le coloquen elementos a la URL y ps vi que el hash se puede hacer, agrega a la URL un # seguido del valor y entonces ese valor lo rescato con la funcion q envie mas arriba....lo proceso y ya...pero necesito saber como hacer una funcion q le agregue a la URL actual el #hash...:D

abermejo · #9 (**permalink**) 25/12/2011, 19:25

pues puedes probar colcandolo en el atributo href de la etiqueta <a>

<a href="#enlace">Enlace</a>

edward18_1 · #10 (**permalink**) 25/12/2011, 19:33

noo ps es que la cosa es q no utilizo <a></a> si no <input> type button...entonces yo diria ps...que con jquery hacer lo de la URL...o sea q cuando precione el boton...rescato el id del boton..que eso se hacerlo ya...y ps...colocar el id en un # de la url sin recargar la pagina..eso es todo.... he estado viendo y segun se puede hacer con esto...pero solo funciona con <a></a>

q hay q hacerle para q funcione con los input type button?

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>PushState</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!-- Actualizar -->
    <script>
    $(document).ready(function() {
        // Para navegadores que soportan la función.
        if (typeof window.history.pushState == 'function') {
            pushstate();            
        }else{
            check(); hash();
        }
    });
    // Chequear si existe el hash.
    function check(){
        var direccion = ""+window.location+"";
        var nombre = direccion.split("#!");
        if(nombre.length > 1){
            var url = nombre[1]; 
            alert(url);
        }
    }
    
    function pushstate(){
        var links = $("a");
        // Evento al hacer click.
        links.live('click', function(event) {
            var url = $(this).attr('href');
            // Cambio el historial del navegador.
            history.pushState({ path: url }, url, url);
            // Muestro la nueva url
            alert(url);
            return false;
        });
        
        // Función para determinar cuando cambia la url de la página.
        $(window).bind('popstate', function(event) {
            var state = event.originalEvent.state;
            if (state) {
                // Mostrar url.
                alert(state.path);
            }
        });
    }
    
    function hash(){
        // Para i.e
        // Función para determinar cuando cambia el hash de la página.
        $(window).bind("hashchange",function(){
            var hash = ""+window.location.hash+"";
            hash = hash.replace("#!","")
            if(hash && hash != ""){
                alert(hash);
            }
        }); 
        // Evento al hacer click.
        $("a").bind('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            // Cambio el historial del navegador.
            window.location.hash = "#!"+url;
            //$(window).trigger("hashchange");
            return false
        });
    }
    </script>  
  </head>
  <body>
    <a href="page-help.html">help</a>
    <a href="other.html"> Otro link</a>
  </body>
</html>

truman_truman · #11 (**permalink**) 25/12/2011, 20:20

Pruebalo así:

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>PushState</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!-- Actualizar -->
    <script>
    $(document).ready(function() {
        // Para navegadores que soportan la función.
        if (typeof window.history.pushState == 'function') {
            pushstate();            
        }else{
            check(); hash();
        }
    });
    // Chequear si existe el hash.
    function check(){
        var direccion = ""+window.location+"";
        var nombre = direccion.split("#!");
        if(nombre.length > 1){
            var url = nombre[1]; 
            alert(url);
        }
    }
    
    function pushstate(){
        var links = $(".btn");
        // Evento al hacer click.
        links.live('click', function(event) {
            var url = $(this).attr('value');
            // Cambio el historial del navegador.
            history.pushState({ path: url }, url, url);
            // Muestro la nueva url
            alert(url);
            return false;
        });
        
        // Función para determinar cuando cambia la url de la página.
        $(window).bind('popstate', function(event) {
            var state = event.originalEvent.state;
            if (state) {
                // Mostrar url.
                alert(state.path);
            }
        });
    }
    
    function hash(){
        // Para i.e
        // Función para determinar cuando cambia el hash de la página.
        $(window).bind("hashchange",function(){
            var hash = ""+window.location.hash+"";
            hash = hash.replace("#!","")
            if(hash && hash != ""){
                alert(hash);
            }
        }); 
        // Evento al hacer click.
        $(".btn").bind('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('value');
            // Cambio el historial del navegador.
            window.location.hash = "#!"+url;
            //$(window).trigger("hashchange");
            return false
        });
    }
    </script>  
  </head>
  <body>
    <button type="button" id="btn" class="btn" value="page-help.html">Boton</button>
        <button type="button" id="btn2" class="btn" value="other.html">Boton2</button>
    
  </body>
</html>

edward18_1 · #12 (**permalink**) 25/12/2011, 20:35

OK si funciona...pero solo hay un problema...que lo agrega asi mipagina.com/page-help.html en vez de mipagina.com#page-help.html

dggluz · #13 (**permalink**) 25/12/2011, 20:38

El tema es que no es sólo modificar la URL, sino luego también interpretarla y ejecutar las acciones necesarias en consecuencia. Es algo que hacen Blogger con su Dynamic Views o Google+, por ejemplo.
Para ello, se puede utilizar el objeto "history" de window (que es relativamente nuevo). Para los navegadores que aún no lo soportan, la solución elegida suele ser (como bien decían) colocar la información luego de un hash (#), en general seguido de un signo de exclamación cerrado (#!)... es por ejemplo lo que hace Blogger con Dynamic Views.
Obviamente para interpretar luego toda esta información de la URL (ya que la idea era que los usuarios pudiesen copiarla y pasársela para volver a ingresar a la página directamente en el mismo estado) pueden ser más que útiles las expresiones regulares. ¡Suerte!

edward18_1 · #14 (**permalink**) 25/12/2011, 20:45

mmm aunq ya vi...tambien puedo agarrar u colocarle al value dee los botones al principio el # y listo :D

truman_truman · #15 (**permalink**) 25/12/2011, 20:48

y que tal algo así?
Disculpa si no entendí bien...

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>PushState</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!-- Actualizar -->
    <script>
    $(document).ready(function() {
      
                 $(".btn").click(function(){
                    var ruta = "#"+$(this).attr("value");
                    alert(ruta);
                    window.location=ruta;
                    
                 })
    });
    </script>  
  </head>
  <body>
    <button type="button" id="btn" class="btn" value="page-help.html">Boton</button>
        <button type="button" id="btn2" class="btn" value="other.html">Boton2</button>
    
  </body>
</html>

edward18_1 · #16 (**permalink**) 25/12/2011, 20:55

O.o OMG! jajaja eso mismo es!.....asi es exactamente eso es lo q necesitaba...OMG! como unas 10 lineas de codigo :D jaja gracias :D Gracias ahora necesito completar algo....como le pongo a esto que funcione en el onload?

Código Javascript:

Ver original<script>
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }
</script>

truman_truman · #17 (**permalink**) 25/12/2011, 20:57

Cita:

Iniciado por edward18_1

O.o OMG! jajaja eso mismo es!.....asi es exactamente eso es lo q necesitaba...OMG! como unas 10 lineas de codigo :D jaja gracias :D Gracias ahora necesito completar algo....como le pongo a esto que funcione en el onload?

Código Javascript:

Ver original<script>
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }
</script>

Metelo dentro de una función y lo llamas desde la etiqueta body con onload

edward18_1 · #18 (**permalink**) 25/12/2011, 21:01

Ok ok...Gracias :D FELIZ NAVIDAD!