CODEWITHSUNDEEP
javascriptphpjqueryhtml
Mysterio4
Mysterio4

Reputation: 331

Unable to use Jquery.load() feature properly

I am trying to filter results that will be displayed to user based on selection, but, its not displaying, properly, I do not know what I am doing wrong. I process using GET on the same page (users.php?rid=). This is how it displays when I select a value. Seems it loads the page twice into the div

enter image description here

The Select Button

<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>

RESULT 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>

It should display like this enter image description here

Upvotes: 0

Views: 30

Answers (1)

4Jean
4Jean

Reputation: 765

Since you are Checking selection on the same page, you can assign id to your body tag, for example 

<body id="page_body">

then use #page_body.load(), it will work

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

Upvotes: 1

Related Questions