Tema: Problema con AJAX, JqueryUI y CSS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/12/2010, 16:32
Stackado
 
Fecha de Ingreso: junio-2009
Mensajes: 75
Antigüedad: 15 años, 6 meses
Puntos: 0
Problema con AJAX, JqueryUI y CSS
Hola,

Bueno me encuetro desarrollando un sistema para el manejo de consultas en BD basada en Web con PHP, HTML, Javascript y CSS como lenguajes base, todo iba de maravilla a excepción de un pequeño detalle con el que me tope hace unos momentos, les explico, dado que el sistema se basa en 7 paginas todas con el mismo diseño de cabeceras, menus y pies de pagina y lo unico que cambia es el contenido central, decidi utilizar AJAX para solamente tener que recargar la parte centrar de las paginas para asi solo utilizar una todo el tiempo y asi minimizar el numero de peticiones y carga de las mismas imagenes todo el tiempo, todo iba de maravilla con el cargo de las paginas, asi que decidi incluir los efectos que me habian solicitado en una de las paginas, por lo que opte por utilizar el Autocomplete del Jquery UI, inclui los archivos necesarios pero que sorpresa me tope al ver que no funciona, nisiquiera me mandaba llamar la funcion, despues de hacer un analisis con el Firebug me di cuenta que al parecer al cargar las paginas en el contenido central pareciera cargarme 2 veces la pagina, como si tuviera 2 etiquetas <head> y asi, por lo que me limite a cargar los archivos solo a la pagina donde se cargarian todas las demas webs, pero aun asi no jala, podrian darme una mano?, les dejo el orden de la pagina con y sin cargar para que vean lo que digo, asi como los archivos que utilizo para el autocomplete.

Sin cargar las paginas:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  4. <head>
  5. <title>Sistema Bitacora para el Control de Solicitudes de Servicio</title>
  6. <link type="text/css" rel="stylesheet" href="system.css"/>
  7. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-1.4.2.min.js"></script>
  8. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"></script>
  9. <script  type="text/javascript" src="ajax.js" ></script>
  10. <script language="JavaScript" type="text/javascript">
  11. $(function() {
  12.         $("#depen").autocomplete({
  13.         source: "prueba1.php", 
  14.         minLength: 3, 
  15.             select: function( event, ui ) {
  16.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  17.                 return false;
  18.                 }
  19.                 });
  20.             });
  21. $(function() {
  22.         $("#serv").autocomplete({
  23.         source: "prueba2.php", 
  24.         minLength: 3, 
  25.             select: function( event, ui ) {
  26.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  27.                 return false;
  28.                 }
  29.                 });
  30.             });                         
  31. $(function() {
  32.         $("#espe").autocomplete({
  33.         source: "prueba3.php", 
  34.         minLength: 3, 
  35.             select: function( event, ui ) {
  36.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  37.                 return false;
  38.                 }
  39.                 });
  40.             }); 
  41. </script>
  42. </head>
  43. <body>
  44. <div class="header">
  45.  
  46.     <div class="head">
  47.     </div>
  48.     <div class="user">
  49.         <p class="user1">
  50.             Usuario:
  51.         </p>
  52.         <p class="user2">
  53.         | Salir |
  54.         </p>
  55.     </div>
  56.  
  57. </div>
  58. <div class="cont">
  59. <div class="main">
  60.     <div class="menu">
  61.         <div class="opciones">
  62.             <p class="opc">
  63.              
  64.                 <a  href="javascript:llamadasin('captura_de_servicio.php', 'contenedor');" title="Captura deservicio" class="cap"></a>
  65.                 <a href="javascript:llamadasin('seguimiento_de_servicio.php', 'contenedor');" title="Seguimiento de servicio" class="segu"></a>
  66.                 <a href="javascript:llamadasin('correo_electronico.php', 'contenedor');" title="Correo electronico" class="correo"></a>
  67.                 <a href="javascript:llamadasin('traslados.php', 'contenedor');" title="Traslados" class="tras"></a>
  68.  
  69.                 <a href="home.php#" class="cons"></a>
  70.             </p>
  71.         </div>
  72.     </div>
  73.     <div class="main" id="main">
  74.         <div class="contenido"id="contenedor">
  75.         <div class="estado">
  76.             <p class="est">Bienvenido</p>
  77.         </div>
  78.         </div>
  79.     </div>
  80. </div>
  81. </div>
  82. <div class="footer">
  83. <div class="foot"></div>
  84. © Derechos reservados 2010, Universidad de Colima.<br/>
  85. Página desarrollada por la Dirección General de Servicios Telemáticos.<br/>
  86. Av. Universidad #333. Colonia Las Víboras. C.P. 28040. Colima, Col., México. Tel (+52) 312 310 00.<br/>
  87. </div>
  88.  
  89. </body>
  90. </html>

Cabe mencionar que las paginas se cargan dentro del div "main" cambiando tambien el div "estado", Ahora con una pagina ya cargada:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  4. <head>
  5. <title>Sistema Bitacora para el Control de Solicitudes de Servicio</title>
  6. <link type="text/css" rel="stylesheet" href="system.css"/>
  7. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-1.4.2.min.js"></script>
  8. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"></script>
  9. <script  type="text/javascript" src="ajax.js" ></script>
  10. <script language="JavaScript" type="text/javascript">
  11. $(function() {
  12.         $("#depen").autocomplete({
  13.         source: "prueba1.php", 
  14.         minLength: 3, 
  15.             select: function( event, ui ) {
  16.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  17.                 return false;
  18.                 }
  19.                 });
  20.             });
  21. $(function() {
  22.         $("#serv").autocomplete({
  23.         source: "prueba2.php", 
  24.         minLength: 3, 
  25.             select: function( event, ui ) {
  26.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  27.                 return false;
  28.                 }
  29.                 });
  30.             });                         
  31. $(function() {
  32.         $("#espe").autocomplete({
  33.         source: "prueba3.php", 
  34.         minLength: 3, 
  35.             select: function( event, ui ) {
  36.             $(this).val( $('<textarea/>').html(ui.item.value).val() );
  37.                 return false;
  38.                 }
  39.                 });
  40.             }); 
  41. </script>
  42. </head>
  43. <body>
  44. <div class="header">
  45.     <div class="head">
  46.     </div>
  47.     <div class="user">
  48.         <p class="user1">
  49.             Usuario:
  50.         </p>
  51.         <p class="user2">
  52.         | Salir |
  53.         </p>
  54.     </div>
  55. </div>
  56. <div class="cont">
  57. <div class="main">
  58.     <div class="menu">
  59.         <div class="opciones">
  60.             <p class="opc">
  61.              
  62.                 <a href="javascript:llamadasin('captura_de_servicio.php', 'contenedor');" title="Captura deservicio" class="cap"></a>
  63.                 <a href="javascript:llamadasin('seguimiento_de_servicio.php', 'contenedor');" title="Seguimiento de servicio" class="segu"></a>
  64.                 <a href="javascript:llamadasin('correo_electronico.php', 'contenedor');" title="Correo electronico" class="correo"></a>
  65.                 <a href="javascript:llamadasin('traslados.php', 'contenedor');" title="Traslados" class="tras"></a>
  66.                 <a href="home.php#" class="cons"></a>
  67.             </p>
  68.         </div>
  69.     </div>
  70.     <div class="main" id="main">
  71.         <div class="contenido" id="contenedor">
  72.  
  73.  
  74. <title>Sistema Bitacora para el Control de Solicitudes de Servicio</title>
  75.  
  76. <div class="cont">
  77.     <div class="main">
  78.         <div class="estado">
  79.             <p class="est">Captura de servicios</p>
  80.         </div>
  81.         <form action="recibe.php" method="post" enctype="multipart/form-data">
  82.                 <p class="cp1">Quien Reporta: <input size="45" type="text"></p> <p class="cp4">Quien Recibe el servicio: <input size="45" type="text"></p>
  83.                 <p class="cp2">Dependencia: <input size="70" id="depen" type="text"></p>   <p class="cp5">Extension: <input size="10" type="text"></p>
  84.                 <p class="cp3">Descripcion del Servicio: <input size="122" type="text"></p>
  85.                 <br><br>
  86.                 <br>
  87.                 <p class="cp6">Servicio TIC:
  88.                     <input size="90" type="text">
  89.                 </p>
  90.                 <br>
  91.                 <p class="cp7">Servicio:
  92.                     <input size="90" type="text">
  93.                 </p>
  94.                 <br>
  95.                 <p class="cp8">Especialista:
  96.                     <input size="90" type="text">
  97.                 </p>
  98.                 <br>
  99.                 <input class="boton3" value="" type="image">
  100.             </form> 
  101.     </div>      
  102. </div>      
  103. </div>
  104.     </div>
  105. </div>
  106. </div>
  107. <div class="footer">
  108. <div class="foot"></div>
  109. © Derechos reservados 2010, Universidad de Colima.<br>
  110. Página desarrollada por la Dirección General de Servicios Telemáticos.<br>
  111. Av. Universidad #333. Colonia Las Víboras. C.P. 28040. Colima, Col., México. Tel (+52) 312 310 00.<br>
  112. </div>


aun reitrando cont y main para solo cargar el contenido del centro no funciona, a veces me lanza un error que dice que la funcion no esta definida pero solo eso.

Otro detalle es que a poner los archivos necesarios:

Código HTML: 
Ver original
  1. <link type="text/css" rel="stylesheet" href="jquery-ui-1.8.5.custom/development-bundle/demos/demos.css"/>
  2. <link type="text/css" rel="stylesheet" href="jquery-ui-1.8.5.custom/development-bundle/themes/base/jquery.ui.all.css"/>
  3. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js"></script>

Me altera los CSS del diseño orginal de la pagina, asi me diriga a donde es el error del CSS y lo comente o borre de todas maneras sigue afectando el CSS.

Realmente estoy hecho bolas, de cualquier manera cualquier comentario de ayuda es bienvenido.

Saludos.