dth54864
2014-12-08 06:31 阅读 34

jQuery没有使用php include运行

I'm facing a problem of jQuery in index.php not running when i include the file header.php. The nav sidebar were included but when i press the chevron, nothing happened? It only worked if i include header_user.php directly without checking the UserType in header.php. I cant just include header_user.php directly since i need the page to be displayed based on the UserType. In this code, assume that the current UserType is a USER. Please help. I don't know what is the problem.

index.php

<?php
    require_once 'session.php';
    require_once 'connection.php';
?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Nav Sidebar</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/dashboard.css" rel="stylesheet">

    <script>
    var change = true;
    $(document).ready(function () {
        $('[data-toggle=offcanvas]').click(function () {
            $('.row-offcanvas').toggleClass('active');
        });
    });

    function toggle_caret() {
        $("#caret1").toggleClass("glyphicon-chevron-down", change);
        $("#caret1").toggleClass("glyphicon-chevron-left", !change);
        change = !change
    }
    </script>
    </head>

    <body>
    <?php include 'header/header.php'; ?>
    <script src="jquery-1.11.1.min.js"></script> 
    <script src="bootstrap.min.js"></script>

    </body>
    </html>

header.php

<?php

    $UType = $_SESSION['UserType'];

    $tsql = "SELECT * FROM [dbo].[LOGIN] WHERE UserType='$UType'";
    $result = sqlsrv_query( $conn, $tsql, array(), array( "Scrollable" => SQLSRV_CURSOR_KEYSET ));

    while($row=sqlsrv_fetch_array($result))
    {
        if($UType == "USER")
        {
            include 'header_user.php';
        }
        else if ($UType == "SUPERIOR")
        {
            include 'header_superior.php';
        }
        else if ($UType == "ADMIN")
        {
            include 'header_admin.php';
        }
        else 
        die("Not a Valid User Type.");
    }
?>

header_user.php

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;Dashboard<span class="sr-only">(current)</span></a>
                </li>
                <li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>
                </li>
                <ul class="nav collapse" id="sub1">
                    <li><a href="#"><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;Form</a>
                    </li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Status</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;Approved</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Rejected</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;In Process</a>
                    </li>
                </ul>
            </ul>
            <ul class="nav nav-sidebar">
                <li class="nav-divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;Search</a>
                </li>
            </ul>
        </div>

EDIT

I've found that after i changed the query as below, the jQuery worked. Can somebody explain why it happened?

header.php

<?php

    $UType = $_SESSION['UserType'];

        if($UType == "USER")
        {
            include 'header_user.php';
        }
        else if ($UType == "SUPERIOR")
        {
            include 'header_superior.php';
        }
        else if ($UType == "ADMIN")
        {
            include 'header_admin.php';
        }
        else 
        die("Not a Valid User Type.");
?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    dongmeng4742 dongmeng4742 2014-12-08 07:22

    I just gathered all the sources and tested your HTML locally. I'm getting some errors, so I suggest changing your code to this:

    index.php (Moved JS code beneath jQuery and Bootstrap script tags)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <?php
        require_once 'session.php';
        require_once 'connection.php';
    ?>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Nav Sidebar</title>
            <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
            <link href="bootstrap/css/dashboard.css" rel="stylesheet">
        </head>
    
        <body>
            <?php include 'header/header.php'; ?>
    
            <script src="jquery-1.11.1.min.js"></script> 
            <script src="bootstrap.min.js"></script>
            <script>
                var change = true;
                $(document).ready(function () {
                    $('[data-toggle=offcanvas]').click(function () {
                        $('.row-offcanvas').toggleClass('active');
                    });
                });
    
                function toggle_caret() {
                    $("#caret1").toggleClass("glyphicon-chevron-down", change);
                    $("#caret1").toggleClass("glyphicon-chevron-left", !change);
                    change = !change
                }
            </script>
        </body>
    </html>
    

    header.php (Removed the database code, since that seemed to be the root of your problem)

    <?php
    $UType = $_SESSION['UserType'];
    
    if($UType == "USER")
    {
        include 'header_user.php';
    }
    else if ($UType == "SUPERIOR")
    {
        include 'header_superior.php';
    }
    else if ($UType == "ADMIN")
    {
        include 'header_admin.php';
    }
    else
    { 
        die("Not a Valid User Type.");
    }
    ?>
    

    header_user.php (Adding missing closing div tag)

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;Dashboard<span class="sr-only">(current)</span></a>
                    </li>
                    <li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>
                    </li>
                    <ul class="nav collapse" id="sub1">
                        <li><a href="#"><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;Form</a>
                        </li>
                        <li class="nav-divider"></li>
                        <li><a href="#">Status</a>
                        </li>
                        <li><a href="#"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;Approved</a>
                        </li>
                        <li><a href="#"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Rejected</a>
                        </li>
                        <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;In Process</a>
                        </li>
                    </ul>
                </ul>
                <ul class="nav nav-sidebar">
                    <li class="nav-divider"></li>
                    <li><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;Search</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    点赞 评论 复制链接分享

相关推荐