JTable Ajax发布不起作用

Question

I am using the example code straight from the JTable website for PHP. I cannot get values from the AJAX POST.

The javascript in my JTableSimple.php:

$(document).ready(function () {

        //Prepare jTable
        $('#PeopleTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: 'PersonActions.php?action=list',
                createAction: 'PersonActions.php?action=create',
                updateAction: 'PersonActions.php?action=update',
                deleteAction: 'PersonActions.php?action=delete'
            },
            fields: {
                PersonId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });

        //Load person list from server
        $('#PeopleTableContainer').jtable('load');

    });

PersonActions.php (Just showing for list component):

require_once 'config.php';
// connecting to mysql
$con = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
// selecting database
mysql_select_db(DB_DATABASE);
//Getting records (listAction) 
if($_GET["action"] == "list")
{
    //Get Name
    $Name = $_POST['Name'];
    //SQL query
    $result = mysql_query("select * from user_data WHERE Name=$Name");
    //Add selected records into an array
    $rows = array();
    while($row = mysql_fetch_array($result))
    {
        $rows[] = $row;
    }

    //Return result to jTable
    $jTableResult = array();
    $jTableResult['Result'] = 'OK';
    $jTableResult['Records'] = $rows;
    print json_encode($jTableResult);
}

I am using XAMPP. I have so far tried:

• Using var_dump($_POST) which returns nothing.
• Re-installing XAMPP
• Re-installing all the header files for JTable, JQuery, Jquery UI and all the css files.
• Using GET instead of POST but this doesn't work either.

When I open 'PersonActions.php?action=list' I receive a notice that:

Notice: Undefined index: Name in C:\xampp\htdocs\PersonActions.php on line xx

Which I assume means that $_POST['Name'] doesn't exist?

Answer 1

I had the same problem. Try adding this before the actions component in your table properties:

ajaxSettings: {
        type: 'POST', 
        data: {'VariableName': 'VariableValue'},
        url: './PersonActions.php'
        },

This occurs as the action 'list' does not POST any data through AJAX methods to your PersonActions.php. You have to do it manually.

For the other actions such as 'update' and 'delete' you don't need to make any additional changes, just use $_POST['Fieldname'] as shown in the JTable example code.

ALSO: I would recommend installing Firebug. It's really useful for viewing POST data and provides an additional tool for debugging.

EDIT #1 For master/child with PHP: If you want to add a child table, add the following code as an additional field in your master table. I have named the field 'ChildTableButton'.

           fields: {
                ChildTableButton: {
                        title: '',
                        width: '3%',
                        sorting: false,
                        edit: false,
                        create: false,
                        display: function (ChildData) {
                            //Image that will open child table
                            var $img = $('<img src="./img/more.png"/>');
                            //Open child table when user clicks the image
                            $img.click(function () {
                                $('#PeopleTableContainer').jtable('openChildTable',
                                        $img.closest('tr'),
                                        {
                                            title: 'Title',
                                            actions: {
                                                listAction: './tableactions.php?action=listchild',
                                               updateAction:'./tableactions.php?action=updatechild',
                                                deleteAction: './tableactions.php?action=deletechild'
                                                },
                                            fields: {
                                                Field1: {
                                                    title: 'Field 1 child table',
                                                    key: true,
                                                    create: false,
                                                    edit: false,
                                                    width: '50%'
                                                },
                                                Field2: {
                                                    title: 'Field 2 child table',
                                                    width: '50%'
                                                }
                                            }
                                        }, function (data) { //opened handler
                                            data.childTable.jtable('load');
                                        });
                            });
                            //Return image to show on the person row
                            return $img;
                        }
                    },

You can then deal with PHP side by checking if action='listchild' etc, in the same way as your master table.

Hope this helps!