Jquery AJAX function using json

Question

hey all i'm a bit new in the world of ajax and i couldn't find the reason what is the problem with my code. i'm building a form which i would like the page to show using autocomplete the content already exists in the database.

i want to use jquery ajax function to update the value of a string from a php file.

but unfortunately i keep get the error function and not the success one.

thank you in advance.

this is my html code

    <div id="first_step" style='border-right:1px dotted grey; padding:0 10px 0 0'>

        <div class="image123">
        <img src="img/start.jpg" height="140" width="140" align= "top|left">
        </div>

        <h3> Behaviours Type </h3>
        <p align='justify'> Here you can set the different types of behaviours.<br></p>
        <form method="POST" id="type_form" action="behaviour.php">

            <h5> behaviour type: <input type="text" class= "autocomplete" name="type" id="behaviour_type" ><br> </h5>
            <h5> short description: <input type="text" name="type_description" id="type_description"  ><br></h5>
            <input type="submit" value="Add type" id= "add_type" name="add_type">

        </form>
    </div>
</div>

this is my javascript

<script type="text/javascript">
    var tags;


    $('.autocomplete').on('click', function(e){
    e.preventDefault();


        x=$(this).attr('id');
        console.log(x);
    jQuery.ajax({                                      
    type: "POST",
    url: "behavior_autocomplete_queries.php",
    data:"field_name="+x,
    dataType:"json",
    success:function(ajax){     
       tags=ajax;
    },
    error:function(){
               console.log("There was a problom with the Database please    try again later");
            }
      });

    }); 
</script>

the string which i would like to update is called tags and im trying to do so using a mysql query which works and should received from te following php file called behavior_autocomplete_queries.php which located at the same folder as this html file.

and this is the php file - the database_connection. php file checked and it work

    if ($con==false)
    {
        echo ("<SCRIPT LANGUAGE='JavaScript'> window.alert('We are sorry, there was a problem with the server, Please try again later') </SCRIPT>");
    } 
    else
    {

switch ($_POST["field_name"])
{
    case "behaviour_type":
    {
    $sql="select name from behaviour_incident_type";
    break;
    }

    case "antecedent":
    {
    $sql="SELECT name FROM behavior_incident_antecedent";
    break;
    }

    case "behaviour":
    {
    $sql="select name from behaviour_incident_behaviour";
    break;
    }
    case "Consequence":
    {
    $sql="select name from behaviour_incident_consequence";
    break;
    }

}
$result=mysqli_query($con,$sql);

// Fetch all
$all_data= mysqli_fetch_all($result,MYSQLI_ASSOC);

for ($i=0;$i<count($all_data);$i++){
$temp=($all_data[$i]);
$curr[$i]=($temp["name"]);

    }

 $comma_separated = implode('", "', $curr);
 $intial='"';
 $end='"';

 $return_string = '"'.$comma_separated.'"';


mysqli_free_result($result);

mysqli_close($con);
}

    echo json_encode($return_string);




     ?> 

Answer 1

Maybe this will help you.

1. Use the jQuery change:

   $('.autocomplete').change(function() { ... });

2. Get the data with XMLHttpRequest

   
   if (window.XMLHttpRequest) {
       var xmlhttp = new XMLHttpRequest();
   } else {
       var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           $( "#target" ).append(xmlhttp.responseText);
       }
   }
   
   xmlhttp.open("GET", "behavior_autocomplete_queries.php", true);
   xmlhttp.send();
   

3. Use the jQuery Autocomplete