Duda Jquery

LR

Necesito que me echeis una mano.

No llevo mucho tiempo usando jquery, se algunas cosillas basicas y poco mas.

Tengo una simple funcion para cargar contenido en un div.

$("#origen").click(function() {
 $.post("document.html", function(data){
  $("#destino").empty();
  $("#destino").append(data);
 });
});

La idea es filtrar el contenido que carga y donde carga en funcion de un radio button.

La estructura es la siguiente:


<div id="menu">

   <div id="filtro_1">
       <input type="radio" name="header_1" id="1" > <label for="1">1</label>
       <input type="radio" name="header_1" id="2" > <label for="2">2</label>
    </div> 

   <div id="filtro_2">
       <input type="radio" name="header_2" id="3" > <label for="3">3</label>
       <input type="radio" name="header_2" id="4" > <label for="4">4</label>
   </div>

 </div>


 <div id="contenido">

  <div id="contenido_1">
  </div>


   <div id="contenido_2">
   </div>

 </div>

Basicamente es lo que puse arriba, tengo varios divs de origen y varios de destino y lo que quiero es usar la misma funcion y que cargue contenido en un lado o en otro en función del radio que seleccione.

No se ni si se puede hacer como pido ni si hace falta algo mas.

Gracias de antemano ;)

Kiroushi

Quieres copiar de un div a otro?

$("#origen").click(function() {
 $("#destino").html($("#origen").html());
 });
});
3 respuestas
LR

#2 No, realmente lo que quiero es cargar contenido en un div en concreto que va variando en funcion del div donde se encuentran los radio buttons.

En plan

-bloque 1 de radio enlaza con div_1
-bloque 2 de radio enlaza con div_2

y a su vez, que en función del radio button que seleccione me cargue contenido desde un html externo.

Si en vez de hacerlo de varios html externos se pudiese hacer desde 1 solo usando anclas, tambien me sirve, no se si me explico...

algo en plan

  • bloque_1 => radio_1 =====> div_1 (destino) ====> contenido_a_cargar_div_1_1.html

  • bloque_1 => radio_2 =====> div_1 (destino) ====> contenido_a_cargar_div_1_2.html

  • bloque_1 => radio_3 =====> div_1 (destino) ====> contenido_a_cargar_div_1_3.html

  • bloque_2 => radio_1 =====> div_2 (destino) ====> contenido_a_cargar_div_2_1.html

  • bloque_2 => radio_2 =====> div_2 (destino) ====> contenido_a_cargar_div_2_2.html

O bien:

  • bloque_1 => radio_1 =====> div_1 (destino) ====> contenido_a_cargar_div_1.html#contenido_1

  • bloque_1 => radio_2 =====> div_1 (destino) ====> contenido_a_cargar_div_1.html#contenido_2

  • bloque_1 => radio_3 =====> div_1 (destino) ====> contenido_a_cargar_div_1.html#contenido_3

  • bloque_2 => radio_1 =====> div_2 (destino) ====> contenido_a_cargar_div_2.html#contenido_1

  • bloque_2 => radio_2 =====> div_2 (destino) ====> contenido_a_cargar_div_2.html#contenido_2

Todo, obviamente desde la misma funcion para no tener 1 funcion por cada radio button que tenga (seran bastantes)

Merkury

Lo que yo haría es esto:


$("#origen").click(function() {
 $.post("document.html", function(data){

        if($("#raddiobutt1:checked") == true)
       {
            <Cargo una cosa>
        }else if ($("#raddiobutt2:checked") == true)
        {
            <Cargo otra cosa>
        }

 });
});

Lo unico que no recuerdo si :checked devuelve true y false o 1 y 0.

Todo es mirartelo con un alert.

Espero que te sirva de ayuda.

1 respuesta
LR

#4 pero ahi sigo teniendo el "problema" de tener que poner un $.post en cada else no?

1 respuesta
Kiroushi

#5 ¿Puedes poner el código? Si te digo la verdad no termino de entender qué necesitas xD

$.post no tienes que usarlo a no ser que uses un script para devolverte asíncronamente el contenido (php, por ejemplo).

En caso de que quisieras usar páginas externas podrías usar $.load(), pero ya te digo, pega el código y te concreto.

1 respuesta
LR

#6 Aun no tengo listo el codigo, quiero saber como y si se puede hacer primero xD

Lo que quiero es preparar varios divs y en funcion del radio button que seleccione me lo cargue en un div en concreto, solo que hay varios grupos de radio button, cada uno apuntaría a un div de carga en concreto y cada radio button con su html externo correspondiente

1 respuesta
Merkury

#7 Que problema tienes con los post?

En cada if haz el post del form que necesites y fiesta es mas yo lo haria con $.ajax() y si el request devuelve done, haría la carga del html externo.

1 respuesta
LR

#8 Mirare la documentación a fondo a ver que saco xD

Lo que quería era poder tenerlo todo en 1 sola funcion sin tener que controlar gran cosa, por ejemplo:

function...(origen)

var destino;
....
...
switch(origen)

case 'bloque_1':
 destino: 'div_1';
 break;

case 'bloque_2':
 destino: 'div_2';
 break;
......
......

$("#"+origen).click(function() {
 $.post(origen+".html", function(data){
  $("#"+destino).empty();
  $("#"+destino).append(data);
 });
});

de todas formas me mirare bien la documentación a ver que saco.

3 respuestas
Merkury

#9 Tener todo en una sola función sin controlar gran cosa, es una frase llena de incongruencias.

Yo ya te he dado una solucion, otra cosa no se me ocurre para controlar los radiobuttons.

De todas formas si no haz que en el onclick del radio button se provoque un auto post en la pagina y cargues lo que necesites.

Kiroushi

#9 A ver, cada radio tiene un val, no? Pues simplemente haz un

$("#destino").load($('input[name=NombreRadio]:checked', '#formulario').val()+'.htm');
LR

Thx a los 2, cuando llegue a casa mirare a ver que saco ;)

TaiCHoKe

Sigo sin entender porque no te vale #2

Genera la variable data dinamicamente y punto.

1 respuesta
Merkury

#13 Hombre la historia es que el quiere discriminar en base a los radio buttons en una funcion.

Aunque la solución de #2 es mas limpia y rápida.

TaiCHoKe

Se me ocurre argo asin. Luego un onclick u onchange o lo que le corresponda en cada radiobutton y listo.

//Montas la logica y data aquí
function pintarFiltrado()
{
var data = "";
   if($("#1").is(':checked')) {  
data += "<div>moñas1</div>"; } if($("#2").is(':checked')) {
data += "<div>moñas2</div>"; } if($("#3").is(':checked')) {
data += "<div>moñas3</div>"; } if($("#4").is(':checked')) {
data += "<div>moñas4</div>"; } $("#destino").empty().html(data)); }
tada

#9

$("input[type=radio]").click(function() {
	$("input[type=radio]:checked").each(function() {
        switch($(this).parent().attr('id'))
		{
			case 'filtro_1':
				//contenido_a_cargar_div_1.html#contenido_ID . ID del radio $(this).attr('id')
			break;
			case 'filtro_2':
				//contenido_a_cargar_div_2.html#contenido_ID . ID del radio $(this).attr('id')
			break;
		}
    });
});

El .click lo cambias por el submit o lo que sea.. he puesto el input#radio para hacer las pruebas con el código que has puesto en el primer post.

LR

Al final lo he hecho asi:

$(".radio").click(function(){
		
	 var url = $(this).attr("value");
	 var destino = $(this).attr("cargar");	 

	 $.post(url, function(data){		 

		  var contenido = $(data).attr("style");
		  $("."+destino).attr("style", contenido);
	
	});
});

y el html viene a ser algo asi:


<input type="radio" name="a" id="primero" class="radio" cargar="contenedor1" value="primero.html" > <label for="primero">Primero</label>

<input type="radio" name="a" id="segundo" class="radio" cargar="contenedor1" value="segundo.html" > <label for="segundo">Segundo</label>

<input type="radio" name="a" id="tercero" class="radio" cargar="contenedor1" value="tercero.html" > <label for="tercero">Tercero</label>



<input type="radio" name="b" id="primero" class="radio" cargar="contenedor2" value="primero.html" > <label for="primero">Primero</label>

<input type="radio" name="b" id="segundo" class="radio" cargar="contenedor2" value="segundo.html" > <label for="segundo">Segundo</label>

<input type="radio" name="b" id="tercero" class="radio" cargar="contenedor2" value="tercero.html" > <label for="tercero">Tercero</label>

Con eso en principio me funciona con todos los radiobuttons sin tener que liar mucho el codigo.

Thx a todos ;)

Usuarios habituales

  • LR
  • tada
  • TaiCHoKe
  • Merkury
  • Kiroushi