无法正确使用Jquery.load()功能

时间:2016-09-18 19:59:33

标签: javascript php jquery html

我正在尝试过滤将根据选择显示给用户的结果,但是,它没有正确显示,我不知道我做错了什么。我在同一页面上使用GET进行处理(users.php?rid =)。这是我选择值时的显示方式。似乎它将页面加载到div中两次

enter image description here

选择按钮

<select name="role_id"  id="role_id" style="width: 150px;"
        onchange="">
    <option value="">Select User</option>
    <?php
    $rid = 0;
    if (isset($_GET['rid'])) {
        $rid = clean($_GET['rid']);
    }
    $roles = get_user_roles();
    foreach ($roles as $row):
        ?>
        <option
            value="<?php echo $row['role_id']; ?>"<?php if (isset($rid) && $rid == $row['role_id']) echo 'selected'; ?>>
            <?php echo $row['name']; ?>
        </option>
    <?php endforeach; ?>
</select>

结果DIV

<div  id="filter_result">

    <table class="table  table-striped" >
        <thead>
        <tr>
            <th><div>#</div></th>
            <th><div>Name</div></th>
            <th><div>Email</div></th>
            <th><div>User Type</div></th>
            <th><div>Options</div></th>
        </tr>
        </thead>
        <tbody>
        <?php
        if ($rid < 1) {
            $users = get_users();
        } else {
            $users = get_role_users($rid);
        }
        if ($users->num_rows < 1) {
            echo '<div class = "alert alert-warning text-center">There are no Students for this Class.... <a class="btn btn-primary btn-sm" href="add_user.php">Add User</a></div>';
        }
        $count = 1;
        foreach ($users as $row):?>
            <tr>
                <td><?php echo $count++; ?></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['email']; ?></td>
                <td><?php echo get_role_name($row['role_id']); ?></td>
                <!--Options-->
                <td>
                    <!--Change Role-->
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                data-toggle="dropdown">
                            Change Role <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-default pull-right" role="menu">
                            <?php $roles = get_user_roles();
                            foreach ($roles as $row2):
                                ?>
                                <li>
                                    <a href="change_roles.php?rid=<?php echo $row2['role_id'].'&uid='.$row['user_id'];?>">
                                        <?php echo $row2['name']; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    <!--Delete Student-->
                    <a href="delete_user.php?id=<?php echo $row['user_id']; ?>"
                       onclick="confirm('Are You sure?')" class="btn btn-danger"> Delete</a>
                </td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
</div

JAVASCRIPT

<script>
    $(document).on('change', 'select#role_id', function () {
        var role_id = $(this).val();
        $('#filter_result').load('users.php?rid='+role_id, '#filter_result');

    });
</script>

它应该显示如下 enter image description here

1 个答案:

答案 0 :(得分:1)

由于您在同一页面上检查选择,您可以为身份标签指定ID,例如

<body id="page_body">

然后使用#page_body.load(),它将起作用

$('#page_body').load('users.php?rid='+role_id, '#filter_result');