Using Ajax for display data from database

Question

I already learn from internet or another questions in this forum, but still confusion and this code still not work.

I trying display data using onChange by combo box menu(1-7), if 0 will be empty

This for code html&javascript :

<html>
    <head>
        <script src="jquery-1.9.1.js"></script>
    </head>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#menu').change(function(){
            if($(this).val != 0){
                var menu_id = $(this).val();
                $.ajax({
                    type:       "GET",
                    url:        "menu.php",
                    menu_id :   menu_id,
                    dataType:   "html",
                    success: function(response){
                        $("#data-menu").html(response);
                    }
                });
            }
        }).change();
    )};
    </script>

<body>
    <table>
        <tr>
            <td>Menu</td>
            <td>
                <select name="menu" id="menu">
                    <option value="0" selected='selected'>Select Menu </option>
                    <option value="1">Menu - 1 </option>
                    <option value="2">Menu - 2 </option>
                    <option value="3">Menu - 3 </option>
                    <option value="4">Menu - 4 </option>
                    <option value="5">Menu - 5 </option>
                    <option value="6">Menu - 6 </option>
                    <option value="7">Menu - 7 </option>    
                </select>   
            </td>   
        </tr>
    </table>    
    <div id="data-menu" align="center">
        <!-- Show Data In Here -->
    </div>
</body>

And this for menu.php

<?php
$connection=mysql_connect("localhost","root","");
if(!$connection)
    die('Cant connect !! '. mysql_error());

mysql_select_db("BK",$connection);
$menu_id= $_GET['menu_id'];

$result=mysql_query("select * from show_product where menu = '" . $menu_id . "' order by show_product_id",$connection);

$no = 0; // for number

echo "<table border='1' >
    <tr>
        <td>Menu :</td>
        <td>".$menu_id."</td>
    </tr>
    <tr>
        <td>No</td>
        <td>Head Text</td>
        <td>Title Text</td>
        <td>Max Item</td>
        <td>Date</td>
        <td>Status</td>
    </tr>";

while($data = mysql_fetch_row($result))
{   
    echo "<tr>";
    $no+=1;
    echo "<td>".$no."</td>";                                    //no
    echo "<td>".$data["head_text"]."</td>";                 //head
    echo "<td>".$data["title_text"]."</td>";                    //title
    echo "<td>".$data["max_item"]."</td>";                      //max item
    echo "<td>".$data["date_added"]."</td>";                    //date
    echo "<td>".'<a href = "Edit_menu.php?id_menu='.$data["show_product_id"].'">EDIT</a>'."</td>";  // EDIT
    echo "</tr>";
}
echo "</table>";
?>

Please refer this stackoverflow.com/questions/9436534/…. This will solve your problem. In your code you are passing menu_id : menu_id, instead of this pass menu_id in data. — Apb
– Apb, Commented Feb 17, 2016 at 4:59

Rayon · Accepted Answer · 2016-02-17 06:19:00Z

3

To send data over ajax, use data key in ajax config and data should hold object

To access this data over php, user key of the object

Try this:

$(document).ready(function() {
  $('#menu').change(function() {
    if ($(this).val != 0) {
      var menu_id = $(this).val();
      $.ajax({
        type: "GET",
        url: "menu.php",
        data: {
          menu_id: menu_id
        },
        dataType: "html",
        success: function(response) {
          $("#data-menu").html(response);
        }
      });
    }
  }).change();
});

menu_id can be accessed as $_GET['menu_id']

Fiddle here

edited Feb 17, 2016 at 6:19

answered Feb 17, 2016 at 4:57

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

1 Comment

Vilthering Over a year ago

When i try change menu like (1-7), does not display anything ??

Collectives™ on Stack Overflow

Using Ajax for display data from database

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related