The CMSB Cookbook

UPDATING A TABLE VALUE WITHOUT RELOADING A WEB PAGE USING AN AJAXURL - Dec 12th, 2018


I needed to accept or reject submitted entries into an art exhibition so that exhibition managers could see which
entries were going to be in the show and which were not. I also needed to send  acceptance/rejection emails to the
entrants automatically.

The problem was that there were a great many submissions and I didn't want to re-load the page each time, the way it
seemed to work when submitting a form to update the entrant's record.  This would have made it extremely hard for a
manager to keep track of which submission they were working on. 

One more piece of background and then on to the code.

I'm using info5 to indicate which submission images are accepted/rejected. Since I'm also using info5 for price values,
there's some code that strips out any existing alphabetical characters from the existing info5 value, and appends either
'keep' or 'remove' to the remaining numbers in the field.

To follow this recipe you'll need a milti-record editor (exhibition_submissions) with at least one multi-image upload
field (submission_images) with all 5 info fields.

Your application will probably be different but the concepts should translate easily.

First, on the page that displays all of the submitted images there are 2 small Ajax scripts that pass 2 variables
'recNum' and 'newValue'. One to mark a submission as 'keep' and the other to mark it as  'remove':

<script type = "text/javascript">
function keepSubmission(recNum, newValue ){
ajaxUrl = "keep2017.php?submit=1&recNum=" + escape(recNum)+"&newValue=" + escape(newValue);

$.ajax({
url: ajaxUrl,
}).done(function() {
//add code here if anything needs to happen after the ajax call
alert("Submission accepted");
});
}
</script>
<script type = "text/javascript">
function removeSubmission(recNum, newValueR ){
ajaxUrl = "remove2017.php?submit=1&recNum=" + escape(recNum)+"&newValueR=" + escape(newValueR);

$.ajax({
url: ajaxUrl,
}).done(function() {
//add code here if anything needs to happen after the ajax call
alert("Submission removed");
});
}
</script>

Then, in the foreach loop that dis[plays each submitted image, the code to remove any existing text in the info5 field:

<?php foreach($exhibition_submissionsRecords as $record) : ?>
<?php foreach ($record['submission_images'] as $upload): ?>
<?php // keep the price but replace any text with 'keep' ?>
<?php $keep = 'keep' ?>
<?php $oldValue = $upload['info5'] ?>
<?php $newValue = preg_replace('/[^0-9 .]/','', $oldValue) ?>
<?php $newValue = ($newValue. $keep) ?>
<?php // keep the price but replace any text with 'remove' ?>
<?php $remove = 'remove' ?>
<?php $oldValue = $upload['info5'] ?>
<?php $newValueR = preg_replace('/[^0-9 .]/','', $oldValue) ?>
<?php $newValueR = ($newValueR. $remove) ?>
<?php $recNum = $upload['num'] ?>

<a href="<?php echo $upload['urlPath'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo
($upload['thumbWidth2']/2) ?>" height="<?php echo ($upload['thumbHeight2']/2 )?>" alt="" /></a>

<div id='ajaxlink' onclick="keepSubmission(<?php echo "'$recNum', '$newValue'" ?>)">CLICK TO ACCEPT THIS
SUBMISSION</div>
<div id='ajaxlink' onclick="removeSubmission(<?php echo "'$recNum', '$newValueR'" ?>)">CLICK TO REMOVE
THIS SUBMISSION</div>

<?php if($upload['info1']):?>Title: <?php echo $upload['info1']?><?php else :?><span
style="color:#C30">No Title</span><?php endif ?>
<?php if($upload['info2']):?>Medium: <?php echo $upload['info2']?><?php else :?><span
style="color:#C30">No Medium</span><?php endif ?>
<?php if($upload['info3']):?>Dimensions: <?php echo $upload['info3']?><?php else :?><span
style="color:#C30">No Dimensions</span><?php endif ?>
<?php if($upload['info4']):?>Price: <?php echo $upload['info4']?><?php else :?><span
style="color:#C30">No Price</span><?php endif ?>

<?php endforeach ?>
<?php endforeach ?>

You may have noticed that the Ajax scripts have a url attached to each. These pages are where the actual database
updating occurs. Here's the code for those.

A page with the update code for 'keep' called keep2017.php:

<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/your_servre_path/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

$newValue = mysql_escape($_REQUEST['newValue']);
mysqlStrictMode(false);
$query = "UPDATE `{$TABLE_PREFIX}uploads` SET
info5 = '$newValue'
WHERE num = '".mysql_escape( $_REQUEST['recNum'] )."'";
mysql_query($query) or die("MySQL Error:\n". htmlspecialchars(mysql_error()) . "\n");
$userNum = mysql_insert_id();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex,nofollow" />
</head>
</body>
</html>

And a page with the update code for 'remove' called remove2017.php:

<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/your_servre_path/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

$newValueR = mysql_escape($_REQUEST['newValueR']);
mysqlStrictMode(false);
$query = "UPDATE `{$TABLE_PREFIX}uploads` SET
info5 = '$newValueR'
WHERE num = '".mysql_escape( $_REQUEST['recNum'] )."'";
mysql_query($query) or die("MySQL Error:\n". htmlspecialchars(mysql_error()) . "\n");
$userNum = mysql_insert_id();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex,nofollow" />
</head>
</body>
</html>

To allow the exhibition manager to see just those images that were accepted I set up keepviewer.php

With the following active code:

In the head:

<script type = "text/javascript">
function removeSubmission(recNum, newValue ){
ajaxUrl = "remove2017.php?submit=1&recNum=" + escape(recNum)+"&newValue=" + escape(newValue);

$.ajax({
url: ajaxUrl,
}).done(function() {
//add code here if anything needs to happen after the ajax call
alert("Submission Removed");
});
}
</script>

And in the body:

<?php foreach($exhibition_submissionsRecords as $record) : ?>
<?php foreach ($record['submission images'] as $upload): ?>
<?php if (strpos($upload['info5'], 'eep')) : ?>
<?php // keep the price but replace any text with 'remove' ?>
<?php $remove = 'remove' ?>
<?php $oldValue = $upload['info5'] ?>
<?php $newValueR = preg_replace('/[^0-9 .]/','', $oldValue) ?>
<?php $newValueR = ($newValueR. $remove) ?>
<?php $recNum = $upload['num'] ?>

followed by the code to display the images and info values

I also included ajax scripting on that page to allow for removal of the submission.

<div id='ajaxlink' onclick="removeSubmission(<?php echo "'$recNum', '$newValue'" ?>)">CLICK TO REMOVE SUBMISSION</div>

A few small changes will convert that to a remove viewer with scripting to allow the supmission to be re-accepted

*****************************************

Just for completeness, here's the code for remove.php with only one variable 'recNum' (I was not using info5 for
anything so I could just change it from '0' to '1' and back again.)

<?php mysqlStrictMode(false);
$query = "UPDATE `{$TABLE_PREFIX}uploads` SET
info5 = '1'
WHERE num = '".mysql_escape( $_REQUEST['recNum'] )."'";
mysql_query($query) or die("MySQL Error:\n". htmlspecialchars(mysql_error()) . "\n");
$userNum = mysql_insert_id();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex,nofollow" />
</head>
</body>
</html>

And the changed code in the ajax script:

<script type = "text/javascript">
function removeSubmission( recordNum ) {
ajaxUrl = "remove.php?submit=1&recNum=" + escape(recordNum);

$.ajax({
url: ajaxUrl,
}).done(function() {
//add code here if anything needs to happen after the ajax call
alert("Submission Removed");
});
}
</script>

Finally, to allow displaying the alert on the page, add the following to the head:

<script type="text/javascript">

</script>

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.