Optimize data storage with javascript on Otree

Question

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success.

Here's the first code snippet:

function myFunction() {
    var n = Date.now();
    document.getElementById("demo").innerHTML = n;
}

document.getElementById('n').value;

I inserted the following code into my HTML:

<p style="text-align: center;"><button class="btn btn-primary btn-large" onclick="myFunction()"  name="offer_accepted" value="True">&nbsp;A</button> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn btn-primary btn-large"  onclick="myFunction()" name="offer_accepted" value="False">B</button></p>

And here's the second code snippet:

function record_current_time(){
   var current_time = new Date();
   current_time = current_time.getTime()
   document.getElementById("id_currentTime").setAttribute("value", current_time)
}

window.onload = record_current_time;

Incorporated this code in my HTML:

<input type="hidden" name="currentTime" id="id_currentTime"/>

Unfortunately, despite trying both approaches, I'm not seeing any data being saved in my database.

If anyone has any suggestions or can offer assistance, I would greatly appreciate it.

javascript html otree

Answer 1

Answer №1

Unfortunately, the initial code provided won't function properly due to a couple of issues:

The ID being used, "demo", does not exist within the document.
By replacing '.innerHTML' with '.value', you can make the code work as intended. For further insights into this topic, check out the discussion here.

In your second attempt, this revised command will successfully execute:

window.onload = function() {
    record_present_time();
}

An alternative approach that functions well with the script placed at the top of the page is as follows:

$(document).ready(function(){
        function record_present_time(){
           var current_time = new Date();
           current_time = current_time.getTime();
           document.getElementById('id_currentTime').value = current_time;
        }

        record_present_time();
});

Alternatively, moving the script to the bottom of the page allows for all elements to be fully loaded when the scripts are executed.

Answer 2

Unfortunately, the initial code provided won't function properly due to a couple of issues:

The ID being used, "demo", does not exist within the document.
By replacing '.innerHTML' with '.value', you can make the code work as intended. For further insights into this topic, check out the discussion here.

In your second attempt, this revised command will successfully execute:

window.onload = function() {
    record_present_time();
}

An alternative approach that functions well with the script placed at the top of the page is as follows:

$(document).ready(function(){
        function record_present_time(){
           var current_time = new Date();
           current_time = current_time.getTime();
           document.getElementById('id_currentTime').value = current_time;
        }

        record_present_time();
});

Alternatively, moving the script to the bottom of the page allows for all elements to be fully loaded when the scripts are executed.

Optimize data storage with javascript on Otree

Answer №1

Similar questions

Inject Angularjs Controller into Module Once DOM is Initialized: Tips and Tricks

What is the best way to access a reference to the xgrid component in @material-ui?

Is the ng-style not displaying the background image with the interpolated value?

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

Set up global variables for components to access

Validation does not occur when the submit button has an ng-click event attached to it

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

Are desktop values taking precedence over the mobile media query?

Refresh a TextBox using an Ajax Response

What is the best way to align this image in the center?

PHP encountering a bad escaped character while parsing JSON using JSON.parse

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an

Converting JSON-style data into a string with the power of node mysql

Discover the process of attaching an event to the keyboard display within a Cordova application

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

I am trying to move to a different page, but for some reason the router.navigate function is not functioning within the subscribe

Vue.js - The dissonance between data model and displayed output

What is the best way to define a variable that captures and logs the values from multiple input variables?

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?