Description of the problem:
A couple of months ago I made an experiment using PsychoJS in which a Dialogue Box appear when people clicked on some shapes. In the Dialogue Box, people had to fill in a couple of fields and when the “Ok” button was pressed the typed text appeared over the shape that they had clicked on.
It took me a lot of effort to make. I had to go into the source code, figure out how the Dialogue Box elements behaved to be able to sue them, and even use some workaround using jQueries. I was very proud of it…
But now the experiment is not working anymore 
Something happened that now the dialogue boxes are not working (I guess a modification in the source code?).
The first problem that sowed up was that the code below now throws an error mentioning that “destroyDialog is not a function” (which is odd because in the source code of PsychoJS it is listed as a function: JSDoc: Source: core/GUI.js). Two months ago, I found out that I needed to use this line of code to destroy an already created dialogue box before creating a new one.
psychoJS.gui.destroyDialog();
I tried to circumvent this problem by manually calling the lines inside such function in the source code, and log a message to check that it worked correctly (see code below). However, the message does not appear in the console. Which indicates that the condition is not met, but still the new dialogue boxes are created correctly. I guess I do not need to destroy them anymore…
if ($("#expDialog").length) {
$("#expDialog").dialog("destroy");
console.log("Old Dialogue Box ----- Destroyed");
}
In the past, I used the code below to get and save, in a new variable, the value that people typed in the input fields when clicking on the “Ok” button. For some reason now it does not work anymore. Now returns a NULL value.
$("#buttonOk").click( function() {
var input1 = document.getElementById("Animal_id");
var input2 = document.getElementById("Order_id");
response1 = input1.value.trim();
response2 = input2.value.trim();
});
I tried logging in the console the input fields and the dialogue box by their IDs: document.getElementById(“expDialog”) but again I got a NULL value for all of them. I even double checked that the IDs that I looked for were the ones being processed in the HTML inspector. Below is the code that I am have now for creating, running and saving the input data of dialogue boxes.
//Log the old dialoge box
console.log(document.getElementById("expDialog"));
//Create a new dialoge box
let boxTitle = 'Type your response here';
let boxFields = {"Animal": textAnimal, "Order": textOrder};
var myBox = psychoJS.gui.DlgFromDict({
title: boxTitle,
dictionary: boxFields
});
//Run the new dialogue box
myBox();
//"OK" button function
$("#buttonOk").click( function() {
console.log(document.getElementById("Animal_id"));
console.log(document.getElementById("Order_id"));
console.log(document.getElementById("expDialog"));
var input1 = document.getElementById("Animal_id");
var input2 = document.getElementById("Order_id");
});
What’s going on with the Dialogue Boxes?? How can I retrieve now the typed values in the input fields of the Dialogue Boxes??? I feel quite puzzled… 
Any ideas? Can anyone help me? I need to solve this problem to be able to test participants. Namely, how to save the input data of the dialogue boxes in a new variable.
Thank you in advance!
Miguel