0v3k Shi3ld3r 0v3k Shi3ld3r - 5 months ago 19
jQuery Question

Page loading objects twice

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?

enter image description here

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

Answer

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.

Comments