PHP Ajax returning HTML twice

Question

I have a PHP/Ajax function that returns a list of countries with the given characters in a textbox. Ofcourse Ajax updates this list everytime the textbox gets edited.

Index.PHP calls all the other files, classes and HTML. But when the textbox gets updated, Ajax sends a POST variable to index.PHP because this is where the Search.PHP file with the class name SearchEngine gets called. But because he sends this to the index.php everything keeps getting reloaded and the HTML will be returned twice.

Index.php

<?php
require_once("cgi_bin/connection.php");
require_once("Database_Handler.Class.php");
require_once("HTML_Page.Class.php");
require_once("search.php");

$hostname_conn = "localhost";
$database_conn = "ajax";
$username_conn = "root";
$password_conn = "";

$db = new DatabaseHandler();
$conn = $db->openConnection($hostname_conn, $username_conn, $password_conn, $database_conn);

$IndexPage = new page();
echo $IndexPage->render();
$SearchEngine = new SearchEngine($conn); 
?>

Please ignore the poor and unsecure database connection. I am currently transforming all my code to PDO and refining it but that is for later.

Search.PHP

<?php
class SearchEngine{

    private $html;

    public function __construct($conn){

        $this->html = '<li class="result">
                            <h3>NameReplace</h3>
                            <a target="_blank" href="ULRReplace"></a>
                        </li>';

        if (isset($_POST["query"])) {
            $search_string = $_POST['query'];
        }

        //$search_string = mysql_real_escape_string($search_string);

        if (strlen($search_string) >= 1 && $search_string !== ' ') {

            $query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
            $result = $conn->prepare($query);
            $result->execute();
            $result_array = $result->fetchAll();

                foreach ($result_array as $result) {
                    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
                    $display_url = 'sadf';

                    $output = str_replace('NameReplace', $display_name, $this->html);
                    $output = str_replace('ULRReplace', $display_url, $output);
                    echo($output);
                }
        }
    }

}
?>

And as final the Javascript

$(document).ready(function() {

function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);

    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "index.php", //Referring to index.php because this is where the class SearchEngine is called
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("ul#results").html(html);
            }
        });
    }

    return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    }

    else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
});
});

note: HTML is being returned from the "page" class called inside Index.php

How do i not let everything get called twice?

Thank you,

EDIT: A new file was suggested where i direct the ajax url to AutoComplete.php

AutoComplete.PHP

Please explain what should be in the file and why. I am clueless.

Don't send the ajax to index.php from index.php That's like making an infinite loop. — developerwjk
– developerwjk, Commented Jul 7, 2014 at 21:45
@developerwjk Well, how would i start to solve this problem? because what you told me is what i already figured out. — Rien
– Rien, Commented Jul 7, 2014 at 21:47
Use different scripts for serving AJAX and page display. Or have your script check $_SERVER['REQUEST_METHOD'] -- if it's GET, it displays the page, if it's POST it returns the AJAX response. — Barmar
– Barmar, Commented Jul 7, 2014 at 21:48
Create another file called autocomplete.php for instance there you can put the query to retrieve the results and make your ajax call without any problem — martinezjc
– martinezjc, Commented Jul 7, 2014 at 21:50

developerwjk · Accepted Answer · 2014-07-07 22:28:34Z

1

Basically, just add a parameter to your Ajax call to tell the index.php its being called by Ajax, and then wrap an if-statement around the two lines that print out your actual index page:

if(!isset($_REQUEST['calledByAjax']))
{
  $IndexPage = new page();
  echo $IndexPage->render();
}

and in your Ajax call:

data: { query: query_value, calledByAjax: 'true'  },

Or make another php page, like ajaxsearch.php that's the same as your index.php but lacking those two lines, and call that in your Ajax call.

answered Jul 7, 2014 at 22:28

developerwjk

8,6342 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rien Over a year ago

Ignore my last comments, that was just a simple mistake by myself. Thank you so much this has worked for me! thank you for having patience with me and explaining to me.

martinezjc · Accepted Answer · 2014-07-07 22:04:37Z

0

First thing (this is a sample, not tested yet)

autocomplete.php

<?php
$search_string = $_POST['query'];

$query = 'SELECT * FROM country WHERE name LIKE "%' . $search_string . '%"';
$result = $conn->prepare($query);
$result->execute();
$result_array = $result->fetchAll();

foreach ($result_array as $result) {
    $display_name = preg_replace("/" . $search_string . "/i", "<b>" . $search_string . "</b>", $result['name']);
    $display_url = 'sadf';

    $output = str_replace('NameReplace', $display_name, $this->html);
    $output = str_replace('ULRReplace', $display_url, $output);
 }

echo($output);
?>

autocomplete.js

function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);

if(query_value !== ''){
    $.ajax({
        type: "POST",
        url: "autocomplete.php", //Here change the script for a separated file
        data: { query: query_value },
        cache: false,
        success: function(html){
            $("ul#results").html(html);
        }
    });
}

return false;
}

$("input#search").keyup(function() {
    clearTimeout($.data(this, 'timer'));
    var search_string = $(this).val();

    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    } else {
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        search(); // call the function without setTimeout 
    }
  });
 });

Have luck :)

answered Jul 7, 2014 at 22:04

martinezjc

3,5953 gold badges24 silver badges29 bronze badges

9 Comments

Rien Over a year ago

Alright now what should i do with Search.PHP to me it looks completely useless and i am just altering a few bits of code from that file?

Rien Over a year ago

And how should i call autocomplete since its not a class anymore etc.

martinezjc Over a year ago

we dont know that you had a search.php file, you just put the index.php file, you must give more details to get a right answer :)

Rien Over a year ago

But.. in my question i stated the name of every file and under the name a block of code with everything inside of it. The block code of autocomplete.php is nearly the same as search.php

Rien Over a year ago

The only file i didnt give was HTML_Page.class.PHP and the Style.css for obvious reasons. since one is almost pure HTML and the other css

|

Collectives™ on Stack Overflow

PHP Ajax returning HTML twice

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related