Metodo get()

[bichomen]

El metodo get() viene a ser esto:

Código HTML:

$.get("pagina.php", { variable1:"variable", variable2:"variable" }, function(data) 
				{
  					$("#id").html(data);  					
				});

Pero esto para un enlace o unos pocos enlaces va bien, pero cuando son cientos de enlaces ¿como automatizo el proceso?

Osea ?como determino el numero de variables que hay en la url y se las paso al query y si la url no tiene variables?

Por poner un ejemplo tengo, estos enlaces:

Código HTML:

pagina1.php?variable1=3&variable2=3456&variable3=jkvkjgkhj&variable4=fjkfkjgfkgj&variable5=39556
pagina2.php?variable1=3&variable2=3456&variable3=jkvkjgkhj
pagina3.php?variable1=3&variable2=3456&variable3=jkvkjgkhj&variable4=fjkfkjgfkgj
pagina4.php
pagina5.php?variable1=3&variable

Quiero hacer una función que analice las urls extraiga las variables y las pase por get() ¿No se si me explico?


bichomen

[bichomen]

Bueno creo que he conseguido algo, pero debería ser más sencillo:

Código HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
	
	$(document).ready(function()
	{
   	$("#menu a").each(function()
   	{
      	var href = $(this).attr("href");
      	$(this).attr(
      	{ 
      		href: "#"
      	});
      	
      	$(this).click(function()
      	{
				var ruta = $('#enlace').data("url");  				
				var variables = 0;
				var variable = "";
				var variable_valor = "";
				var argumentos = "";
				var dato = "";
				var dato1 = "";
				
				for (var j = 1; j < 20; j++) 
				{
					dato = "variable" + j;					
									
					if ($("#enlace").data(dato) == null) 
					{
						break						
					}
					else 
					{
						variables++;				
					}
				}
				
				for (var i = 1; i <= variables; i++) 
				{
					dato1 = 'variable' + i;		
					variable = "variable" + i;			
					variable_valor = $("#enlace").data(dato1);
					argumentos += variable +":\"" + variable_valor + "\", "; 					
				}
				
				argumentos = argumentos.slice(0,-2);
         	       	
				$.get(ruta, { argumentos }, function(data) 				
				{
					$("#contenedor").html(data);
				});
      	});
   	});
	});

</script> 

Y aquí el enlace:

Código HTML:

<div id="enlace" data-url="pagina.php" data-variable1="1" data-variable2="1"><a href="#">Pagina</a></div> 

bichomen

[Alexis88]

Si en la ruta a la que apunta cada enlace se incluye a la cadena de consulta, solo tienes hacer lo siguiente:

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    event.preventDefault(); //Se cancela la redirección
    $.ajax({
        url: $(this).prop("href")
    }).done(function(data){
        //Instrucciones
    });
});
 

Para este caso, el método $.ajax() es más fácil de implementar. Por defecto, dicho método realiza el envío mediante el método HTTP GET.

Un saludo

[bichomen]

Iniciado por Alexis88

Si en la ruta a la que apunta cada enlace se incluye a la cadena de consulta, solo tienes hacer lo siguiente:

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    event.preventDefault(); //Se cancela la redirección
    $.ajax({
        url: $(this).prop("href")
    }).done(function(data){
        //Instrucciones
    });
});
 

Para este caso, el método $.ajax() es más fácil de implementar. Por defecto, dicho método realiza el envío mediante el método HTTP GET.

Un saludo

Hola, puedes ser un poco más preciso, lo que estoy intentado es cargar en el div contenedor la dirección del enlace más las variables pasadas por get.


bichomen

[Alexis88]

Creo que el script es bastante claro, pero te lo explicaré línea por línea:

Delegamos el evento click a todos los enlaces, para lo cual los tomamos por la class que les hayas asignado. Cuando se dé un clic en cualquiera de los enlaces, se ejecutará una función anónima:

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    //...
});
 

Ya dentro de la función, como el comportamiento natural de un enlace es redireccionar, evitamos que se produzca dicha acción cancelándola con el método .preventDefault():

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    event.preventDefault();
    //...
});
 

Una vez cancelada dicha acción, procedo a realizar la petición asíncrona (AJAX) utilizando para ello el método $.ajax(), en el cual solo tengo establecer la ruta de destino, misma que es la que posee el enlace pulsado en su atributo href. Cuando se complete el proceso, podrás realizar las acciones que desees con la respuesta recibida en la variable data:

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    event.preventDefault(); //Se cancela la redirección
    $.ajax({
        url: $(this).prop("href")
    }).done(function(data){
        //Instrucciones
    });
});
 

Por ejemplo, si quisieras asignar la respuesta como contenido de un elemento:

Código Javascript:

$(".clase de los enlaces").on("click", function(event){
    event.preventDefault(); //Se cancela la redirección
    $.ajax({
        url: $(this).prop("href")
    }).done(function(data){
        $("#id del elemento").html(data);
    });
});
 

[bichomen]

Pues si funciona ahora, en vez con class, lo hacía con id y no funcionaba, pero... funciona a medias, sigue el enlace y en vez cargármelo dentro de "#id del elemento" lo carga a página completa, osea no esta haciendo el target. Las variables se están pasando bien.


bichomen

[Alexis88]

Si no muestras esa parte del código con la última actualización que hayas hecho, será imposible ayudarte. De cualquier manera, debes de recordar que, en lugar de "id del elemento", debes colocar el valor que hayas asignado en el atributo id del elemento en el que quieras mostrar el resultado.

[bichomen]

Iniciado por Alexis88

Si no muestras esa parte del código con la última actualización que hayas hecho, será imposible ayudarte. De cualquier manera, debes de recordar que, en lugar de "id del elemento", debes colocar el valor que hayas asignado en el atributo id del elemento en el que quieras mostrar el resultado.

Si si ya pongo su valor:

Código HTML:

<script type="text/javascript">
	
	$(".enlace").on('click', function(event)
	{
		event.preventDefault(); //Se cancela la redirección	
				
		$.ajax(
		{
			url: $(this).prop("href")
		}
		).done(function(data)
		{
			$("#contenedor").html(data);
		});
	});
</script> 

Enlace:

Código HTML:

<a href="pagina.php?variable1=1&variable2=1" class="enlace">Página</a> 

Pues lo que comentaba arriba en el div "Contenedor" debería cargar el pagina.php, pero no lo hace, la carga a página completa.



bichomen

[Alexis88]

Puede ser que esté produciéndose un error en el archivo PHP. En el bloque en donde recibes la respuesta, coloca esto: console.log(data); y fíjate en la consola del navegador (F12 >> Console) si la respuesta llega o no como debe ser.

[bichomen]

Después de muchos cambios en la función, funciona a medias, os lo explico.

Esta función de jquery puesta en el index.php lo que hace es cargar en la etiqueta "section" los enlaces, aparte dependiendo del apartado cambia el fondo y cambia el estilo de una caja, según entre en un apartado u otro.

Pues bien, esta función, funciona perfectamente con los enlaces del menú que están en la etiqueta "nav", le doy a cualquier enlace y carga la sección correspondiente con dichos estilos, el problema es que las páginas que carga dentro de las etiquetas "section" también tienen enlaces, que se han de abrir en la misma sección, pues esto ultimo no funciona, carga la página al completo cargándose el index y todo.

He revisado los enlaces, el código, la función parece funcionar bien, pero no lo hace:

En el Head:

Código HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function()
    {       
        $(document).ready(function() 
        {
            $("a").click(function(event) 
            {
                event.preventDefault(); //Se cancela la redirección
                               var classenlace = "." + $(this,"a").attr("class");               

                $.ajax(
                {
                    url: $(this).prop("href")                   
                }
                ).done(function(data)
                {
                    var nombre = $(classenlace).data('nombre');
                    var me = $(classenlace).data('value');  
                    me = "#" +nombre + me;  
                    $("#section").html(data);

                    if (nombre == "contenido") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        /*$(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });*/
                    }                   
                    if (nombre == "menucv") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }                               
                    if (nombre == "amstrad") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#010080",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }           
                    if (nombre == "autor") 
                    {
                        $("#section").css(
                        {
                                "background": "none",
                                "background-color": "#FFFFFF",
                        });                     
                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"
                        });
                    }       
                    if (nombre == "peliculas") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/sepia.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (nombre == "maquinitas") 
                    {
                        $("#section").css(
                        {
                            "background": "none",
                                "background-color": "#FFFFFF",
                        });

                        $(me).css(
                        {
                        /*"background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"  */                  
                        });
                    }               
                    if (nombre == "playmobil") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/playmobil/fondo-play.jpg')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }               
                    if (nombre == "album") 
                    {
                        $("#section").css(
                        {
                            "background-image": "url('../imagenes/cromos_fondo.png')",
                                "background-repeat": "repeat",  
                        });

                        $(me).css(
                        {
                        "background-color": "#5677FC",
                        "border-style": "inset",
                        "color": "#FFFFFF"                  
                        });
                    }           

                });                 
            });
        }); 
    }, 
    false);

</script> 

Formato de los enlaces:

En el menú:

Código HTML:

<a href="http://www.forosdelweb.com/f179/paginas/cv.php?valor=1" class="enlace-cv" data-nombre="menucv" data-value="1">cv</a> 

Dentro de la página que se carga en el "section":

Código HTML:

<div id="menucv2"><a href="http://www.forosdelweb.com/f179/paginas/cv.php?valor=2" class="2enlace-cv2" data-nombre="menucv" data-value="2">Estudios</a></div> 

Como podéis apreciar los 2 enlaces tienen el mismo formato, pero solo funcionan los enlaces que están por fuera del section, los que están dentro no funcionan bien, creo que es porque cambia algo del código de la página intento analizarlo con la herramienta de Chrome para desarrolladores, el debug de javascript que lleva incorporado el Google Chrome pero no consigo ver donde esta el fallo. A ver si me podéis echar una mano.


bichomen

[bichomen]

Siento ser pesado con esto, pero como veo que no me responde nadie he creado una pequeña web recreando el problema que tengo, pongo aquí el enlace, quizás de esta manera alguien vea el problema:

http://www.bichomen.com/Pruebadom/


bichomen

[xerifandtomas]

El problema de que los enlaces que cargas dentro del div no funcionen es que cuando los muestras el DOM ya esta completamente cargado. Y para que nos entendamos el contenido creado o traído después no es en principio accesible por la función.

Hay varias formas de evitar esto, pero lo más simple es que en el código que traes o cargas mediante ajax, añadas las funciones que necesites.

[Alexis88]

Para trabajar con elementos cargados de forma dinámica, debes delegar el evento con el cual deseas afectarlos. Es un tema que se ha tocado ya varias veces en el foro.

Te invito a utilizar el buscador del foro para que encuentres los hilos en los cuales se dio soluciones utilizando la delegación de eventos.