This is a small (quick and dirty) tutorial. which by no means tends to be the only solution to handle this use case.

The case is: toggling a status-field (cck_table-field) status can be 0 or 1. Also the checkbox is replaced by image in front-end with html-typography (list-mode 2).

2 parts:

1. javascript / jQuery

2. php-server

Part 1.

=====

1a. add a class to your seblod-toggle-field. In this way we can identify and capture the clicked status with jQuery.

1b. add (code-pack) javascript field type which contains jQuery function (see code below) to handle the toggle (click) on image and to send AJAX-call to server.

Part 2.

=====

2a. In backend-seb-admin list-view use the html-typography (2) to change the seb-status-field to custom checkbox- image (see code below). You may use an image with “-1” or “-0” contained in the imag-name f.i. “my image-0.png” for statusfield-value 0 and “my image-1.png” for statusfield-value 1;

2b. create joomla-based php-page which will reflect toggle-action in database table. This page will include joomla default application-classes and joomla page-security (in header). Change the path to this page withinin the jQuery code.

Below you’ll find the example code and som images to clarify this solution.

===========================

html-code used in html-typography:

===========================

<a href='*value*' data-key="$cck->getValue('td_id')"><img src="/images/sebsys/icon-check-circel-*value*png" alt="wissel" title="wissel"></a>

===========================

JS-code in the js(code-pack)-field:

===========================

jQuery('a.sqwToggle_tdStatus').click(function (event) {

event.preventDefault();

var fout = 0;

// alert( $('img', this).attr('src'));

$.ajax({

url: '/sebdev/sebToggle_td_status.php', // php-page to call - put your path to file here

type: 'POST',

data: {dk: jQuery(this).attr('data-key')},

success: function(data) {

//alert("succes:"+data);

fout=5;

},

error: function(e) { // handle error your way

//called when there is an error

//console.log(e.message);

alert("error"+e);

fout=1;

}

});

//figure out current img-src and change 0 / 1 within

if(fout == 0){

// alert( "fout: " + fout + " -- " + $('img', this).attr('src'));

var cur_src = $('img', this).attr('src');

var new_src = '';

if(cur_src.indexOf("-0") == -1){

new_src = cur_src.replace("-1", "-0");

} else {

new_src = cur_src.replace("-0", "-1");

}

$('img', this).attr('src', new_src); // set new src-path to image

}

});

===========================

PHP-code used in joomla-php-page:

===========================

define('_JEXEC', 1);
// sent by 'post' with jQuery AJAX-call$dk = $_POST['dk'];
// include required frameworksif (stristr($_SERVER['SERVER_SOFTWARE'], 'win32' )){
define('JPATH_BASE', realpath(dirname(__FILE__).'\..' ));}else define('JPATH_BASE', realpath(dirname(__FILE__).'/..' ));
define('DS', DIRECTORY_SEPARATOR );
// including the main joomla filesrequire_once (JPATH_BASE.DS.'includes'.DS.'defines.php' );require_once (JPATH_BASE.DS.'includes'.DS.'framework.php' );

// Creating an app instance$app = JFactory::getApplication('site');
$app->initialise();
jimport('joomla.user.user' );
jimport('joomla.user.helper' );
$db =& JFactory::getDBO();$query = $db->getQuery(true);
// Fields to update - toggle field value.$fields = array($db->quoteName('td_status') . ' = ' . 'IF(td_status=1, 0, 1)');
// Conditions for which records should be updated.$conditions = array($db->quoteName('id') . ' = ' . $dk);
$query->update($db->quoteName('#__cck_store_form_trajectdeel'))->set($fields)->where($conditions);$db->setQuery($query);
// return value$retval = 0;$result = $db->execute();
if (!$result){$retval = 9;}
echo $retval;
?>