Update fields without refresh using AJAX in ProcFu

This guide explains how to update a field without refreshing the page using ProcFu's AJAX script. We'll work with a multiline text field called "Description" in a detail screen, making it read-only and adding functionality to append new comments.

Step 1: Setting Up the Variable

In the before-render event of the screen, capture the current item's ID and assign it to a variable:

my_variables["item_id"] = current_item["item_id"];

Step 2: Make the Field Read-Only

Use the on-render event to disable editing for the "Description" field:

$("div.row[data-field=description]").find("div.pf-selector").removeAttr("onclick");

Step 3: Adding a New Input Field and Button

Add a text field and a button below the "Description" field for appending new comments:

const newField = `
    <div class="pf-form-row row">
        <div class="col-md-3 col-sm-12">
            <label class="pf-label" for="new-description">New Description</label>
        </div>
        <div class="col-md-9 col-sm-12">
            <textarea id="new_description" name="new_description" class="form-control" data-field="new_description"></textarea>
        </div>
    </div>
    <button id="updatedText">Update</button>
`;
$("div[data-field='description']").after(newField);

Step 4: Handling the Button Click

Define a function to make an AJAX call when the button is clicked:

function successFunc(data) {
    $('[data-field="new_description"]').val("");
    $('textarea[name="description"]').prev('div').html(data[0].value);
    $('textarea[name="description"]').val(data[0].value);
}

function errFunc() {
    alert("Error");
}

$('#updatedText').click(function () {
    var data = {
        "item_id": my_variables["item_id"],
        "field_id": 1258963658 //Replace with the field id of the description field.,
        "text": $('[data-field="new_description"]').val()
    };
    PfJs.ajaxCall("ajax-update?", data, successFunc, errFunc);
});
        

Step 5: Backend AJAX Screen

Create a plain text backend screen named ajax-update. Extract the data object from URL parameters and update the field value:

item_id = url_parameters["item_id"];
field_id = url_parameters["field_id"];

original_value = podio_item_field_get(item_id, field_id, 1);

if (original_value[0]["value"] != null) {
    $date = date('d/m/Y');
    text = original_value[0]["value"] + "<p>" + $date + ": " + url_parameters["text"] + "</p>";
} else {
    text = "<p>" + url_parameters["text"] + "</p>";
}

podio_item_fields_update(item_id, {"description": text}, 0, 0);

print podio_item_field_get(item_id, field_id, 1);
        

Explanation:

• Retrieve Current Value: Use podio_item_field_get to get the current field value.
• Update Value: Append the new text to the existing value, or create a new paragraph if the field is empty.
• Return Updated Value: Print the updated field value to be used in the success function.