Ajax con jquery

chechi123 · #1 (**permalink**) 21/12/2010, 10:05

hola a todos
estoy usando ajax con jquery pero estoy tendiendo un conflicto con un javascirpt

yo tengo un select y dpendiendo de o que seleccione en ese select carga infomacion en otro select

por ejemplo el primero tiene todos los procesos q hay en la BD
1. Proceso 1
2. proceso 2
3. proceso 3
si selecciona proceso 1 en el segundo select se cargara la infromacion referente al proceso 1 : "Actividad 1 P1, Actividad 2 P1...etc etc"

es ahi donde uso el ajax....
este es el codigo

Código:

<script language="JavaScript" type="text/javascript" src="../resources/js/jquery-1.4.4.min.js"></script>  
<script>
$(document).ready(function(){
   $("#proceso").change(function(evento){
      evento.preventDefault();
         $("#destino").load("CInstructivo.php", {proceso: document.getElementById('proceso').value,fecha: document.getElementById('fecha').value,codigo: document.getElementById('codigo').value}, function(){
      });
   });
}) 
</script>

el problema q tengo es q en el mismo archivo uso un script de un calendario... ya q se necesita usar una fecha... ahi se abre un popup.. y el suario puede seleccioanr una fecha....

el ajax se usa cuando el primer select cambia.... y carga la infromacion en el 2 select... antes de esto el calendario funciona perfectamente... depues desaparece.. he provado en IE.. en este simplemente desaparece y sale en la parte inferior "se cargo pero con errores en la pagina"

en firefox y safari depues de que se implementa el ajax la pagina queda en blanco
y solo se ve la imagen del calendario q al darle clic sobre ella aparece el popup... ¿? pero al dar clic sobre ella me sale q el calendario no etsa definido... un error javascript ....

si alguien sabe como solucioanr esto se lso agradeceria... he bsucado en muchas partes y aun no encuentro la solucion....

Gracias

chechi123 · #2 (**permalink**) 21/12/2010, 10:26

miren este es un ejemplo pequeño algo diferente alo q estoy haciendo....
pero sucede exactamente lo mismo.... ¿?

Código HTML:

<html>
<head>
   <title>Ajax Simple</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.4.min.js"></script>    
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("prub.html");
   });
})
</script>
</head>
<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<script language="JavaScript" src="calendar/calendar_db.js"></script>
<link rel="stylesheet" href="calendar/calendar.css">

<input type="text" name="fecha"  size="10" id="fecha" />
	
		<script language="JavaScript">
		// whole calendar template can be redefined per individual calendar
		var A_CALTPL = {
			'months' : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
			'weekdays' : ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa'],
			'yearscroll': true,
			'weekstart': 0,
			'centyear'  : 70,
			'imgpath' : 'calendar/img/'
		}
		
		new tcal ({
			// if referenced by ID then form name is not required
			'controlname': 'fecha'
		}, A_CALTPL);
		</script> 
<br>
<div id="destino">
   
</div>

</body>
</html>

el calendario... es de esta pagina http://www.softcomplex.com/products/tigra_calendar/

y el jquery q uso es: jquery-1.4.4.min que lo descargue de la pagina : http://docs.jquery.com/Downloading_jQuery

peuden probarlo y correrlo.. para q vean especifiamente q e slo q pasa....
muchas gracias.. y espero q alguien peuda colaborarme

caricatos · #3 (**permalink**) 21/12/2010, 12:56

Tema movido desde AJAX

mayid · #4 (**permalink**) 21/12/2010, 16:22

@chechi123: no esta bien que incluyas librerias en el body. Hacelo en el <head>

Por otro lado, especifiquen el atributo type="text/javascript"

Una cosa mas: vean la consola de errores de su navegador a ver que les dice. Y cuentenlo.

chechi123 · #5 (**permalink**) 22/12/2010, 07:27

Cita:

Iniciado por mayid

@chechi123: no esta bien que incluyas librerias en el body. Hacelo en el <head>

Por otro lado, especifiquen el atributo type="text/javascript"

Una cosa mas: vean la consola de errores de su navegador a ver que les dice. Y cuentenlo.

hola... gracias, segui tus consejos

mira el error q sale exactamente en IE:
Exception thrown and not caught
calendar_db.js
Codigo:0

y en firefox (con firebug)
A_TCALS is not defined

es como si al usar ajax.. no crgara denuevo el script del calendario
por lo que intente hacer esto:

Código:

$.getScript('calendar/calendar_db.js');

pero eso tampoco funciono

mayid · #6 (**permalink**) 22/12/2010, 13:09

Que hay en "prub.html"?

Bam_Margera · #7 (**permalink**) 22/12/2010, 13:35

os recomiendo jquery UI

mayid · #8 (**permalink**) 22/12/2010, 16:25

Si, cambiar el calendario puede funcionar.

chechi123 · #9 (**permalink**) 23/12/2010, 13:31

prub.html es el mismo archivo... "es decir es el codigo q puse"
es decir carga la ifnrmacion en el mismo achivo....

e intentado q cargue a un arhivo diferente pero sucede lo mismo.... ya habia intentado con otro calendario q habia encontradpo pero igual.... voy aprobar con otro, porq por ejemplo cuando uso ckeditor funciona bn incluso depues de usar el ajax

gracias

chechi123 · #10 (**permalink**) 23/12/2010, 14:06

Cita:

Iniciado por Bam_Margera

os recomiendo jquery UI

hola..... MCUHAS GRACIAS

con este me funciono....

al principio me sucedio lo mismo

en el ejemplo que hice cargaba algo dentro de un div al dar clcik en el link... dentro de ese div debia cargar el calendario.... ya hi era donde no funcionaba
pero cambie un pedaso y me funciono... no se si sea correcto lo que hice pero funciono....

lo que hice fue q ya no cargara solo en el div sino en todo el body... porngo el codigo como me quedo

Código HTML:

<html>
<head>
    <title>Ajax Simple</title>
	<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.js"></script>    
	<script>
	$(document).ready(function(){
	   $("#enlaceajax").click(function(evento){
		  evento.preventDefault();
		  $("#destino").load("prub2.html");
	   });
	})
	</script>
	<link rel="stylesheet" href="calendar2/development-bundle/themes/base/jquery.ui.all.css">
	<script src="calendar2/development-bundle/jquery-1.4.4.js"></script>
	<script src="calendar2/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="calendar2/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="calendar2/development-bundle/ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="calendar2/development-bundle/css/demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});
	});
	</script>
</head>

<body id="destino">
    <a href="#" id="enlaceajax"><h1>Haz click....!</h1></a>
	<p>Date: <input type="text" id="datepicker"></p>
	
	<div id="xx">
	</div>
	
</body>

</html>

intente eso mismo con el otro calendario y no funciono pero con este si... y eos es lo q necesitaba
gracias