FancyGrid ajax success Variable is not defined - php

Question

I'm having a little bit trouble about sending a database data to a client side table. I'am using fancy grid.
Client Side
$.ajax({
url:'function.php?what=listofbookings',
type:'post',
data:{user:user},
success: function(data) {
var clients = data;
}
});
});
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "people", type: "text", width: 150, validate: "required" },
{ name: "email", type: "number", width: 50 }
]
});
And here is the PHP Code
if(isset($_GET['what'])){
if($_GET['what'] === 'listofbookings'){
$selit = "SELECT * FROM dbdbdb_booking";
$queryit = mysqli_query($conn,$selit);
$arr = array();
while($row = mysqli_fetch_assoc($queryit)){
$arr[] = $row;
}
echo json_encode($arr);
}
}
For some reason the var client is not defined and the data is not passing to clients.
Any thoughts ?

Answer 1

You need to initialize jsGrid inside your AJAX's success :
$.ajax({
url:'function.php?what=listofbookings',
type:'post',
data:{user:user},
success: function(data) {
var clients = data;
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "people", type: "text", width: 150, validate: "required" },
{ name: "email", type: "number", width: 50 }
]
});
}
});