Oneditsave not Saving Field

[Flachmann]

Hi, in addition to Fetch Backend Data I got another problem. I guess I'm simply doing this wrong. But I simply can't store the fetched data in the node.

I have an httpAdmin.get('/environ-val/:key', ...) delivering my data. It is called in oneditsave() by calling a global function returning a deferrer. This way the await is realized.

Here're my code extracts:

defaults: {
	// ...
	key: { value: '' }, 
	envValue: { value: '' }
},

oneditsave: function () {
	// ...
	getEnvironVal(this.key).then(function (ret) {
		console.log(ret);  // this works, ret is filled correctly!
		$('#node-input-envValue').val(ret);
	});
	// ...
}

<div class="form-row">
	<!-- ... -->
	<input type="hidden" id="node-input-envValue">
</div>

getEnvironVal() is a global function to fetch the data:

function getEnvironVal(val) {
	const def = $.Deferred();

	$.getJSON('/environ-val/' + val)
		.done(function (result) {
			def.resolve(result.value);
		}).fail(function () {
			def.resolve('');
		});

	return def;
}

I verified:

• the function after .then in oneditsave gets executed and contains the correct data! This is great! - result.value is just a single string.
• I made node-input-envValue visible (type="text"). When OKing the dialog I can see, that the oneditsave event fills the field right before closing the dialog.

However, after this field envValue is still empty. The node doesn't get the "changed" marker. The change to node-input-envValue is ignored. I also tried to simply use this.envValue, which should work either.

Maybe I have a conceptional misunderstanding here.

[ralphwetzel]

@Flachmann

oneditsave: function () {
	// ...
	getEnvironVal(this.key).then(function (ret) {
		console.log(ret);  // this works, ret is filled correctly!
		$('#node-input-envValue').val(ret);
	});
	// ...
}

The thenable runs async and will be executed after oneditsave completed. The only way to pass ret into the node at that stage is by accessing the properties of its config. this yet may be undefined already. Have you tried to do something like...

oneditsave: function () {
	// ...
	let node = this;
	getEnvironVal(node.key).then(function (ret) { // not necessary to use node here ...
		console.log(ret);

		console.log(this);  // to test the assumption for "this"
		console.log(node);

		node.envValue = ret; // ... but here it is necessary!
	});
	// ...
}

[Flachmann]

(sorry, deleted my previous post, it was wrong and I don't want to leave it)

Ralph, that was it. Very cool! Thank you once more! I think I finally owe you a .

[knolleary]

If you modify node properties asynchronously after returning from oneditsave, then your changes won't be reflected in the edit history and there could be side effects.

Is there a reason you need to do it this way? If you have the key, could the node runtime lookup whatever value you need when it starts, rather than trying to do it at edit time?

[Flachmann]

I know. In my special case I offer the user to select an environment value, which then, on save, changes another value. I understand, that this is not the very "typical" way.

This topic is a little be tricky, especially as I'm not the world biggest developer. Thanks again to you and Ralph for your extraordinary help!

[marcus-j-davies]

@Flachmann just a little thing to watch

@Flachmann

$.getJSON('/environ-val/' + val)
		.done(function (result) {
			def.resolve(result.value);
		}).fail(function () {
			def.resolve('');
		});

I would remove the slash / at the start

If a user has set httpAdminRoot to move the editor to a different path, you will get problems assuming the editor is at /.

its safer to do:

$.getJSON(`environ-val/${val}`)
		.done(function (result) {
			def.resolve(result.value);
		}).fail(function () {
			def.resolve('');
		});

[Flachmann]

Hi Marcus!

Thank you. Good comment!