oTree Forum >
How to place codes in the <head></head> section of the page
#1
by
Susan
Hi, everyone I am trying to get the IP address of the participants, and I came across the solution in https://groups.google.com/g/otree/c/oHUdBBgnRHA. However, this solution requires placing the code <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> inside the <head></head> section of the page. I tried the codes in the attached figure but get errors like TemplateSyntaxError: All content must be inside a block tag (line 3, in "<head>"). How can I manage this?
#2
by
Chris_oTree
You can put that tag inside the regular content block. It probably doesn’t need to go in the head.
#3
by
Susan
Thank you. I tried it (please see the figure attached) but cannot receive anything about the participant's IP address. The variable getip has no value.
#4
by
Chris_oTree
Is getip in your form_fields? I also recommend to use your browser’s javascript console and console.log in your javascript to see what is happening. Is the JSON call producing any errors, is it writing to the hidden field properly, etc. try just writing some bogus data to the hidden field instead of doing the HTTP call and see if that works.
#5
by
Susan
The variable getip is in the form_fields. I tried the following codes and "aaa" was smoothly written into getip.
<script>
const getIp = document.getElementById("getIp");
getIp.addEventListener('click', function() {
document.getElementById('getip').value = "aaa";
});
</script>
I also tried console.log like the following codes and could only see 'stepone' printed in the console.
<script>
const getIp = document.getElementById("getIp");
getIp.addEventListener('click', function() {
var str1 = 'stepone';
console.log(str1);
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var str2 = 'steptwo';
console.log(str2);
document.getElementById('getip').value = JSON.stringify(data, null, 2);
});
});
</script>
#6
by
Chris_oTree
That inner function is the success handler, so it seems that HTTP request is not succeeding. Not sure why but take a look at the syntax for getJSON (https://api.jquery.com/jquery.getjson/) and also make sure you're using ipify.org correctly (correct url, etc).
#7
by
Chris_oTree
Also look at your browser’s developer console “network” tab. It should show whether that HTTP request is succeeding and what the error code is.
#8
by
Susan
Hi Chris,
Thank you for your help! I finally found the mistake. The button getIp should not be created by <button class="otree-btn-next btn btn-primary" id="getIp">Check IP</button>. When I replaced it with <button type='button' id="getIp">Check IP</button>, everything goes well.
Here are my codes, may be helpful for other people:
<input type="hidden" name="getip" id="getip" />
{{ formfield_errors 'getip' }}
<button type='button' id="getIp">Check IP</button>
{{ next_button }}
<script>
const getIp = document.getElementById("getIp");
getIp.addEventListener('click', function() {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
document.getElementById('getip').value = JSON.stringify(data, null, 2);
});
});
</script>
#9
by
Chris_oTree
You don't even need the button. Just check the IP without the user's involvement:
<script>
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
document.getElementById('getip').value = JSON.stringify(data, null, 2);
});
</script>