2012-05-03 20 views
18

Me gustaría actualizar un div. Debería tener nueva información del servidor en él. Todas las otras respuestas asumen que usted ha conseguido los nuevos datos de su solicitud .ajax $ y te dicen que para cargar datos en el div, ocultarlo, y mostrarla de nuevo, así:actualizar div con jquery

$("#panel").hide().html(data).fadeIn('fast'); 

que sé , Lo sé, probablemente debería obtener datos con Ajax. Pero ahora mismo, quiero actualizar el div, sin refrescar la página, y sin poner HTML nuevo en el div. es posible?

+0

¿Cuál es el punto que refresca el div sin poner un nuevo html en él? Supongo que tiene contenido original en el div que se cambia de alguna manera y necesita volver a colocarse en el div. – Thomas

+0

Simplemente use .empty() en el elemento div para vaciarlo o incluso .html ('') – GillesC

+0

@gillesc ¿Esto no coloca un nuevo html en el div? – Thomas

Respuesta

35

Quiero actualizar el div, sin refrescar la página ... ¿Es esto posible?

Sí, aunque no va a ser obvio que haga algo a menos que cambie el contenido del div.

Si lo que desea es la gráfica de efecto de aparición gradual, basta con quitar el .html(data) llamada:

$("#panel").hide().fadeIn('fast'); 

Aquí es una demostración de que pueda perder el tiempo con: http://jsfiddle.net/ZPYUS/

Cambia el contenido de la div sin hacer una llamada ajax al servidor, y sin actualizar la página. Sin embargo, el contenido está codificado. No puede hacer nada al respecto sin contactar al servidor de alguna manera: ajax, algún tipo de solicitud de subpágina, o algún tipo de actualización de página.

html:

<div id="panel">test data</div> 
<input id="changePanel" value="Change Panel" type="button">​ 

javascript:

$("#changePanel").click(function() { 
    var data = "foobar"; 
    $("#panel").hide().html(data).fadeIn('fast'); 
});​ 

css:

div { 
    padding: 1em; 
    background-color: #00c000; 
} 

input { 
    padding: .25em 1em; 
}​ 
+31

Comenzaré una petición para terminar esta era de 'foo bar foobar' :) –

+5

@ RokoC.Buljan: Porque todos sabemos cuán efectivas son las protestas en Internet, especialmente al cambiar un meme cultural que [ha existido entre 50 y 80 años] (http://en.wikipedia.org/wiki/Foobar#History_and_etymology) :) –

8

probé la primera solución y funciona pero el usuario final puede identificar fácilmente que los divs son refrescante como es fadeIn(), sin fundido en intenté .toggle(). toggle() y funciona perfecto. se puede tratar como esto

$("#panel").toggle().toggle();

funciona perfectamente para mí, ya que estoy desarrollando un mensajero y la necesidad de minimizar y maximizar la ventana de chat de y esto lo hace mejor en lugar de que el código anterior .