dongyou7472
2013-06-18 19:53
浏览 50
已采纳

第一次排序后,JQuery停止响应

This is my index.php which works at first when clicked for sorting

<html>   
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tablesorter-demo").trigger("update");
            $("#tablesorter-demo").tablesorter({
                sortList: [
                    [0, 0],
                    [2, 1]
                ],
                widgets: ['zebra']
            });
            $("#options").tablesorter({
                sortList: [
                    [0, 0]
                ],
                headers: {
                    3: {
                        sorter: false
                    },
                    4: {
                        sorter: false
                    }
                }
            });
        });


        function showUser(str) {
            if (str == "") {
                document.getElementById("subjtable").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("subjtable").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "getSubject.php?q=" + str, true);
            xmlhttp.send();
        }
    </script>
    <title>Faculty Subject</title>
</head>

<body>
    <form>
         <h1 align="center">Faculty Subject Offerings</h1>

        <br/>
         <h1>Faculty</h1>

         <h1>
        <select name="typeselector" onchange="showUser(this.value)">
            <option value="Arts">Arts</option>
            <option value="Science">Science</option>
        </select>
    </h1>

        <div id="subjtable">
            <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
                <thead>
                    <tr>
                        <th>Subject Code</th>
                        <th>Subject Title</th>
                        <th>Lecturer</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                $mysqli = new mysqli( 'localhost', 'root', '9876543210', 'jye');
                $stmt = $mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects");
                $stmt->execute();
                $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description);
                while($stmt->fetch()) {
                    echo <<<TABLE
                    <tr>
                        <td>$subjcode</td>
                        <td>$subjtitle</td>
                        <td>$lecturer</td>
                        <td>$description</td>
                        </tr>
                    TABLE;
                } ?>
                </tbody>
            </table>
        </div>
    </form>
</body>

It's working when running this php and connect with my database. Mention again. working perfectly in this php

but then i change my select box value and it will send method POST to another php namegetSubject.php

<html>  
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#tablesorter-demo").trigger("update");
                $("#tablesorter-demo").tablesorter({
                    sortList: [
                        [0, 0],
                        [2, 1]
                    ],
                    widgets: ['zebra']
                });
                $("#options").tablesorter({
                    sortList: [
                        [0, 0]
                    ],
                    headers: {
                        3: {
                            sorter: false
                        },
                        4: {
                            sorter: false
                        }
                    }
                });
            });
        </script>
    </head>
    
    <body>
        <div id="subjtable">
            <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
                <thead>
                    <tr>
                        <th>Subject Code</th>
                        <th>Subject Title</th>
                        <th>Lecturer</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $q=$ _GET[ "q"]; $mysqli=n ew mysqli( 'localhost', 'root', '9876543210', 'jye'); $stmt=$ mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects where course = '".$q."'"); $stmt->execute(); $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description); while($stmt->fetch()) { echo
                    <<<TABLE <tr>
                        <td>$subjcode</td>
                        <td>$subjtitle</td>
                        <td>$lecturer</td>
                        <td>$description</td>
                        </tr>TABLE; } ?></tbody>
            </table>
        </div>
    </body>
</html>

Then at the second php there. my Jquery sorting already cannot work . my Jquery do is based on this website http://tablesorter.com/docs/

any answer will be appreciate. first time user at here i already searched answer and here but found nothing for me

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dpvhv66448 2013-06-18 20:15
    已采纳

    I don't think your code does what you think it does.

    • You activate the onchange of <select name="typeselector" onchange="showUser(this.value)">
    • The onchange is sending a GET request using XMLHttpRequest
    • The request is sent to "getSubject.php?q="+str
    • The "response" you are sending back is an entire HTML webpage (<html>...content...</html>)
    • You're then attempting to insert this response into the DIV on the first page using document.getElementById("subjtable").innerHTML=xmlhttp.responseText;

    Essentially, you're trying to stick a webpage within another webpage.

    To give you the right direction, change getSubject.php to only be the following, and test it out then:

           <table id="tablesorter-demo" class="tablesorter" border="1" cellpadding="0" cellspacing="1">
                <thead>
                        <tr>
                            <th>Subject Code</th>
                            <th>Subject Title</th>
                            <th>Lecturer</th>
                            <th>Description</th>
                        </tr>
                </thead>
                <tbody>
                <?php
                $q=$_GET["q"];
    
                        $mysqli = new mysqli('localhost','root','9876543210','jye');
                        $stmt = $mysqli->prepare("select subjectcode,title,lecturer,description from erehwonsubjects where course = '".$q."'");
                        $stmt->execute();
                        $stmt->bind_result($subjcode,$subjtitle,$lecturer,$description);
                        while($stmt->fetch())
                        {
    
                              echo <<<TABLE
                                <tr>
                                    <td>$subjcode</td>
                                    <td>$subjtitle</td>
                                    <td>$lecturer</td>
                                    <td>$description</td>
                                </tr> 
    
    TABLE;
    
                        }
    
                        ?>
                </tbody>
            </table>
    

    And note, this is not the "proper" way to handle it, but should work to give you the idea of what was wrong.

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题