Foros del Web » Programando para Internet » Jquery »

Problemas con ajax

Estas en el tema de Problemas con ajax en el foro de Jquery en Foros del Web. Hola amigos. Necesito ayuda con ajax para lograr este efecto: http://jsfiddle.net/W884Z/29/ Estos son mis códigos: http://jsfiddle.net/s75BX/ mikehove.-...
  #1 (permalink)  
Antiguo 26/09/2013, 13:45
 
Fecha de Ingreso: abril-2012
Ubicación: Argentina
Mensajes: 215
Antigüedad: 9 años, 6 meses
Puntos: 2
Problemas con ajax

Hola amigos. Necesito ayuda con ajax para lograr este efecto:

http://jsfiddle.net/W884Z/29/

Estos son mis códigos:

http://jsfiddle.net/s75BX/



mikehove.-
  #2 (permalink)  
Antiguo 26/09/2013, 14:00
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 13 años, 3 meses
Puntos: 1532
Respuesta: Problemas con ajax

no estas implementado AJAX para ninguno de los casos, no hay XHR ni los wrappers de jquery para AJAX, consulte un manual sobre AJAX
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 27/09/2013, 05:23
 
Fecha de Ingreso: abril-2012
Ubicación: Argentina
Mensajes: 215
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Problemas con ajax

Buenas amigo. Estuve trabajando un poco más con jquery, este es el efecto que más o menos necesito (logré), pero sé que está muy engorroso y necesito ayuda para limpiarlo.

El tema es que necesito que al posarse el mouse sobre el botón aparezca la carga de la página (que sí funciona correctamente ) y ahí 2 acciones:
  • Si no toca el "div contenido" (o sea inferior) y se aleja del botón: el div inferior desaparece
  • Si toca el "div contenido", otras 2 acciones:
  • Si en el div contenido el mouse se aleja tocando el botón este no desaparece (ESTE ITEM FALTA CORREGIR: QUE NO SE RECARGUE)
  • Si en el div contenido el mouse se aleja no tocando el botón este desaparece

Ahora muestro lo que conseguí:
HTML:
Código HTML:
<button type="button" id="boton">Cargar</button>
<div id="contenidoAjax" style="padding:; border: 1px solid #CCC; display:none; margin:-5px; "><p></p></div> 
Aquí subí el sitio en funcionamiento:
http://www.pruebaconjquery.zz.mu/

CSS:
Código:
.act{background-color: #FC4; display:none;}/*naranja*/
JS:
Código:
$(document).ready(function() {
	$("button#boton").hover(function (e) {
			
	   var $contenidoAjax = $('div#contenidoAjax').html('<p><img src="http://www.funcion13.com/wp-content/uploads/2012/04/loader.gif" /></p>');
	
       $contenidoAjax.load('recogida-de-datos.php').show();	  
	
       $(this).mouseleave(function (e) {			
		if($("div#contenidoAjax").hasClass('sel_check')){
			$('div#contenidoAjax').show();
			 $(this).mouseleave(function (e) {  
		  $('div#contenidoAjax').removeClass('act').hide(); 
		  }); 
			}	
			else{$("div#contenidoAjax").hide();};	
			e.propagationStop();
       });
	});
	
	
	$("div#contenidoAjax").hover(function (e) {		    	  
	      $('div#contenidoAjax').addClass('act').show(); 
		  $(this).mouseleave(function (e) {  
		  $('div#contenidoAjax').removeClass('act').hide(); 
		  });    
	});	
	
	
});

Última edición por mikehove; 27/09/2013 a las 11:06

Etiquetas: ajax, jquery-ajax, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:44.