Ok first i have tried live php ajax edit in this example and my files here :
ajax.php
<?php
include 'configuration.php';
include 'functions/functions.php';
$action = utf8_encode($_REQUEST['action']);
?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var table11_Props = {
filters_row_index: 1,
match_case: true,
remember_grid_values: true
};
var tf11 = setFilterGrid("table11", table11_Props);
</script>
<script>
TogetherJSConfig_enableAnalytics = true;
TogetherJSConfig_cloneClicks = "#run, .toggler";
TogetherJSConfig_toolName = "Collaboration";
</script>
<script src="https://togetherjs.com/togetherjs.js"></script>
</head>
<body>
<?php
switch($action) {
case "load":
$query = mysql_query("SELECT * FROM `add_new_player` ORDER BY player_id ASC");
$count = mysql_num_rows($query);
if($count > 0) {
while($fetch = mysql_fetch_array($query)) {
$record[] = $fetch;
}
}
?>
<table id="table11" class="as_gridder_table" style="direction: rtl">
<tr class="grid_header">
<td><div class="grid_heading">اسم اللاعب</div></td>
<td><div class="grid_heading">اسم </div></td>
<td><div class="grid_heading">سنة الميلاد</div></td>
<td><div class="grid_heading">النوع</div></td>
</tr>
<tr id="addnew">
<td> </td>
<td colspan="6">
<form id="gridder_addform" method="post">
<input type="hidden" name="action" value="addnew" />
<table width="100%">
<tr>
<td><input type="text" name="full_name" id="full_name" class="gridder_add" /></td>
<td><input type="text" name="club_name" id="club_name" class="gridder_add" /></td>
<td><input type="text" name="birthday" id="club_name" class="gridder_add" /></td>
<td><input type="text" name="gender" id="gender" class="gridder_add" /></td>
<td><input type="text" name="birthday" id="birthday" class="gridder_add" /></td>
<td><select name="profession" id="profession" class="gridder_add select">
<option value="">SELECT</option>
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>"><?php echo $departments; ?></option>
<?php } ?>
</select></td>
<td><input type="text" name="country" id="country" class="gridder_add" /></td>
<td>
<input type="submit" id="gridder_addrecord" value="" class="gridder_addrecord_button" title="Add" />
<a href="cancel" id="gridder_cancel" class="gridder_cancel"><img src="images2/delete.png" alt="Cancel" title="Cancel" /></a></td>
</tr>
</table>
</form>
</tr>
<?php
if($count <= 0) {
?>
<tr id="norecords">
<td colspan="7" align="center">No records found <a href="addnew" id="gridder_insert" class="gridder_insert"><img src="images2/insert.png" alt="Add New" title="Add New" /></a></td>
</tr>
<?php } else {
$i = 0;
foreach($record as $records) {
$i = $i + 1;
?>
<tr class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; } ?>">
<!--<td><div class="grid_content sno"><span><?php echo $i; ?></span></div></td>-->
<td><div class="grid_content editable" title="<?php echo $records['full_name']; ?>"><span><?php echo $records['full_name']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("full_name|".$records['player_id']); ?>" value="<?php echo htmlentities($records['full_name']); ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['club_name']; ?>"><span><?php echo $records['club_name']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("club_name|".$records['player_id']); ?>" value="<?php echo $records['club_name']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['birthday']; ?>"><span><?php echo $records['birthday']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("birthday|".$records['player_id']); ?>" value="<?php echo $records['birthday']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['gender']; ?>"><span><?php echo $records['gender']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("gender|".$records['player_id']); ?>" value="<?php echo $records['gender']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['weight']; ?>"><span><?php echo $records['weight']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("weight|".$records['player_id']); ?>" value="<?php echo $records['weight']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['kata_kumite']; ?>"><span><?php echo $records['kata_kumite']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("kata_kumite|".$records['player_id']); ?>" value="<?php echo htmlentities($records['kata_kumite']); ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['individual_collective']; ?>"><span><?php echo $records['individual_collective']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("individual_collective|".$records['player_id']); ?>" value="<?php echo $records['individual_collective']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['heavey_light']; ?>"><span><?php echo $records['heavey_light']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("heavey_light|".$records['player_id']); ?>" value="<?php echo $records['heavey_light']; ?>" /></div></td>
<td><div class="grid_content editable" title="<?php echo $records['belt_color']; ?>"><span><?php echo $records['belt_color']; ?></span>
<select class="gridder_input select" name="<?php echo encrypt("belt_color|".$records['player_id']); ?>">
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>" <?php if($departments == $records['belt_color']) { echo 'selected="selected"'; } ?>><?php echo $departments; ?></option>
<?php } ?>
</select>
</div></td>
<td><div class="grid_content editable" title="<?php echo $records['country']; ?>"><span><?php echo $records['country']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("country|".$records['player_id']); ?>" value="<?php echo $records['country']; ?>" /></div></td>
<!--<td><div class="grid_content editable"><span><?php echo date("Y/m/d", strtotime($records['posted_date'])); ?></span><input type="text" class="gridder_input datepicker" name="<?php echo encrypt("posted_date|".$records['player_id']); ?>" value="<?php echo date("Y/m/d", strtotime($records['posted_date'])); ?>" /></div></td>-->
<td style="text-align: center">
<a href="gridder_addnew" id="gridder_addnew" class="gridder_addnew"><img src="images2/insert.png" alt="Add New" title="Add New" /></a>
<a href="<?php echo encrypt($records['player_id']); ?>" class="gridder_delete"><img src="images2/delete.png" alt="Delete" title="Delete" /></a></td>
</tr>
<?php
}
}
?>
</table>
<?php
break;
case "addnew":
$full_name = isset($_POST['full_name']) ? html_entity_decode($_POST['full_name']) : '';
$club_name = isset($_POST['club_name']) ? $_POST['club_name'] : '';
$birthday = isset($_POST['birthday']) ? $_POST['birthday'] : '';
$gender = isset($_POST['gender']) ? $_POST['gender'] : '';
$weight = isset($_POST['weight']) ? $_POST['weight'] : '';
$kata_kumite = isset($_POST['kata_kumite']) ? $_POST['kata_kumite'] : '';
$individual_collective = isset($_POST['individual_collective']) ? $_POST['individual_collective'] : '';
$heavey_light = isset($_POST['heavey_light']) ? $_POST['heavey_light'] : '';
$profession = isset($_POST['profession']) ? $_POST['profession'] : '';
$country = isset($_POST['country']) ? $_POST['country'] : '';
$date_of_admission = isset($_POST['date']) ? $_POST['date_of_admission'] : '';
mysql_query("INSERT INTO `add_new_player` (full_name, club_name, birthday, gender, weight, kata_kumite, individual_collective, heavey_light, belt_color, country, date_of_admission) VALUES ('$full_name', '$club_name', '$birthday', $gender, '$weight', '$kata_kumite' , '$individual_collective','$heavey_light', '$profession','$country', '$date_of_admission') ");
break;
case "update":
$value = $_POST['value'];
$crypto = decrypt($_POST['crypto']);
$explode = explode('|', $crypto);
$columnName = $explode[0];
$rowId = $explode[1];
if($columnName == 'posted_date') { // Check the column is 'date', if yes convert it to date format
$datevalue = $value;
$value = date('Y-m-d', strtotime($datevalue));
}
$query = mysql_query("UPDATE `add_new_player` SET `$columnName` = '$value' WHERE player_id = '$rowId' ");
break;
case "delete":
$value = decrypt($_POST['value']);
$query = mysql_query("DELETE FROM `add_new_player` WHERE player_id = '$value' ");
break;
}
?>
<script>
$.ajax({
data: parameters,
type: "POST",
url: ajax_url,
timeout: 20000,
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
dataType: 'json',
success: callback
});
</script>
</body>
</html>
and another grid.php
<?php
include 'connection.php';
mysql_set_charset('UTF-8',$conn);
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER_SET utf8");
?>
<script type="text/javascript">
$(function (){
// Function for load the grid
function LoadGrid() {
var gridder = $('#as_gridder');
var UrlToPass = 'action=load';
gridder.html("loading....");
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass,
success: function(responseText) {
gridder.html(responseText);
}
});
}
// Seperate Function for datepiker() to save the value
function ForDatePiker(ThisElement) {
ThisElement.prev('span').html(ThisElement.val()).prop('title', ThisElement.val());
var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass
});
}
LoadGrid(); // Load the grid on page loads
// Execute datepiker() for date fields
$("body").delegate("input[type=text].datepicker", "focusin", function(){
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd',
onSelect: function() {
setTimeout(ForDatePiker(ThisElement), 500);
}
});
});
// Show the text box on click
$('body').delegate('.editable', 'click', function(){
var ThisElement = $(this);
ThisElement.find('span').hide();
ThisElement.find('.gridder_input').show().focus();
});
// Pass and save the textbox values on blur function
$('body').delegate('.gridder_input', 'blur', function(){
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
if(ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass
});
});
// Same as the above blur() when user hits the 'Enter' key
$('body').delegate('.gridder_input', 'keypress', function(e){
if(e.keyCode == '13') {
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value='+ThisElement.val()+'&crypto='+ThisElement.prop('name');
if(ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass
});
}
});
// Function for delete the record
$('body').delegate('.gridder_delete', 'click', function(){
var conf = confirm('Are you sure want to delete this record?');
if(!conf) {
return false;
}
var ThisElement = $(this);
var UrlToPass = 'action=delete&value='+ThisElement.attr('href');
$.ajax({
url : 'ajax.php',
type : 'POST',
data : UrlToPass,
success: function() {
LoadGrid();
}
});
return false;
});
// Add new record
// Add new record when the table is empty
$('body').delegate('.gridder_insert', 'click', function(){
$('#norecords').hide();
$('#addnew').slideDown();
return false;
});
// Add new record when the table in non-empty
$('body').delegate('.gridder_addnew', 'click', function(){
$('html, body').animate({ scrollTop: $('.as_gridder').offset().top}, 250); // Scroll to top gridder table
$('#addnew').slideDown();
return false;
});
// Cancel the insertion
$('body').delegate('.gridder_cancel', 'click', function(){
LoadGrid()
return false;
});
// For datepiker
$("body").delegate(".gridder_add.datepiker", "focusin", function(){
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd'
});
});
// Pass the values to ajax page to add the values
$('body').delegate('#gridder_addrecord', 'click', function(){
// Do insert vaidation here
if($('#full_name').val() == '') {
$('#full_name').focus();
alert('Enter the Full Name');
return false;
}
if($('#club_name').val() == '') {
$('#club_name').focus();
alert('Enter the Club Name');
return false;
}
if($('#birthday').val() == '') {
$('#birthday').focus();
alert('Enter the Birthday');
return false;
}
if($('#gender').val() == '') {
$('#gender').focus();
alert('Enter the Gender');
return false;
}
if($('#weight').val() == '') {
$('#weight').focus();
alert('Enter the Weight');
return false;
}
if($('#kata_kumite').val() == '') {
$('#kata_kumite').focus();
alert('Enter the kata Or kumite');
return false;
}
if($('#individual_collective').val() == '') {
$('#individual_collective').focus();
alert('Enter the individual Or collective');
return false;
}
if($('#heavey_light').val() == '') {
$('#heavey_light').focus();
alert('Enter the heavey Or light');
return false;
}
if($('#country').val() == '') {
$('#country').focus();
alert('Enter the country');
return false;
}
if($('#profession').val() == '') {
$('#profession').focus();
alert('Select the Profession');
return false;
}
/*if($('#date').val() == '') {
$('#date').focus();
alert('Select the Date');
return false;
}*/
// Pass the form data to the ajax page
var data = $('#gridder_addform').serialize();
$.ajax({
url : 'ajax.php',
type : 'POST',
data : data,
success: function() {
LoadGrid();
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<span id="typed2" dir="rtl" lang="ar">
</span>
</div>
<br><br><br>
<div class="as_wrapper">
<!--<h1 class="h1"><a href="">Simple onClick edit in jQuery Ajax PHP – Simple PHP Data Grid</a></h1>-->
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
</div>
</div>
</body>
and configuration.php file
<?php
$host = "localhost"; // Your hostname
$username = "****"; // Your host username
$password = "****"; // Your host password
$db = "players"; // Your database name
mysql_connect($host, $username, $password) or die("Oops! Coudn't connect to server"); // Connect to the server
mysql_select_db($db) or die("Oops! Coudn't select Database"); // Select the database
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET utf8");
header("Content-Type: text/html; charset=UTF-8");
?>
and functions.php
<?php
// Function for encryption
function encrypt($data) {
return base64_encode(base64_encode(base64_encode(strrev($data))));
}
// Function for decryption
function decrypt($data) {
return strrev(base64_decode(base64_decode(base64_decode($data))));
}
?>
the problem is when i'm trying to edit this any row of these tables to any arabic words it give me question mark chars ??? something like this picture 
how can i fix this problem ... i have tried to add
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER_SET utf8");
and
header("Content-Type: text/html; charset=UTF-8");
and the same result
Note:
i know mysql deprecated and will be removed im in progress to do that with mysqli thanks !
.. any help would be appreciated !
