Topic on Project:Support desk

I'm trying to add a button to wikieditor that executes an API call and places the returned string at the cursor.

I can add buttons fine using the below code example, but I'm struggling to replace "XXXXX" in with the result of my API call:

$.ajax({
    dataType: 'script',
    cache: true,
    url: 'https://meta.wikimedia.org/w/index.php?title=User:Krinkle/Scripts/InsertWikiEditorButton.js&action=raw&ctype=text/javascript'
    
}).then(function () {
    krInsertWikiEditorButton({
        id: 'mw-apiCall1',
        icon: '//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Gnome-face-monkey.svg/22px-Gnome-face-monkey.svg.png',
        label: 'Api Call 1',
        sampleText: 'XXXXX'
    });
});

The API call I'm looking to make is: /api.php?action=idprovider-increment

And its return value is of the format. { "id": "1" }

Anyone got any pointers as to how I can do this?

(I can't get my head round how to post code here without it coming out in an unreadable format like above). :/

You would probably have to do something roughly like:

$.ajax({
    dataType: 'script',
    cache: true,
    url: 'https://meta.wikimedia.org/w/index.php?title=User:Krinkle/Scripts/InsertWikiEditorButton.js&action=raw&ctype=text/javascript'
    }).then(function () {
    krInsertWikiEditorButton({
        id: 'mw-apiCall1',
        icon: '//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Gnome-face-monkey.svg/22px-Gnome-face-monkey.svg.png',
        label: 'Api Call 1',
        callback: function () { $.get( '/w/api.php?action=idprovider-increment&format=json' ).then( function( res ) { $('#wpTextbox1').textSelection('encapsulateSelection', { peri: JSON.stringify(res) } ); } ) }
    });
 });

Excellent, got this working now using...

/**
 * Extra buttons in toolbar
 * @stats [[File:Krinkle_InsertWikiEditorButton.js]]
 */
$.ajax({
    dataType: 'script',
    cache: true,
    url: 'https://meta.wikimedia.org/w/index.php?title=User:Krinkle/Scripts/InsertWikiEditorButton.js&action=raw&ctype=text/javascript'
    }).then(function () {
    krInsertWikiEditorButton({
        id: 'mw-apiCall1',
        icon: '//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Gnome-face-monkey.svg/22px-Gnome-face-monkey.svg.png',
        label: 'Api Call 1',
        callback: function () { $.get( 'api.php?action=idprovider-increment&prefix=TEST&padding=2&skipUniqueTest=true&format=json' ).then( function( res ) { $('#wpTextbox1').textSelection('encapsulateSelection', { peri: res.id } ); } ) }
    });
 });

@Bawolff Any idea how I would stop the inserted text being selected right after its been inserted. It would be better if the cursor just sat at the end of the inserted string, as it would be too easy to accidentally type over the inserted unique ID the way its going in at the moment.

You have to add selectPeri: false to the object returned by the callback.

e.g. callback: function () { $.get( 'api.php?action=idprovider-increment&prefix=TEST&padding=2&skipUniqueTest=true&format=json' ).then( function( res ) { $('#wpTextbox1').textSelection('encapsulateSelection', { peri: res.id, selectPeri: false } ); } ) }