Pass a value in editor.dependent using ajax call

milap

Hello,
I am trying to build an input field counter
It would count proportional fonts pixel width at some predefined font size.

I know that I can use code similar to that:

    editor.dependent(txt', function ( val, data, callback, e ){
        return { messages: { txt: editor.field('txt').val().length } };
    },{
        event: 'keyup change'
    });

But in my case since I have to count proportional fonts so I need to use php function imagettfbbox() to calculate the value (another benefit is that *.ttf font file can be stored on the web-server)

That's why I have to make an ajax call that will be executed by keyup change event

In that case code would be based on this example:

    editor.dependent( 'txt', function ( val, data, callback, e ) {
        $.ajax( {
            url: './ajax/font-calc.php',
            dataType: 'json',
            success: function ( json ) {
                callback( json );
            }
        } );
    }, {
        event: 'keyup change'
    } );

My question is how can I pass a field value via ajax call in editor.dependent?
From network activity I can see that ajax call is made every field value change - this is expected and desired in my case - but I dont know how to pass a value...

My only idea is to encode text for input field in base64 and pass value through GET, like tihs:

url: './ajax/font-calc.php?val=UGxlZWVhc2UsIG5vIGh1cnQsIG5vIGtpbGwuIEtlZXAgYWxpdmUgYW5kIG5leHQgdGltZSBnb29kIGJyaW5nIHRvIHlvdS4=',

So in that case code like this:

    editor.dependent( 'txt', function ( val, data, callback, e ) {
        $.ajax( {
            url: './ajax/update-position.php?val='+btoa(editor.field('txt').val()),
            dataType: 'json',
            success: function ( json ) {
                callback( json );
            }
        } );
    }, {
        event: 'keyup change'
    } );

It works but for sure there are better methods...

milap

I have figured out how to do that in other way:

JS:

    editor.dependent( 'txt', function ( val, data, callback, e ) {
        $.ajax({
            type:'post',
            url:'ajax/pix-num.php',
            data: {pix:editor.field('txt').val()},
            //dataType: "json",
            success: function(response) {
                console.log('SUCCESS BLOCK');
                console.log(response);
            },
            error: function(response) {
                console.log('ERROR BLOCK');
                console.log(response);
            }
        });
    }, {
        event: 'keyup change'
    } );

PHP:

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

if($_POST) {
    $data = $_POST['pix'];
    $font = "./HLCR.ttf";
    $pix = imagettfbbox(34, 0, $font, $data);
    echo $pix[2];
}

Data are properly send to console (I still need to put them in message field)

The problem now is that when I want to update the field I am getting warning:
dataTables.editor.min.js:51 Field is still processing For more information, please refer to https://datatables.net/tn/16
and data are not updated in db (editor window stays open)

How to stop processing?

milap

Ok, sometimes it is worth for fallow a link, even from an error msg

dataTables.editor.min.js:51 Field is still processing For more information, please refer to https://datatables.net/tn/16

Solution:

    editor.dependent( 'txt', function ( val, data, callback, e ) {
        $.ajax({
            type:'post',
            url:'ajax/pix-num.php',
            data: {pix:editor.field('txt').val()},
            //dataType: "json",
            success: function(response) {
                console.log('SUCCESS BLOCK');
                console.log(response);
            },
            error: function(response) {
                console.log('ERROR BLOCK');
                console.log(response);
            }
        });
        return {messages: { txt: "test message" }}; // <----- SOLUTION return{};
    }, {
        event: 'keyup change'
    } );

Ok so now 1st problem, how to stop that ajax execution when I am using rowReorder plugin?
I am getting error response: console.log('ERROR BLOCK'); while changing order of rows, probably because there is no access to that field

2nd problem:
How Can I put a value from ajax call to return {messages: { txt: response }}; that code ofc is wrong because response variable exists only inside ajax call

milap

Since ajax is asynchronous I probably should make a callback, like:

            success: function(response) {
                console.log('SUCCESS BLOCK');
                console.log(response);
                callback(response);
            },

but how to grab it outside ajax call?

milap

Ok, my close to final code is like:

    editor.dependent( 'txt', function ( val, data, callback, e ) {
        let resp = $.ajax({
            type: 'post',
            url: 'ajax/pix-num.php',
            //async: false,
            data: {pix: editor.field('txt').val()},
            //dataType: "json",
            success: function (response) {
                console.log('SUCCESS BLOCK');
                console.log(response);
                callback(response);
            },
            error: function (response) {
                console.log('ERROR BLOCK');
                console.log(response);
                callback(response);
            }
        });
        console.log(resp);
        return {messages: { txt: "Pixel length: " + resp.responseText }};
    }, {
        event: 'keyup change'
    } );

...and I have no idea why resp.responseText returns undefined
From console.log(resp); I can see that I have properly received response from ajax call and forward it to console. There is an object with element responseText that contains the value I am willing to output under input field but for some reason I am unable to grab it simply by resp.responseText...

milap

Ok, found final solution:

editor.dependent( 'txt', function ( val, data, callback, e ) {
        $.ajax({
            type: 'post',
            url: 'ajax/pix-num.php',
            data: {pix: editor.field('txt').val()},
            success: function (response) {
                callback(response);
            },
            error: function (response) {
                console.log('ERROR BLOCK');
                console.log(response);
                callback(response);
            }
        }).done(function(data){
            editor.message( 'txt', 'Number of pixels: ' + data );
        });
        return {};
    }, {
        event: 'keyup change'
    } );

rowReordering problem that I have mentioned I have fixed by returning zero if there is no $_POST

if($_POST) {
    $data = $_POST['pix'];
    $font = "./HLCR.ttf";
    $pix = imagettfbbox(34, 0, $font, $data);
    echo $pix[2];
}else{
    echo 0;
}

So all problems fixed
Sorry for talking to my self

colin

Nice, glad we could help

Colin