I need help to transfer an array from one page to another page. Following is the code that I created with a list of names.
In another papge, I want to this array and also print them out. I am wondering whether I could get this array by javascript. Thank you so much!
I have seperated two paragrahs of code so that you can easily read them. Thanks a lot!
<html>
<head>
<title>ys</title>
</head>
<body>
<script type="text/javascript">
var aName = new Array;
aName[0] = "daniel";
aName[1] = "zhang";
aName[2] = "alex";
aName[3] = "yang";
aName[4] = "Amy";
aName[5] = "Wang";
aName[6] = "Vincent";
aName[7] = "Lee";
for (i=0; i<8; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
<html>
<head>
<title>get the array from s.html and print out</title>
</head>
<body>
<script type="text/javascript">
for (i=0; i<8; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
Ah, life-cycle management. Is it OK to send it as a parameter? For example,
https://www.google.com/search?q=weather
If yes, see https://stackoverflow.com/a/9146311/227646 which says
Encode the array as a request parameter.
You should turn your array into a URI encoded string, so probably passing through something like JSON first.
Then decode the parameter in the www.testpage.faces.html
How to get "GET" request parameters in JavaScript?
If no (sensitive information), we will have to store it in the browser somehow. Perhaps a cookie?
You can use an external js file if your array is hard-coded.
somefile.js
var aName = ["daniel","zhang", "alex", "yang", "Amy", "Wang", "Vincent", "Lee"];
Html
<html>
<head>
<script type="text/javscript" src="somefile.js"></script>
</head>
<body>
<script type="text/javascript">
for (i = 0; i < aName.length; i++)
{
document.write(aName[i] + "<br>")
}
</script>
</body>
</html>
Other ways: If you use modern browser you can user localStorage for storing big string and split it every time by divider.
Or using cookies but it's ugly.
Related
Okay, So, I have a model object that we will call Station, with a list of codes associated.
class Station {
public List<String> codes;
}
I have a controller method which render a view showing the list of a station.
class StationController {
#Autowired
private StationService stationService;
#GetMapping()
public String showAllStations(Model model) {
model.addAttribute("stations", stationService.getAllStations())
return "stationsView"
}
}
Here is my template
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:each="station : ${stations}" th:text="${station.codes}">
</div>
</body>
</html>
So, let's say my first station as two codes, CD1 et CD2. The rendered html will be the following :
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div>[CD1, CD2]</div>
...Skipping the additional divs.
</body>
</html>
Is there a way to render the codes as a JSON array ? I know thymeleaf can do it in javascript, using inline.
For example,
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var data = [[${renter.sabreCodes}]];
/*]]>*/
</script>
will be rendered as
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var data = ["CD1","CD2"];
/*]]>*/
</script>
So I would want the same result for an attribute value.
Of course, I have a lot of workaround for this, but I would want to know if these workaround are needed, or if it just me who don't know how to get straight to the point.
I'd like to use a style sheet from Wikipedia. For that, I'm fetching this style sheet. When trying to
pass the url fetched using ajax to the head of my html document, the url retrieved behave unexpectedly.
First, I simply try to use the url as it is fetched :
var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
Here is the full code :
<!DOCTYPE html>
<!-- testing purpose file, used for trying to print a correctly formatted wikipedia page -->
<html>
<head>
<meta charset="utf-8"/>
<title> game setup </title> <!-- Titre de l'onglet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
</head>
<body style="background-color:white;">
<div class='container'>
<h1 id="title">MiniWiki</h1>
<div id="content"></div>
</div>
<script>
function loadPage() {
"use strict";
var url, doc;
console.log("IN LOADPAGE")
url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/' + 'Ancient_Egypt';
// fetch the article data
return $.ajax(url).then(function (data) {
doc = (new DOMParser()).parseFromString(data, 'text/html');
// Use mediawiki content stylesheet
var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
console.log("SHOW stylesheetElem");
console.log(stylesheetElem);
$('head').append(stylesheetElem);
//Update content
var contentElem = document.getElementById('content');
var $content = $(contentElem).empty();
Array.from(doc.body.attributes).forEach(function (attr) {
$content.attr(attr.name, attr.value);
});
$content.append(Array.from(doc.body.children));
});
}
loadPage();
</script>
In this case, the url fetched is
<link rel="stylesheet" href="/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">
I was expecting that it would also include https://en.wikipedia.org/ at the beginning of the url like this :
<link rel="stylesheet" href="https://en.wikipedia.org/w/load.php?lang=en&modulening.con...%7Cext.cite.styles&only=styles&skin=vector">
Since it dit not, I thought I could add it myself by simply adding this line of code just
before the line
console.log("SHOW stylesheetElem");
stylesheetElem.href = "http://en.wikipedia.org" + stylesheetElem.href
when printing the stylesheetElem url, this unexpectedly returns the following url :
http://en.wikipedia.orgfile//en.wikipedia.org/w/load.php?...kin=vector
What happened here ? Why didn't I get the following correct url ?
http://en.wikipedia.org/w/load.php?...kin=vector
The dots (...) indicate that the developer tools have left out part of the url. You copy that instead of the real url, which you can see when you do "View Page Source":
/w/load.php?lang=en&modules=ext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cskins.vector.styles.legacy&only=styles&skin=vector
I am not sure if this is possible or not...
I am trying to replace a specific part of a URL from my iframe with a string that is part of the mainframe's URL.
i.e. I am trying to replace the iframe link to include the userID.
Main URL: https://web.example.com?userID=9553c6
<iframe src="https://app.example.com?[Insert userID here]"></iframe>
If your site where is content under address https://web.example.com?userID=9553c6 in my opinion you can do this using eg. php
<body>
<iframe src="http://example.com?user_id=<?php echo urlencode($_GET['userId']) ?>"></iframe>
</body>
Then variable $_GET['userId'] will have value of 9553c6
Or you can use only js which will be a bit harder, because you have to parse location.search https://www.w3schools.com/jsref/prop_loc_search.asp and get specific part of it. Of course this value of param userId will be from main site.
Direct solution
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
iframe {
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
<iframe src="http://fotokrajobrazy.warmia.pl/galeria/fota.php?nr=1004"></iframe>
</body>
<script>
window.onload = function () {
var res = location.search.match(/userId\=(\w+)/);
var fr = document.getElementsByTagName('iframe')[0];
fr.setAttribute('src', fr.getAttribute('src').replace(/(nr\=)\d+/, '$1'+res[1]));
};
</script>
</html>
You can then edit main url like this:
http://127.0.0.1/stack.html?userId=1003
and
http://127.0.0.1/stack.html?userId=1002
etc. and the url of iframe will change too.
You need some simple string-hangling.
You say you're injecting the frame via JavaScript, so I'll suppose your code looks something like this.
let
ifr = document.createElement('iframe'),
src = 'some/url/here?user={user-id}',
user_id = '123456';
src = src.replace('{user-id}', user_id)
;
document.body.appendChild(ifr);
The key line is the one with .replace() - that's where we replace the placeholder with the actual value.
I have some JavaScript in which I set a global variable to hold the function document.getElementById. In a function in the same file, I then try to use that variable, along with the id of an HTML paragraph element, to write to the innerHTML property. However, in the IE11 console, I get the error "SCRIPT65535: Invalid Calling Object". Explicitly writing document.getElementByID("someid").innerHTML = "value" works. Here are the key parts of the code (all in the same file).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<script>
var objDocGEBI = document.getElementById;
function writeData() {
if (true) {
objDocGEBI("name1").innerHTML = "value";
}
}
</script>
</body>
</html>
Your problem is to do with function binding.
The short version, is you need to bind the function to the document like so:
var objDocGEBI = document.getElementById.bind(document);
This will make sure that it is correctly bound to the document without actually running the function. Once you fix this line, you should find that the rest of your code above works as intended.
Because, you need to call your function for executing the innerHTML function.
And you cannot using your syntax. You need to write your document.getElementById; like that :
The first way :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<script>
var objDocGEBI = document.getElementById('name1');
function writeData(){
if (true){
objDocGEBI.innerHTML = "value";
}
}
writeData(); // it's calling your function and execute your innerHTML
</script>
</body>
</html>
The second way :
// Example with IIFE
(() => {
var objDocGEBI = document.getElementById('name1');
if (true){
objDocGEBI.innerHTML = "value";
}
})()
This may be useful for you:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<p id="name2"></p> <!-- added, just for a 2nd example -->
<script>
function writeData(id, value){
document.getElementById(id).innerHTML = value;
}
writeData('name1', 'John');
writeData('name2', 'Peter');
</script>
</body>
</html>
It's much cleaner this way, and you won't have to keep that weird variable. ;)
It's because your variable objDocGEBI is storing a method/function in the syntax of an event listener, but it's not an event listener. Correct syntax would be:
function writeData(name) {
if (true) {
document.getElementById(name).value = "value";
}
}
My PHP is working fine and I appear to be getting back the correct JSON data for FLOT, but I'm still getting a blank chart :-/
Here's the PHP:
foreach($result as $row) { //or whatever
$dataset1[] = array((int) $row['INDX'], (int) $row['RUNTIME'] );
}
echo json_encode($dataset1);
Here's a sample of the JSON it returns:
[[31,2303],[113,5697],[201,4485],[151,4404],[192,2668],[84,1082],[13,6003],[68,3628],[12,2115]]
Here's the function to plot:
$(function () {
$.plot($("#dashboard_div"), apudata);
console.log(apudata);
});
The console log shows correctly formatted JSON as above. I can cut and paste from the console log into a literal variable for that function and it works, but passing the JSON as a variable doesn't.
Ideas?Help?
Try using the code below. Set the 1000 (ms) interval to however often you want the graph to update. This is simply (very slightly edited) code from one of my previous posts that I put in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX FLOT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<div id="div" style="width: 100%; height: 100px;"></div>
<script type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time"
}
};
window.setInterval(function(){
$.getJSON('http://localhost/data.php', function (csv) {
dataOne = csv;
var plot = $.plot($('#placeholder'), [dataOne], options);
});
}, 1000);
</script>
</html>
Not sure if it matters, but the flot docs say to just pass the selector as a string to $.plot(), and not a jQuery object. So instead of
$.plot($('#dashboard_div'), apudata);
try
$.plot('#dashboard_div', apudata);