Autocomplete working on localhost, but not on server

I have a search formula with an autocomplete function which works just fine on localhost, but as soon as I put it on a remote server it stops working.

I hope you can help me. Here is some Code:

index.php:

<!DOCTYPE html>
<html lang="de">
 <head>
    <?
    header("Content-Type: text/html; charset=iso-8859-1"); 
    
    ?>

    <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="css/style.css" />
    

    <script src="js/jquery-1.10.2.min.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script> 
</head>
<body>  

    <div id="wrap">
        <h1 class="text-center">Suche</h1>
        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-4 col-xs-offset-6 col-sm-offset-4 col-md-offset-4">
                <form method='POST' action=''>
                <input type='text' name='food' id="country_name" class="form-control txt-auto"/>
                <input type='submit' value='search'>
                </form>

            </div>

        </div>
        
    </div>
    

    
    <script src="js/auto.js"></script>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html><html lang="de"> <head>    <?    header("Content-Type: text/html; charset=iso-8859-1");         ?>​    <link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />    <link rel="stylesheet" href="css/bootstrap.min.css" />        <link rel="stylesheet" href="css/style.css" />    ​    <script src="js/jquery-1.10.2.min.js"></script>     <script src="js/jquery-ui-1.10.3.custom.min.js"></script>    <script src="js/bootstrap.min.js"></script> </head><body>  ​    <div id="wrap">        <h1 class="text-center">Suche</h1>        <div class="row">            <div class="col-xs-6 col-sm-4 col-md-4 col-xs-offset-6 col-sm-offset-4 col-md-offset-4">                <form method='POST' action=''>                <input type='text' name='food' id="country_name" class="form-control txt-auto"/>                <input type='submit' value='search'>                </form>​            </div>​        </div>            </div>    ​        <script src="js/auto.js"></script></body></html>​

ajax.php

<?php


header('Content-Type: text/html; charset=UTF-8');

require_once 'config.php';

if($_GET['type'] == 'country'){
    $result = mysql_query("SELECT *
        FROM table
        WHERE name LIKE '%".strtoupper($_GET['name_startsWith'])."%'
        LIMIT 8");  
    $data = array();
    while ($row = mysql_fetch_array($result)) {
        array_push($data, $row['name']);    
    }   
    echo json_encode($data);
}

?>

JavaScript
 
<?php​​header('Content-Type: text/html; charset=UTF-8');​require_once 'config.php';​if($_GET['type'] == 'country'){    $result = mysql_query("SELECT *        FROM table        WHERE name LIKE '%".strtoupper($_GET['name_startsWith'])."%'        LIMIT 8");      $data = array();    while ($row = mysql_fetch_array($result)) {        array_push($data, $row['name']);        }       echo json_encode($data);}​?>​

auto.js

   $('#country_name').autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url : 'ajax.php',
                            dataType: "json",
                            data: {
                               name_startsWith: request.term,
                               type: 'country'
                            },
                             success: function( data ) {
                                 response( $.map( data, function( item ) {
                                    return {
                                        label: item,
                                        value: item
                                    }
                                }));
                            }
                        });
                    },
                    autoFocus: true,
                    minLength: 0        
                  });

JavaScript
 
   $('#country_name').autocomplete({                    source: function( request, response ) {                        $.ajax({                            url : 'ajax.php',                            dataType: "json",                            data: {                               name_startsWith: request.term,                               type: 'country'                            },                             success: function( data ) {                                 response( $.map( data, function( item ) {                                    return {                                        label: item,                                        value: item                                    }                                }));                            }                        });                    },                    autoFocus: true,                    minLength: 0                          });                      ​

Answer

You are missing the php in the HTML and if your server isn’t set up for short open tags- may cause an issue, and as shown in the comments – there should not be any html content before the header declaration.

should be:

   <?php
    header("Content-Type: text/html; charset=iso-8859-1"); 
    ?>

JavaScript
 
   <?php    header("Content-Type: text/html; charset=iso-8859-1");     ?>​

Advertisement

Answer