Skip to content

Instantly share code, notes, and snippets.

@schmunk42

schmunk42/button-callback.html

Created December 5, 2023 11:37
Show Gist options
  • Save schmunk42/83c422a05e5f79c158121fb9ed847540 to your computer and use it in GitHub Desktop.
Save schmunk42/83c422a05e5f79c158121fb9ed847540 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
button-callback.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Button Callbacks</title>
<script src="../../dist/jsoneditor.js"></script>
</head>
<body>
<textarea class="value" cols="30" rows="10"></textarea>
<button class='get-value'>Get Value</button>
<div class='container'></div>
<script>
var container = document.querySelector('.container');
var value = document.querySelector('.value');
JSONEditor.defaults.callbacks = {
"button" : {
"button1CB" : function(jseditor,e) {
value.value = 'button1CB';
let newval = {
...jseditor.jsoneditor.getValue(),
...{'textinput': Math.random()}
};
jseditor.jsoneditor.setValue(newval);
console.log('button1CB', jseditor.jsoneditor.getValue());
},
"button2CB" : function(jseditor,e) {
value.value = 'button2CB';
console.log('button2CB', jseditor.jsoneditor.getValue());
}
}
}
var schema = {
"type": "object",
"title": "button2",
"required": [
"textinput"
],
"properties": {
"textinput": {
"title": "Text input",
"type": "string",
"minLength": 2
},
"textinput2": {
"title": "Text input 2",
"type": "string",
"minLength": 1
},
"button1": {
"title": "Button 1",
"format": "button",
"options": {
"button": {
"action": "button1CB"
}
}
},
"button2": {
"title": "Button 2",
"format": "button",
"options": {
"button": {
"action": "button2CB",
"validated": true
}
}
}
}
};
var editor = new JSONEditor(container, {
schema: schema
});
document.querySelector('.get-value').addEventListener('click', function () {
value.value = JSON.stringify(editor.getValue());
console.log(editor.getValue());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment