I want to use in javascript an object from a list coming from the controller.
I'm using Thymeleaf with Spring boot.
The list name is ${collaborateurs}.
The bellow code is working:
<script th:inline="javascript">
/*<![CDATA[*/
var user = /*[[${collaborateurs[0].email}]]*/;
alert(user);
/*]]>*/
</script>
But I want to use some variable as index :
<script th:inline="javascript">
/*<![CDATA[*/
var i = 1; // may be 0, 1, ....
var user = /*[[${collaborateurs[i].email}]]*/; // this code is not working
alert(user);
/*]]>*/
</script>
Thank you for your help!!
I found the solution by trying to assign directly the list ${collaborateurs to a javascript variable and access to my object directly from client side:
<script th:inline="javascript">
/*<![CDATA[*/
var i = 1
var users = /*[[${collaborateurs}]]*/;
alert(users[i].email);
/*]]>*/
</script>
Related
My lack of experience with both Wordpress and Javascript is tripping me up.
I have a Wordpress page that has a Jotform embedded using this tag:
<script type="text/javascript" src="https://form.jotform.com/jsform/FORMCODE"></script>
But I have a value coming into my Wordpress through the URL that I need to pass along in the embedded Jotform's URL. I cannot figure out how to do that. Do I want to use PHP? Javascript?
I tried this, which didn't work at all:
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
Thanks for any help!
To add a javascript code to a WordPress page you need the page id else the js code will be on all the pages.
You can either add the js code to the head of the page likes so:
add_action('wp_head',function () {
// 10 is the page id;
if (is_page ('10')) {
?>
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
<?php
}
}
);
Then put the js code on the footer like so:
add_action('wp_footer',function () {
// 10 is the page id;
if (is_page ('10')) {
?>
<script type="text/javascript">
function getURL(){
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
let pair = params_arr[0].split('=');
return "https://form.jotform.com/jsform/230391120310032?coursecode=" + pair[1];
}
</script>
<script type="text/javascript" src="getURL();"></script>
<?php
}
}
);
Whichever snippet you pick should be added to your theme functions.php or code snippet plugin if you have one
I would like to check using liquid language, if is there somewhere in the page, a script being called twice or more.
For example:
<script src="myscripts.js"></script>
<script src="myscripts.js"></script>
Is it possible using liquid or should I use javascript to validate?
I'm not sure about liquid, but if you wanted to go the JS route, this could work:
//locate all `<script>` tags and save the elements into an array
var scriptTags = [];
document.querySelectorAll('script').forEach(function(tag) {
scriptTags.push(tag)
});
//Put just the URLs of the script tags into an array
var scriptUrls = scriptTags.map(function(tag) {
return tag.src;
});
//Get a list of any URL that appears more than once
var duplicateUrls = scriptUrls.filter(function(url, i) {
return scriptUrls.indexOf(url) != i;
});
console.log(duplicateUrls);
<script src="dupe.js"></script>
<script src="other1.js"></script>
<script src="dupe.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>
I have some JavaScript code with Servlets code, I want to move all of them (between ) to external js file, but it doesn't work, what can I do? How to modify my code if only part of JavaScript can move to external file.
<script language="JavaScript" type="text/JavaScript">
var sel = document.getElementById('sel');
var selList = [];
<%
String key = "";
String text = "";
for(int i = 0; i < master.size(); i++) {
Map option = (Map) master.get(i);
key = (String) option.get("Code");
text = key + " " + (String) option.get("NAME");
%>
selList.push({
key: "<%=key%>",
text: "<%=text%>"
});
<%
}
%>
</script>
Here two options:
1-by not using ajax
external.js
var images;
function renderImages(){
//do things for showing images here.
//images variable has images data as JSON (i suggest you this way) so you can easily iterate over list and render it.
}
jsp
<html>
<head>
<script type="text/javascript" src="external.js"></script>
<script>
images = "<%=request.getAttribute("imageDataAsJSON")%>"; //here i assume you populate request variable with your image data in JSON format. Be careful about parse errors due to ' and ".
</script>
</head>
<body>
<script>
renderImages();
</script>
</body>
</html>
2-by using ajax (you can seperate client side logic into external js code and populate data into it by doing ajax calls to server side.)
external.js
function renderImages(){
//do ajax to your servlet which returns image data as JSON.
//iterate over image data and render your html elements accordingly.
}
jsp
<html>
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>
I'd like to pull data from my HTML code into my dataLayer (Google Tag Manager).
The html code is something like this:
<body class="portal sessions" data-place="hun">...</body>
And the Javascript Code is something like this:
<script type="text/javascript">
var lang_log = document.getElementsByClassName("portal");
dataLayer.push({
"language_login":lang_log
})
</script>
What I'd try is to give to the lang_log variable the "hun" value and I'd try:
<script type="text/javascript">
var lang_log = document.getElementsByClassName("portal")['data-place'];
dataLayer.push({
"language_login":lang_log
})
</script>
But it's not working.
Any ideas?
Any help or advice is apprecaited, Thank you in advance.
document.getElementsByClassName("portal") returns an array-like collection of elements.
You can get the first element of this collection with document.getElementsByClassName("portal")[0].
To access the data attribute, use document.getElementsByClassName("portal")[0].dataset.place.
var AdataLayer = [];
var lang_log = document.getElementsByClassName("portal")[0].dataset.place;
AdataLayer.push({
"language_login":lang_log
})
console.log(AdataLayer);
console.log(AdataLayer[0].language_login);
<body class="portal sessions" id="portal" data-place="hun">...</body>
Found the solution:
the JS should be:
<script type="text/javascript">
var lang_log = document.getElementsByTagName("body")[0].getAttribute("data-locale");
dataLayer.push({
"language_login":lang_log
})
</script>
Still investigating in why the first version did not work!
I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function
Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.