ct4.us

Custom Tables includes a lightweight JavaScript API (CTEditHelper) for dynamic manipulation of records directly from the frontend or custom layouts. All methods support AJAX functionality, handle input sanitization, and integrate seamlessly with the Joomla backend.

Example Usage: #

<button onClick="SaveMe();" class="btn">Save Me</button>

JavaScript (in JavaScript Layout tab): #

function SaveMe() {
    // Save a record with ID 36
    CTEditHelper.saveRecord({ 'name': 'Ivan', 'email': 'info@ct4.us' }, 36);

    // Reload the table row with ID 36
    CTEditHelper.reloadRecord(36);
}

CTEditHelper Methods #

Create a new record. #

CTEditHelper.addRecord(fieldsAndValues, successCallback, errorCallback, url, fieldPrefix)

Parameters:

• fieldsAndValues (object): Field-value pairs (e.g., { 'name': 'Ivan', 'email': 'info@ct4.us' })
• successCallback (function, optional): Callback to execute on success. Receives the response data.
• errorCallback (function, optional): Callback to execute on failure. Receives the error data.
• url (string, optional): URL of a relevant menu item (Details/Edit Form). Defaults to the current page.
• fieldPrefix (string, optional): Prefix for MySQL fields (es_, ct_, etc.).

Example:

CTEditHelper.addRecord({ 'name': 'Anna', 'email': 'anna@example.com' },
function(data) { console.log("Success:", data); },
function(error) { console.error("Error:", error); }
);

Save (edit) an existing record. #

CTEditHelper.saveRecord(fieldsAndValues, id, successCallback, errorCallback, url, fieldPrefix)

Parameters:

• fieldsAndValues (object): Field-value pairs.
• id (number): Record ID to update.
• Remaining parameters are same as addRecord.

Example:

CTEditHelper.saveRecord({ 'status': 'active' }, 42);

Publish / Unpublish a record. #

CTEditHelper.publishRecord(id, successCallback, errorCallback, url)

CTEditHelper.unpublishRecord(id, successCallback, errorCallback, url)

Example:

CTEditHelper.publishRecord(42, function() {
alert("Record published!");
});

Refresh a record. #

CTEditHelper.refreshRecord(id, successCallback, errorCallback, url)

Example:

CTEditHelper.publishRecord(42, function() {
alert("Record published!");
});

Deletes a record. #

CTEditHelper.deleteRecord(id, successCallback, errorCallback, url)

Example:

if(confirm("Are you sure you want to delete this?")) {
CTEditHelper.deleteRecord(42, function() {
alert("Deleted!");
});
}

Duplicate a record by ID. #

CTEditHelper.copyRecord(id, successCallback, errorCallback, url)

Example:

CTEditHelper.copyRecord(42, function(newRecord) {
console.log("Copied to new ID:", newRecord.id);
});

Reload the display for a specific record (usually a table row), useful for inline updates. #

CTEditHelper.reloadRecord(id, successCallback, errorCallback, url)

Example:

CTEditHelper.reloadRecord(42);

Load record. #

CTEditHelper.loadRecord(id, successCallback, errorCallback, url)

Loads a detailed view of a record by its ID using the selected Details Page layout, as configured in the same menu item that rendered the current page. This method fetches the full HTML view of the record asynchronously.

• id: The ID of the record you want to load.
• successCallback: A function that will be called when the record is successfully loaded. The response data will include the html key with the rendered detail view.
• errorCallback (optional): A function that will be called if there is an error during the request.
• url (optional): Override the default URL to load the record from a different endpoint.

Example:

CTEditHelper.loadRecord(42, function(data) {
    alert(data['html']); // Show the rendered HTML of the record
}, function(error) {
    console.error("Failed to load record:", error);
});

You can insert the data['html'] into the DOM if needed, for example:

document.getElementById('record-container').innerHTML = data['html'];

//If the detailed page layout is in JSON format then:

document.getElementById('record-container').innerHTML = data['data']['color']; //where 'color' is the field name as an example.

Load Record leyout. #

CTEditHelper.loadRecordLayout(listing_id, layout, successCallback, errorCallback)

• id: The ID of the record you want to load.
• layout: The name of the layout to use (e.g., "ClientDetails", "DogItem", or your own custom layout name).
• successCallback: A function that will be called when the record is successfully loaded. The response data will include the html key with the rendered detail view.
• errorCallback (optional): A function that will be called if there is an error during the request.
• url (optional): Override the default URL to load the record from a different endpoint.

Example:

CTEditHelper.loadRecordLayout(42, 'ClientDetails', function(data) {
    document.getElementById('record-container').innerHTML = data['html'];
}, function(error) {
    console.error("Error loading record layout:", error);
});

Security & Validation #

All inputs are automatically sanitized and validated by the backend. Invalid or unauthorized operations will trigger the errorCallback with useful feedback.

Notes #

You can call these methods from Layout JavaScript tabs.

Works best with Custom Tables list views, record details pages, and inline editing layouts.

CTEditHelper object is available on every Custom Tables view or module.