ajax not returning value from the mysql database

Question

I am hoping to be able to use .post method to send variables to a php file where I could be able to retrieve data from database with mysql query. So far I can send information about the variable using ajax but not able to retrieve output from the php script using ajax. I am very immature to ajax, hence learning through errors...Thanks for looking into my query.

How can I get to display php output within the div tag of index.php

test.php

   <?php require('../config/connection.php'); ?>
        <?php
        $value = $_POST['value'];
        $query = mysqli_query($dbc, "SELECT DISTINCT class,product FROM prdct_categories WHERE class = '$value'");
        while($list = mysqli_fetch_assoc($query)){
        $prdct = $list['product'];
        echo $prdct;    
        }
   ?>

ajax code (index.php)

    <div class="col-md-2" >

         <?php

        $test  = $_GET['product'];
        $q = "SELECT * FROM prdct_categories WHERE product = '$test' ";
        $r = mysqli_query($dbc, $q);
        $path_info = get_path();
        $test1 = $path_info['call_parts'][1];

       While($list = mysqli_fetch_assoc($r)) {?>
      <li class="nav" <?php if($test1==$list['slugs']){echo'id="actives"';} ?>>

<a href="<?php echo $test;?>/<?php echo $list['slugs'];?> ">

<?php echo $list['subgroup']."(".$list['contains'].")".'<br/>';?></a></li>

                 <?php }?>   
                 </div>

                <div class="col-md-4" id="testing">

                </div>

                <script>
                    $(document).ready(function(){

                        $(".nav").click(function(){

                        $.post("test.php", {value:$(this).text()}, function(data) {$("#testing").text(data)} );

                        event.preventDefault();
                        });
                    });
                </script>

Answer 1

Please use this code instead. You do have to prevent the default action of the links that you're clicking within the .nav elements:

    $(".nav > a").click(function(e){ // see change here
            e.preventDefault();   // added here e must match var e above.
            $.post("test.php", {value:$(this).text()}, function(data) {$("#testing").text(data)} );
    });

And your .nav script should be:

<li class="nav<?php if($pageid==$nav['product']){echo ' active';}?>"> 
....

Your current script does not create any elements with class="nav" and therefore, the selector .nav returns nothing. Your current script also creates several elements with the same id, id="nav" , which makes your HTML invalid.. Make the above changes and

Answer 2

Form to return data from ajax.

<?php require('../config/connection.php'); 
      header('Content-Type: application/json');

        $value = $_POST['value'];
        $prdct = array();
        $query = mysqli_query($dbc, "SELECT DISTINCT product FROM prdct_categories WHERE class LIKE '{$value}'");
        while($list = mysqli_fetch_assoc($query)){
        $prdct[] = $list['product'];
        }
        $return = json_encode($prdct);
        echo $return;
        die;
   ?>

In javascript replace:

$.post("test.php", {value:$(this).text()}, function(data) {$("#testing").text(data)} );

to

$.post("test.php", {value:$(this).text()}, function(data){
    for(var k in data) {
    $("#testing").append(data[k]+"<br />");
    }
});

Answer 3

Use $("#testing").html(data); instead of $("#testing").text(data);

<script>
    $(document).ready(function(){
        $(".nav").click(function(){
              $.post("test.php", {value:$(this).text()}, function(data) {
                        $("#testing").html(data);
                    });
              event.preventDefault();
        });
    });
</script>