Page loading objects twice

Question

The issue I'm experiencing is the code below seems to clone (duplicate) the form or any other HTML that loads on the page .

The first time I load the page the form appears as normal however when I type in the search text-box and delete all the characters the form displays twice (or any other HTML I place on the page)

How can it be possible to load the page without the form(s) or any other of the page contents repeated please?

<?php
    include('..\db.php');
    $con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);
    $q1 = mysqli_query($con, "SELECT * FROM tbl1 username");
    $data = "";

    // if the search is true 
    if(isset($_POST['search']))
    {
        // 
        $var = $_POST['search'];

        if ($query = mysqli_query($con,"SELECT username FROMtbl1 WHERE username LIKE '%$var%'"))
        {
            // possible creating duplicate results 
            while($row = mysqli_fetch_array($query))
            {
                $data .= '<div>' . $row['username'] . '</div>';  
            }
            echo $data;
        }
    }
    else
    {
    }
?>
<HTML>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('.input').keyup(function() {
                var a = $('.input').val();
                $.post('livesusers.php', { "search": a }, function(data) {
                    $('#display').html(data);
                });
            });
        });
    </script>
</head>
<body>
    // form to input text  and search
    <h1>Search For User</h1>
    <form action= "livesusers.php" method='POST'>
        <input type="text" name="search" class='input'>
    </form>
    <div id='display' style='margin-top: 100px'></div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 12:08

The problem is because you're making an AJAX request to the current page. The response of the request includes the PHP code as well as the HTML below it, hence the current page is cloned in its entirety. To fix this, simply place your PHP code in its own file and make the AJAX request to that location. Try this:

response.php (name this whatever you like)

<?php
    include('..\db.php');
    $con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);
    $q1 = mysqli_query($con, "SELECT * FROM tbl1 username");
    $data = "";

    // if the search is true 
    if(isset($_POST['search']))
    {
        // 
        $var = $_POST['search'];

        if ($query = mysqli_query($con,"SELECT username FROMtbl1 WHERE username LIKE '%$var%'"))
        {
            // possible creating duplicate results 
            while($row = mysqli_fetch_array($query))
            {
                $data .= '<div>' . $row['username'] . '</div>';  
            }
            echo $data;
        }
    }
    else
    {
    }
?>

display.php

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $('.input').keyup(function() {
                var a = $('.input').val();
                // change the page name below as required...
                $.post('response.php', { "search": a }, function(data) {
                    $('#display').html(data);
                });
            });
        });
    </script>
</head>
<body>
    <h1>Search For User</h1>
    <form action= "livesusers.php" method='POST'>
        <input type="text" name="search" class='input'>
    </form>
    <div id='display' style='margin-top: 100px'></div>
</body>
</html>

To make this even more robust you should consider changing your PHP code to return JSON instead of an unencoded string. See this question for a demonstration of how to do that.

score 0 · Answer 2 · answered Jul 04 '16 at 19:11

0

The following code has an issue, it's adding data to itself twice!

$data .= $data . '<div>' . $row['username'] . '</div>';

Try this instead

$data .= '<div>' . $row['username'] . '</div>';

answered Jul 04 '16 at 19:11

Nick

16,066
3
16
32

Sorry I already changed that from a previous error . I updated it now to the code above . I had pasted a older copy . The problem remains . – Jul 04 '16 at 19:14

Page loading objects twice

2 Answers2