ok thank you, i will be interested to see the ajax solution for sure.
OK, this is how I did it. Notice the extra hidden field.. sanity checker for me, was easier than actually figuring out where the correct id was.
Basically:
Create the input field (you would have this for your field anyway).
Add a javascript listener for onChange so that when you enter data, it sends the request.
Add an AJAX class to actually perform the ServerSide actions.
Add an entry into the AJAX router to send the request to our class.
Check the return value and update the page accordingly, in this case, briefly display a little "Success" icon.
Edit include/staff/ticket-view.inc.php, add somewhere .. :-) Your choice.
<?php //Add the fields you want, eg:
$on = Format:($ticket->getOrderNumber());
?>
<tr> <input type="hidden" id="ticketid" value="<?php echo $ticket->getId(); ?>" />
<th width="100">Order Number: </th>
<td><input type="textfield" id="ajaxOrderNumberInputField" value="<?php echo $on ?>" />
<img src="/support/assets/default/images/icons/ok.png" style="display;" id="orderNumberStatusImage"/>
<img src="/support/assets/default/images/icons/error.png" style="display;" id="orderNumberErrorImage"/>
</td>
</tr>
Add to scp/js/scp.js (inside $(document).ready(function() {, mine is after $('form select#cannedResp').change() {...}
var ticketID = $('#ticketid').val();
//repeat this type of function for each input field required, it simply sends the function name and value.
$('#ajaxInvoiceNumberInputField').change(function() {
modifyTicketViaAJAX('invoiceNumber', $(this).val());
});
function modifyTicketViaAJAX(functionName, value) {
console.log('modifyTicketViaAJAX called: ticket_id = ' + ticketID + ', function = ' + functionName + ' value = ' + value);
$.ajax({
type: "POST",
url: 'ajax.php/custom/' + ticketID + '/' + functionName + '/' + value,
dataType: 'json',
cache: false,
success: function(ob) {
$('#' + functionName + 'ErrorImage').css('display', 'none');
$('#' + functionName + 'StatusImage').css('display', 'inline').delay(3000).fadeOut("slow");
console.log('AJAX Success!');
}})
.done(function() {
})
.fail(function() {
alert("DOH!");
console.log("AJAX Failure. ");
$('#' + functionName + 'ErrorImage').css('display', 'inline').delay(6000).fadeOut("slow");
});
}
Create a custom AJAX class, include/ajax.custom.php (name is important, part of router below)
<?php
if (!defined('INCLUDE_DIR'))
die('403');
include_once(INCLUDE_DIR . 'class.ticket.php');
class CUSTOMAjaxAPI extends AjaxController {
/** Exposed function, duplicate for each required field */
function addInvoiceNumber($id, $n) {
// perform server-side sanity checking here..
$this->updateTicket($id, 'invNo', $n);
}
function updateTicket($id, $field, $value) {
if (!isset($id))
Http:(400, 'Ticket argument is required');
error_log("Attempting to update ticket $id with $field = '$value'");
$sql = 'UPDATE ' . TICKET_TABLE . " SET $field = '$value'"
. ' WHERE ticket_id = ' . $id
. ' LIMIT 1';
$res = db_query($sql);
if ($res) {
// error_log("Success!");
Http:(200, '');
} else {
// error_log("Failure.. :-(");
Http:(500, 'Failed to update ticket');
}
}
}
Edit scp/ajax.php (find the top line and add after)
The current regex will match almost any input.. customize as required.
url_post('^/upgrader', array('ajax.upgrader.php', 'upgrade')),
/* Custom Ajax Functions,
* specify the request type, url_post
* Use regex to select the data, they become variables (\d+) = ticketId
* Specify the file and class, then choose the function, variables passed to this function.
*/
url_post('^/custom/(\d+)/orderNumber/(.*)$', array('ajax.custom.php', 'addOrderNumber'))
If you are adding more than a few.. then the router line should be modified to allow passing the function name as well, something like:
url_post('^/custom/(\d+)/()/(.*)$', array('ajax.custom.php', 'updateTicket'))
Then adjust your class to accept the function name as text, like updateTicket, or simply pass straight to updateTicket etc..