实现样式不适用于ajax

时间:2017-10-27 13:09:18

标签: javascript php jquery ajax materialize

我在使用物化时遇到问题。 index.php包含具体化的脚本和样式。 我使用1 div来显示使用ajax的内容。问题是,当进行ajax调用时,样式不起作用。

这是我的代码:

的index.php

<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="./css/evaluaciones.css"/>
<!-- JQuery / Materialize CSS + JavaScript imports -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

 <script src="./js/index.js"></script>
</head>


<body>
  <div id="container">
      <?php include ('./include/sidebar.php'); ?>
      <?php include ('./include/header.php'); ?>
    <div id="content">
    </div>
   </div>
</body>

index.js

function mostrar(id, legajo)
{
$.ajax({
data: {
    id: id,
    legajo: legajo
},
type: 'POST',
dataType: 'html',
url: './ajax/procesador_pagina.php',
timeout: 100000
})


    .done(function(response) {
        //alert('funciona');
        $('#content').html(response);
    })
    .fail(function(jqXHR, textStatus, errorThrown)
    {
        $('#content').html('<h3>Ocurrió un error.. <br>Comuniquese con el personal de Sistemas</h3>');
        if (console && console.log)
        {
            console.log("La solicitud a fallado: " + textStatus);
        }
    });
}

procesador_pagina.php

sleep(2);

if ($_POST['id'] == 1)
{
    include "../modulos/personal_cargo.php";
}
if ($_POST['id'] == 2)
{
     include "../modulos/eval_con_personal.php";
}

的sidebar.php

<?php
?>
 <div id="menu" >
    <ul id="slide-out" class="side-nav fixed show-on-large-only blue-grey 
darken-4 center">
         <a href="index.php"><img id="logo" class="circle" height='60' width='60' src="./images/FF_logo.jpg" /></a>
        <a href ="#" class="brand-logo"></a><p>Fundación Favaloro</p>
        <ul class="collapsible" data-collapsible="accordion">
                <li>
                <div class="collapsible-header left-align"><i class="material-icons">star_border</i>Competencias</div>
                <div class="collapsible-body">
                    <div class="collection left-align">
                        <a href="#!" class="collection-item left-align" id="evaluar_completencias" onclick="mostrar(2)"><i class="tiny material-icons">navigate_next</i>Evaluar Competencias</a>
                        <a href="#!" class="collection-item left-align"><i class="tiny material-icons">navigate_next</i>Autorizar Competencias</a>
                    </div>
               </div>
            </li>
            <li>
               <div class="collapsible-header left-align"><i class="material-icons">receipt</i>Reportes</div>
                <div class="collapsible-body">
                    <div class="collection left-align">
                        <a href="#!" class="collection-item left-align"><i class="tiny material-icons">navigate_next</i>Estructura</a>
                        <a href="#!" class="collection-item left-align"><i class="tiny material-icons">navigate_next</i>Resultados</a>
                        <a href="#!" class="collection-item left-align"><i class="tiny material-icons">navigate_next</i>Resultados Tabla</a>
                        <a href="#!" class="collection-item left-align"><i class="tiny material-icons">navigate_next</i>Resultados Gráficos</a>
                       <a href="#!" class="collection-item left-align" id="auditoria_clicks" onclick="mostrar(3)"><i class="tiny material-icons">navigate_next</i>Autitoría de Clicks</a>
                    </div>
                </div>
            </li>
        </ul>
       </li>
   </ul>
</div>

非常感谢。

0 个答案:

没有答案