AJAX não executa <script> e nem CSS

Sambuilder · Abril 8, 2012

Por favor, observem os códigos abaixo.

TESTE4.HTML

===================================================================

<html>
<head>
    <title>:::: SAMSITE - web - design - sistemas ::::</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">     
<script type="text/javascript">
    var xmlHttp
    
    function showRequest(str) { 
    
        xmlHttp=GetXmlHttpObject();
        
        if (xmlHttp==null) {
            alert ("Your browser does not support AJAX!");
            return;
            
        } 
        
        var url=str;

        xmlHttp.onreadystatechange=stateChanged;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
    }
    
    function stateChanged() { 
        if (xmlHttp.readyState==4) { 
            document.getElementById("divDIRECIONE").innerHTML=xmlHttp.responseText;
        }
    }
    
    function GetXmlHttpObject() {
        var xmlHttp=null;
        try {
          // Firefox, Opera 8.0+, Safari
          xmlHttp=new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer
            try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }        
</script>
<style>
<!--    
.divCONTEUDO    {
position:absolute;
text-align: center;
width: 100%;
border: 0px #ff0000 solid;
height: 100%;
z-index: 1;
opacity:.3;
-khtml-opacity:.3;
}

.slider1
{
    width: 16px;
    height: 300px;
    background-color: #33CC33;
    position: absolute;
}
.indicator
{
    width: 16px;
    height: 16px;
    background-color: #FF9900;
    position: absolute;
    font-size: 1px;
    overflow: hidden;
}
.container
{
    font-family: arial;
    width: 400px;
    height: 300px;
    padding: 10px;
    border: 1px solid #900;
    overflow: hidden;
    position: relative;
    background-color: #eee;
}
.content
{
    position: absolute;
}
-->
</style>

</head>
<body style="background: url(documentos/imagens/background_complemento1.jpg)">
    <div id="divDIRECIONE" class="divCONTEUDO">CONTEUDO AQUI</div>
    <a href="#" onClick="showRequest('teste3.html')">CLIQUE AQUI PARA ACESSAR TESTE3.HTML</a>
</body>
</html>

TESTE3.HTML ===================================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./documentos/js/jquery.js"></script>
    <script type="text/javascript" src="./documentos/js/interface.js"></script>
    
<title>Slider demo - scrollbar - Interface plugin for jQuery</title>
</head>

<body>
<div class="slider1"><div class="indicator"></div></div>
<div class="container">
    <div class="content">
        <p>START &gt;&gt;&gt;</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et purus in turpis rutrum tempor. Nulla in magna. Ut tempus magna id nisi. Aliquam consectetuer porttitor nisi. Cras scelerisque felis eu velit. Sed sollicitudin, turpis sed consectetuer lobortis, magna pede ultricies nibh, at faucibus neque justo eu diam. Cras eu quam</p><br><br>

        <p>Cras dictum hendrerit lorem. Aliquam aliquam consequat dui. Proin quis eros quis est tincidunt ornare. Curabitur dapibus euismod neque. Aliquam erat volutpat. Mauris aliquet interdum sem</p><br><br>
        
        <p>In vel sapien. Curabitur vitae leo eu arcu aliquam malesuada. Nam ullamcorper gravida est. Nam id dolor. Morbi lobortis lectus porta diam. Fusce erat mauris, molestie et, aliquet varius, interdum eu, leo. Suspendisse blandit arcu eget odio. Vestibulum aliquet risus eget eros mattis volutpat. Proin a nunc sit amet l</p><br><br>
        
        <p>Cras libero tellus, placerat in, aliquam pretium, viverra tempor, sem. Suspendisse molestie tempor purus. Morbi aliquam cursus orci. Sed nec turpis. Aenean quis dolor id sem venenatis ullamcorper. Phasellus </p>
        <p>&lt;&lt;&lt; END</p> 
    </div>
</div>
<script type="text/javascript">
    var ocontainer;
    var ocontent;
    var spaceToScroll;
    $(document).ready(
        function () 
        {
            ocontainer = $('div.container');
            ocontent = $('div.content');
            
            containerSize = jQuery.iUtil.getSize(ocontainer.get(0));
            containerPosition = jQuery.iUtil.getPosition(ocontainer.get(0));
            containerInner = jQuery.iUtil.getClient(ocontainer.get(0));
            
            contentSize = jQuery.iUtil.getSize(ocontent.get(0));
            
            $('div.slider1')
                .css('top', containerPosition.y + 'px')
                .css('left', containerPosition.x + containerSize.wb + 'px')
                .css('height', containerSize.hb + 'px');
            
            spaceToScroll = contentSize.hb - containerInner.h;
            
            $('div.indicator')
                .css('height', containerInner.h * containerSize.hb / contentSize.hb + 'px')
            
            $('.slider1').Slider(
                {
                    accept : '.indicator',
                    onSlide : function( cordx, cordy, x , y)
                    {
                        ocontent
                            .css('top', - spaceToScroll * cordy / 100 + 'px');
                    }
                }
            );
        }
    );
</script>
</body>
</html>

PROBLEMA

===========================

1) Observem que em ... onClick="showRequest('teste3.html') ... eu direciono Teste3.html para a div divDIRECIONE utilizando AJAX;

2) Observem que em Teste3.html eu chamo 2 scripts "jquery.js" e "interface.js" e defino alguns códigos CSS;

3) Este é justamento o problema: Como eu estou chamando Teste3.html via AJAX dentro de Teste4.html estes scripts e CSS simplesmente não funcionam;

4) Se Teste3.html for executado diretamente do browser os scripts e CSS funcionam normalmente;

5) Já tentei transferir estes scripts e CSS para Teste4.html e mesmo assim não funciona.

Coloquei os códigos aqui e estou tentando ser o mais claro possível pra ver me entendem pois este problema está me tirando o juízo.

Por favor me orientem.

Entrar

AJAX não executa <script> e nem CSS

Pergunta

Sambuilder

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades