$.ajax does not read echo from .php

Question

I am trying to get ajax to read and post a echo of a php file into the search suggenstion box but it seems not to work. Any suggestions where is mistake?

(code updated to be without simple mistakes, but still not giving a wanted result)

$(document).ready(function(){
    var left = $('#start').position().left;
    var top = $('#start').position().top;
    var width = $('#start').width();

    $("#suggestionbox").css("left", left+40).css("top", top+60).css("width", width);

    $("#start").keyup(function(){
    var value =  $("#start").val();
    if(value != ''){
            $.ajax(
                {
            type: 'POST',
            url: 'search.php',
            data: {value: value},
            dataType: 'html',
            success: function(data) { 
                debugger;  
                $("#suggestionbox").html(data);
                alert(data); 
                }, //success    
            error: function(){
                alert("nothing");
            } //error
            }); //$.post
        } //if
        }); //keyup
}); //ready

php

<?php echo 'Working!'; ?>

form and div in html file

<form class="inputForm" action="#">
<fieldset>
<input name='start' id="start" class="inputStart" type="text"  placeholder="Start" onfocus="(this.value == 'Start') && (this.value = '')" onblur="if (this.value == '') {this.value = 'Start';}" onfocus="if (this.value == 'Start') {this.value = '';}" />
<input name='end' id="End" class="inputFinish" type="text" placeholder="End" onfocus="(this.value == 'End') && (this.value = '')" onblur="if (this.value == '') {this.value = 'End';}" />
 <select name="count">
<option value="1">1</option>
</select>
<input class="inputDate" type="text" data-type="date" id="datepicker" value="date" />
<input class="searchbutton" type="submit" value=" " />
</fieldset>
</form> 

<div id="suggestionbox">
</div>

Note: php file is in the same folder as js.

Update:

	$("#start").keyup(function(){
  	var value =  $("#start").val();
	if(value != ''){
			$.ajax(
				{
			type: 'POST',
			url: 'search.php',
			data: {value: value},
			dataType: 'html', 
			success: function(data) { 
				debugger;
				$("#suggestionbox").html(data);
				alert(data); 
				}, //success	
			error: function(){
				alert('error');
			} //error
			}); //$.ajax
		} //if
     	}); //keyup

Above shown (repaired) code doesn't put anything into the #suggestionbox field and alert output is full code of php file:

<?php 
echo 'Working!'; 
?>

Answer 1

Did you look in the console for any Javascript errors? In any case, this works (it's pretty much your above code verbatim): http://jsfiddle.net/5jzskmyg/1/

I see that you have now put your code inside a $(document).ready() callback, so I would suggest putting in logging statements to make sure everything is being loaded correctly (perhaps the script itself is not loading). For example:

console.log(1);

$(document).ready(function(){
    console.log(2);

    var left = $('#start').position().left;
    var top = $('#start').position().top;
    var width = $('#start').width();

    $("#suggestionbox").css("left", left+40).css("top", top+60).css("width", width);

    $("#start").keyup(function(){
        console.log(3);

        var value =  $("#start").val();
        if(value != ''){
            $.ajax(
            {
                type: 'POST',
                url: 'search.php',
                data: {value: value},
                dataType: 'html', 
                success: function(data) { 
                    console.log(4);

                    debugger;
                    $("#suggestionbox").html(data);
                    alert(data); 
                    }, //success    
                error: function(){
                    alert('error');
                } //error
            }); //$.ajax
        } //if
    }); //keyup
}); //ready