Foros del Web » Programando para Internet » Jquery »

Problema con AJAX, JqueryUI y CSS

 Estas en el tema de Problema con AJAX, JqueryUI y CSS en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/12/2010, 16:32
 
Fecha de Ingreso: junio-2009
Mensajes: 75
Antigüedad: 15 años, 5 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.
  #2 (permalink)  
Antiguo 06/12/2010, 21:27
 
Fecha de Ingreso: julio-2008
Mensajes: 208
Antigüedad: 16 años, 4 meses
Puntos: 5
Exclamación Respuesta: Problema con AJAX, JqueryUI y CSS
No carges TODA la pagina dentro del div central que quieres...sino solo div's o parte de html....sino seguro que incluiras varios <head>...y eso te traera muchos problemas...

Te recomiendo que las 5 paginas que cargas con ajax no tengan ni las etiquetas html, head ni body...

Por ejemplo

<div>
TODA EL RESTO ACA
</div>

Asi te va a funcionar de maravilla....otra cosa a tener en cuenta es que si usas ajax ten en cuenta que los elementos que se cargan con ajax no son tenidos en cuenta cuando se invoca a $(document).ready de la pagina que los llama pues ellos no son parte de su dom....para poder agregar efectos a elementos que cargas con ajax debes usar la funcion .live() (consulta con el tio google ;) )...

Espero te de una pista de donde estan los problemas...si haces las cosas asi no tendras problemas..
salute!!! ;)

Etiquetas: ajax, css, jqueryui
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:15.