jEditable response handling issues

Question

I have a bunch of html that looks like this - only showing one here as it's all that's needed:

<tr>
 <td>Name of Organisation:</td>
 <td class="edtext" id="organisation"><?=$aRes[0]['organisation']?></td>
</tr>

In the head of the page I have this:

$(function() {
    $(".edtext").editable("./editHandler/WRITE.update.php?uaID=<?=$uaID?>", {
        event       : 'dblclick',
        dataType    : "json",
        placeholder : '',
        indicator   : 'Saving...',
        cssclass    : 'editable',
        submit      : 'Save',
        cancel      : 'Cancel',
    });
});

I can successfully send stuff into the database by double clicking and then editing the td field that I have given the id="organisation" to, just fine.

In the backend bit of php that deals with this, directly after the DB function that works fine, I have:

header('Content-type: application/json');

(snip database update code - it works fine)

$report = array();
$report['organisation'] = $userInput;
$report['result'] = "&#10004;";
echo json_encode($report);

The same php has it's header set to:

So once the text that has been typed and saved into the editable table cell is entered into the database, the above sends back to the frontend ('Hello World' being the example text entered):

{"organisation":"Hello World","result":"&#10004;"}

Then what displays in the td cell that the edit took place in is this:

{"organisation":"Hello World","result":"✔"}

Which is not what is wanted. The tick is what ✔ is supposed to be, but what I mean is I want the "Hello World" part to show (without the quotes of course) and the result to be displayed in a span or div with the id="result", elsewhere on the page.

I've read that I need to use the jEditable callback option however I cannot find any example of how to do this. I am not very confident with JS and would appreciate someone shoving me in the correct direction please. Functional examples welcome.

By the way I need to be able to use this bit of JS for multiple text fields and not have a separate JS entry for each data cell that requires editing access.

Cassandra Cassandra · Accepted Answer · 2016-09-01T04:48:13

I fixed the problem by adding:

        callback    : function() {
            location.reload();
        },

into the:

    $(".edtext").editable("./editHandler/WRITE.update.php?uaID=<?=$uaID?>", {
        event       : 'dblclick',
        dataType    : "json",
        placeholder : '',
        indicator   : 'Saving...',
        cssclass    : 'editable',
        submit      : 'Save',
        cancel      : 'Cancel',
    });
});

section so that the end result was:

$(".edtext").editable("./editHandler/WRITE.<?=$appKey?>.php?uaID=<?=$uaID?>", {
    callback    : function() {
        location.reload();
    },
    event       : 'dblclick',
    placeholder : '',
    indicator   : 'Saving...',
    cssclass    : 'editable',
    submit      : 'Save',
    cancel      : 'Cancel',
});

Because the rubbish looking output is not coming from what is actually saved in the DB, the fresh load after successful post means the page appears cleanly as desired.

It's not a wonderful work around but it works and does not rely on nasty hacks.

jEditable response handling issues

1 Answers