Pass a value in editor.dependent using ajax call

Pass a value in editor.dependent using ajax call

milapmilap Posts: 40Questions: 13Answers: 2
edited July 2 in General

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...

This question has an accepted answers - jump to answer

Answers

  • milapmilap Posts: 40Questions: 13Answers: 2
    edited July 3

    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?

  • milapmilap Posts: 40Questions: 13Answers: 2
    edited July 3

    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

  • milapmilap Posts: 40Questions: 13Answers: 2

    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?

  • milapmilap Posts: 40Questions: 13Answers: 2
    edited July 3

    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...

  • milapmilap Posts: 40Questions: 13Answers: 2
    edited July 3

    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 :|

  • colincolin Posts: 12,608Questions: 0Answers: 2,154
    Answer ✓

    Nice, glad we could help ;)

    Colin

Sign In or Register to comment.