Greetings from Retirement-land!
Once again, I call upon those with greater expertise in jQuery/AJAX/Javascript for enlightenment. I'm learning, but "the road is long, with many a winding turn".
I have a jQuery CRUD table that I found online that our disc golf indoor putting league is using to keep track of weekly scores. Here's a screenshot:
The [Add Player] button adds a row at the bottom with all "text" input fields at the bottom. Editing is click the cell and modify.
Everything works flawlessly.
What I'd like to do is change Column 2 (League) from the standard "text" input to a "select" input that pulls its data from a very simple leagues table in the database. I'll create an admin interface for it later.
Pared down code is below. Full code is shown here:
Complete source if anyone wants to play with it:
It's the management panel of a little web app I'm working on to compute team handicaps.
Thanks in advance for any and all revelations. I've Googled and Binged to no avail.
-MD
index.php
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$sql = "SELECT * from pleague"; // table containing player data (id, player, league, week1, week2, etc.)
$row_product = $db_handle->runSelectQuery($sql);
$sql2 = "SELECT * from leagues"; // table containing leagues (id, name)
$row2 = $db_handle->runSelectQuery($sql2);
?>
<html>
<head>
<title>Putting League Inline Manager</title>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<script>
function createNew() {
$("#add-more").hide();
var data = '<tr class="table-row" id="new_row_ajax">' +
'<td contenteditable="true" id="txt_player" onBlur="addToHiddenField(this,\'player\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_league" onBlur="addToHiddenField(this,\'league\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_week1" onBlur="addToHiddenField(this,\'week1\')" onClick="editRow(this);"></td>' +
'<td><input type="hidden" id="player" /><input type="hidden" id="league" /><input type="hidden" id="week1" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +
'</tr>';
$("#table-body").append(data);
}
function cancelAdd() {
$("#add-more").show();
$("#new_row_ajax").remove();
}
function editRow(editableObj) {
$(editableObj).css("background","#FFF");
}
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
$.ajax({
url: "edit.php",
type: "POST",
data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
}
});
}
function addToDatabase() {
var player = $("#player").val();
var league = $("#league").val();
var week1 = $("#week1").val();
$("#confirmAdd").html('<img src="loaderIcon.gif" />');
$.ajax({
url: "add.php",
type: "POST",
data:'player='+player+'&league='+league+'&week1='+week1,
success: function(data){
$("#new_row_ajax").remove();
$("#add-more").show();
$("#table-body").append(data);
}
});
}
function addToHiddenField(addColumn,hiddenField) {
var columnValue = $(addColumn).text();
$("#"+hiddenField).val(columnValue);
}
function deleteRecord(id) {
if(confirm("Are you sure you want to delete this row?")) {
$.ajax({
url: "delete.php",
type: "POST",
data:'id='+id,
success: function(data){
$("#table-row-"+id).remove();
}
});
}
}
</script>
</head>
<body>
<div>
<h2>Putting League Inline Manager</h2>
<table class="tbl-qa" border="1">
<thead>
<tr>
<th class="table-header">Player</th>
<th class="table-header">League</th>
<th class="table-header">WK1</th>
. . .
<th class="table-header">ACTION</th>
</tr>
</thead>
<tbody id="table-body">
<?php
if(!empty($row_product)) {
foreach($row_product as $k=>$v) {
?>
<tr class="table-row" id="table-row-<?php echo $row_product[$k]["id"]; ?>">
<td contenteditable="true" onBlur="saveToDatabase(this,'player','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><b><?php echo $row_product[$k]["player"]; ?></b></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'league','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $row_product[$k]["league"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'week1','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $row_product[$k]["week1"]; ?></td>
. . .
<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $row_product[$k]["id"]; ?>);">Delete</a></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<div class="add-data-style" id="add-more" onClick="createNew();">ADD PLAYER</div>
</div>
</body>
</html>
add.php
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["player"])) {
$player = mysql_real_escape_string(strip_tags($_POST["player"]));
$league = mysql_real_escape_string(strip_tags($_POST["league"]));
$week1 = mysql_real_escape_string(strip_tags($_POST["week1"]));
$sql = "INSERT INTO pleague (player,league,week1) VALUES ('" . $player . "','" . $league . "','" . $week1 . "')";
$faq_id = $db_handle->executeInsert($sql);
if(!empty($faq_id)) {
$sql = "SELECT * from pleague WHERE id = '$faq_id' ";
$posts = $db_handle->runSelectQuery($sql);
}
?>
<tr class="table-row" id="table-row-<?php echo $posts[0]["id"]; ?>">
<td contenteditable="true" onBlur="saveToDatabase(this,'player','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["player"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'league','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["league"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'week1','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["week1"]; ?></td>
<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $posts[0]["id"]; ?>);">Delete</a></td>
</tr>
<?php } ?>
edit.php
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$result = mysql_query("UPDATE pleague set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE id=".$_POST["id"]);
?>