cargar archivo css despues de ajax con jquery

hanscruz · #1 (**permalink**) 12/03/2010, 16:13

Pos eso ...

Hago muchas llamadas ajax usando jquery, ahora tambien quiero llamar los archivos css en las llamadas ajax que hago pero no puedo lograrlo, ¿o es que no se puede?

lo que pasa es que decidi separa mi css segun secciones y ahora quiero llamarlos juntos con las peticiones para darle sel formato algo asi:

ajax --> agregar.php, estilo_agregar.css --> agregar.php con formato del css

y que se aplique correctamente.

Bueno espero sus respuestas.

mayid · #2 (**permalink**) 12/03/2010, 17:27

No funciona incluirlo en agregar.php?

include(estilo.css);

Igual, me causó curiosidad y busque, y encontre esto en internet:
http://topsecretproject.finitestatem...y-with-jquery/

juaniquillo · #3 (**permalink**) 12/03/2010, 17:33

La verdad es que no se que quieres hacer exactamente. ¿Puedes dejar el código para verlo?

hanscruz · #4 (**permalink**) 12/03/2010, 18:42

Bueno pues no creo que sea cosa de poner codigo ya que lo quiero saber es como hacerlo, estoy perdido, busque mucho pero no halle respuesta incluso lei todas las formas ajax de jquery pero no hay ni un solo ejemplo de lo que quiero hacer, entonces me puse a pensar que talves mi planteamiento estaria mal y decidi preguntar.

Bueno tratare de explicarme mejor:

Tengo una aplicacion hecha 100% usando ajax con jquery.
Tengo mas de 100 secciones (archivos php) los cuales llamo mediante ajax usando .load, $.ajax, $.get, etc., segun el requerimiento.
Los estilos css que dan forma a cada seccion los cargo en un archivo unico css, en el head al iniciar la aplicacion (index.php).

Bien hasta ahi todo iva bien la aplicacion funcionaba perfectamente. Pero resulta que el codigo de inicio es era muy pesado, cargaba miles de lineas de javascript y miles de lineas de css, entonces opte por separar los codigos y cargarlos solo cuando se haga la peticion de alguna seccion.

Bien logre perfectamente separar el codigo javascript me funciona perfectamente (la verdad no tuve que hacer mucho ya que jquery lo hace por mi)

El problema se presento cuando separe el codigo css, trate de insertarlo de muchas formas pero la peticion ajax no me las toma osea no aplica el css a la seccion correspondiente.

Lo hice de las siguientes formas:

Código HTML:

Ver original<head>
<style type="text/css" title="currentStyle" media="screen">@import "css/estilos.css";</style>
</head>

Este no lo toma por que el head ya ha sido leido al cargar la aplicacion (index.php)

Código Javascript:

Ver original<script type="text/javascript">
$('#midiv').addClass(function(){
color: "black",
background-color: "white"
});
</script>

Este ultimo lo intente de muchas formas, usando $.getscript, .load, .css, etc, casi todo lo que hay en la documentacion de jquery.com, pero no me funciona.

Segun lo que investigue se debe a que los estilos ya han sido cargados y al llamrlos de forma asincrona se puede cambiar el dom pero no leer nuevamente los estilos.

Bien, dicho esto espero haberme explicado mejor, segun creo, y ya lo dije creo que lo estoy haciendo de otra forma y talves esto es muy sencillo de hacer, pero no doy con ello.

Saludos.

mayid · #5 (**permalink**) 12/03/2010, 18:57

Cargando otra pagina no debería incluir <html>. Proba poniendo solo el codigo CSS, via un include ,en un archivo PHP que a su vez es llamado por Ajax.

hanscruz · #6 (**permalink**) 12/03/2010, 19:06

Mayid fue lo primero y lo mas logico que hice pero no funciona.

Gracias por tu respuesta.

Estoy probando la opcion anterior que pusiste haber si me funciona.

AppenTo parece ser la respuesta.

Luego te aviso saludos.

sublime_style · #7 (**permalink**) 15/03/2010, 08:17

Muy buen aporte mayid, esta muy bueno para tenerlo de recurso!

mayid · #8 (**permalink**) 15/03/2010, 08:21

Es esto, no? Funciona ok?

Cita:

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});

Dany_s · #9 (**permalink**) 15/03/2010, 10:30

no será que es problema de referencia a las hojas de estilo?

cuando haces un load a agregar.php en ese archivo podes incluir al css y lo va a tomar, por ej:

Código HTML:

<link rel="stylesheet" href="agregar.css" type="text/css" media="screen" />
<div>contenido de agregar.php</div>

si en index haces

Código HTML:

$("div").load("agregar.php");

te va a traer todos los estilos que tengas en agregar.css porque lo llamas desde agregar.php

el problema común es que cuando agregar.php esta en una carpeta inferior o superior por ejemplo clientes/agregar.php y lo llamas desde el index que está en un nivel inferior, porque no va a encontrar la ruta ya que agregar.php hace referencia al css de la forma agregar.css href="agregar.css", como lo llamas desde un directorio inferior tendrias que usar href="clientes/agregar.css"

medio liado pero no se como explicar jeje

por ej:
crea en una misma carpeta:
index.php
uno.php
uno.css
dos.php
dos.css

en index colocá este código:

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('#cambiar').toggle( function (){
            $("#contenido").load("uno.php");
        }, function (){
                $("#contenido").load("dos.php");
        });
    });
  </script>
  <style>
      div{height:300px; width:300px}
  </style>
</head>
<body>
    <a href="#" id="cambiar">Llamar archivos</a>
    <div id="contenido"> </div>
</body>
</html>

en uno.php colocá:

Código HTML:

<link rel="stylesheet" href="uno.css" type="text/css" media="screen" />
<div>pagina uno con color rojo</div>

incluye el archivo uno.css que tiene un color de fondo rojo

en uno.css colocá:

Código HTML:

body{background-color:red}

en dos.php colocá:

Código HTML:

<link rel="stylesheet" href="dos.css" type="text/css" media="screen" />
<div>pagina dos color azul</div>

incluye el archivo dos.css que tiene un color de fondo azul

en dos.css colocá:

Código HTML:

body{background-color:blue}

entras a index y al clickear en el link vas a ver como carga el contenido de los archivos y a su vez cambiar el color de fondo

si entras por url a uno.php o a dos.php vas a ver que cada uno tiene su color de fondo como se le indica en el css

hasta ahi todo bien

ahora create una carpeta que se llame seccion1 y coloca los archivos uno.php y uno.css y otra carpeta que se llame seccion2 y coloca los archivos uno.php y dos.php, si entras por url a seccion1/uno.php vas a ver que sigue todo igual, lo mismo para seccion2/dos.php, en el index para llamar a los archivos vas a tener que modificar a $("#contenido").load("seccion1/uno.php"); y $("#contenido").load("seccion2/dos.php");

pero cuando llamas a esos archivos vas a ver que se cambia el contenido por no los estilo como lo haciamos hoy cuando estaban todos en una misma carpeta porque no va a encontrar el css, lo que tenes que hacer es en uno.php colocar
<link rel="stylesheet" href="seccion1/uno.css" type="text/css" media="screen" /> y en dos.php <link rel="stylesheet" href="seccion2/dos.css" type="text/css" media="screen" />

tenes que haces referencia al css desde el index o bien usar url obsolutas como http:dominio.com.ar/carpeta/carpeta/archivo.css asi no tenes problemas desde ninguna ubicación

ojala sea esto tu problema jeje

luismi2505 · #10 (**permalink**) 27/10/2010, 15:04

otra opcion seria colocarse un id al

Código HTML:

Ver original<link id="css_pagina" rel="stylesheet" href="" type="text/css">

y con js cambiar asi:

Código Javascript:

Ver original$("#css_pagina")[0].href = "../css/style.css";

mayid · #11 (**permalink**) 29/10/2010, 12:33

luismi2505: todo vien, pero el tema es de marzo y ya estamos en octubre ;o)

Igual, gracias por tu aporte.