However, the challenge lies in needing to call this method each time a user presses the "run" button. The current code snippet only returns the query value during the page load and does not capture it for multiple queries executed by the user.
Is there any alternative approach to achieve this?
current code
import React, { useEffect } from 'react';
import Yasgui from '@triply/yasgui';
import '@triply/yasgui/build/yasgui.min.css';
function YasguiComponent() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://unpkg.com/@triply/yasgui/build/yasgui.min.js';
script.async = true;
script.onload = () => {
const yasgui = new Yasgui(document.getElementById('yasgui'), {
requestConfig: { endpoint: 'http://test/sparql' },
copyEndpointOnNewTab: false,
});
// console.log("loooooog"+yasgui.getTab().yasqe.getValue());
//});
// Get the element with the class 'yasqe_queryButton'
var yasqeQueryButton = document.getElementsByClassName(document.getElementById('yasgui').
getElementsByClassName('yasqe')[0].getElementsByClassName('CodeMirror')
[0].getElementsByClassName('yasqe_buttons')[0].getElementsByClassName('yasqe_queryButton'));
if (yasqeQueryButton) {
alert("New ");
yasqeQueryButton.onclick = null;
yasqeQueryButton.onclick = (function() {
console.log("Query"+yasgui.getTab().yasqe.getValue());
});
}
According to the API documentation, it is possible to retrieve the query value from the editor using the following method:
const queryValue = yasgui.getTab().yasqe.getValue();
However, the challenge lies in needing to call this method each time a user presses the "run" button. The current code snippet only returns the query value during the page load and does not capture it for multiple queries executed by the user.
Is there any alternative approach to achieve this? current code