Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have some boxes which need to display images of movies and a small box under each box which needs to display the name of the movie. (see image links below)
I am required to create a feature which allows the user to update an image and text box with a new movie image and name of the movie using an XML file and the path to the image.
Can someone explain to me how all of this works? I am very new to web development and this doesn't make any sense to me.
Many thanks,
Farid
This is just a rough and untested sketch of how you can do it.
Read the XML data from a file (let's say file.xml) using AJAX.
window.onload = function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
buildHTML(xhttp);
}
};
xhttp.open('GET', 'file.xml', true);
xhttp.send();
};
Loop through the XML data and build your HTML. This code should display a set of images and text.
function buildHTML(xml) {
var i;
var xmlDoc = xml.responseXML;
var programmes = xmlDoc.getElementsByTagName('Programme');
var html = '';
// loop through Programme elements
for (i = 0; i < p.length; i++) {
// build the HTML for the image and name text
html += '<img src="' + programmes[i].getElementsByTagName('imagepath')[0].childNodes[0].nodeValue + '">';
html += "<span>" + programmes[i].getElementsByTagName('name')[0].childNodes[0].nodeValue + '</span>';
}
//
document.body.appendChild(html);
}
Style your HTML using CSS.
Et voila.
FYI I built my example based off this AJAX XML example on w3school.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is it possible to take a link and access its HTML code through that link? For example I would like to take a link from Amazon and put it within my own HTML code, use JavaScript to getElementsByClassName to get the price from that link and display it back into my HTML code.
It is possible. You could do a GET request to the Amazon page that will give you the html in the response from there you'll have a string now you'll need to format it, last time I used the node module jsdom to do that.
In more detail:
HTTP is a protocol that we use to request data from the server, I've wrote an explanatory node js script:
const https = require('https');
const JSD = require('jsdom');
const { JSDOM } = JSD;
const zlib = require('zlib');
// The http get request
https.get('https://www.amazon.com', (response) => {
html = '';
// we need this because amazon is tricky and encodes the response so it is smaller hence it is faster to send
let gunzip = zlib.createGunzip();
response.pipe(gunzip);
// we need this to get the full html page since it is too big to send in one amazon divides it to chunks
gunzip.on('data', (chunk) => {
html += chunk.toString();
});
// when the transmittion finished we can do wathever we want with it
gunzip.on('end', () => {
let amazon = new JSDOM(html);
console.log(amazon.window.document.querySelector('html').innerHTML);
});
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I create a textarea and then I want, with Javascript or what I need, to fill the textarea with a content of a file, when I clicked a button.
How can I do that, or what do I need?
Is the text already loaded into the page and held in a Javascript variable? If not, as other have suggested then an AJAX call may be required to retrieve this data.
Changing the value of a textarea can be done with some simple javascript as below;
<textarea id="textarea"></textarea>
<input type="button" onclick="changeText()" value="button" />
<script>
function changeText() {
var textarea = document.getElementById('textarea');
textarea.value = "new Value";
}
</script>
If instead we're retrieving a file without jQuery the function can be as below;
function changeText() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'request_page.php');
xhr.send(null);
xhr.onreadystatechange = function () {
var status = 4;
var http_code = 200;
if (xhr.readyState === status) {
if (xhr.status === http_code) {
var textarea = document.getElementById('textarea');
textarea.value = xhr.responseText;
} else {
// do something with an error here
}
}
}
};
Sounds like a job for an ajax call. Javascript can call a page on the server that can open a file, read its contents and return in a json string containing the contents of the file, which the javascript then puts into the textarea
Load text from local .txt file into html textarea using JavaScript
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a function that writes to the variable files from the input file field. I want to re-load files in the variable after reselecting files in the form. The current script loads the files correctly, but the previous files are in the upload variable. How to clean up the variable upload before each call to the load_files function in such a way that the variable data is available outside of it?
$(document).ready(function() {
$('.choose-input').on('change', load_files);
var upload = [];
function load_files(e) {
var files = e.target.files;
var arr = Array.prototype.slice.call(files);
arr.forEach(function(file) {
upload.push(file);
$('.choose-el').append(file.name);
});
if (upload.length > 0) {
$('.choose-el').append('<span class="start-upload">Start upload</span>');
}
$('.choose-input').val('');
}
});
var upload = [];
$('.choose-input').on('change', function(e) {
upload = [];
load_files(e);
);
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to load a JavaScript and CSS file when I click a button. I've tried a lot of methods and a few are working but they only allow immediate execution with predefined functions and I at least don't want to have to predefine the functions. All I want to do is load a new JavaScript and CSS file from my server and execute (at least the JavaScript) it whenever I want.
You can add javascript dynamically but the only the way that worked to me always is:
var path_to_script = "the url";
var response = syncRequest("GET", path_to_script, null);
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.text = response;
head.appendChild(script);
function syncRequest(_method, _url, _data) {
var req = getXmlHttp();
try{
req.open(_method, _url, false);
req.send(_data);
}catch(e){
alert(e.description);
}
return req.responseText;
}
function getXmlHttp() {
var xml_http = null;
if (window.XDomainRequest) { xml_http = new XDomainRequest(); }
else { xml_http = new XMLHttpRequest; }
return xml_http;
}
I am not sure that ajax request will work, it is partially copy paste from my project with many changes, but I think it easy to understand how it should to work.
CSS loading:
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", path_to_css);
document.getElementsByTagName("head")[0].appendChild(css);
<link id="custom_stylesheet" rel="stylesheet" type="text/css" href="" />
<script id="custom_script"></script>
<script>
function LoadStyleAndScript()
{
$("#custom_stylesheet").attr("href", "//example.com/mystyle.css");
$("#custom_script").attr("src", "//example.com/myscript.js");
}
</script>
<input type="button" onClick="LoadStyleAndScript();" value="Load it">
Maybe you could have an iframe inside a hidden div and load a javascript file in that based on what the user clicks. The problem will be passing javascript variables. You'll need to predefine them in PHP before you render the page in the iframe.
If you just load a javascript file and add to the current document body I don't think it will work in terms of using global variables (unless, again, you predefine them with PHP).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Suppose the current page is some1.html, and there is a second page, some2.html. How can I access DOM elements in "some2.html" from some1.html using JavaScript?
The way you could do this is by using AJAX:
$.get(url, function(data) {
var $doc = $(data);
});
You can use that to get the contents from an url, and do something with it.
In response to your edit: You can then access the DOM elements by just doing $doc.find('selector') instead of the usual jQuery $('selector').
You can also make it a bit easier by doing:
$.get(url, function(data) {
var $doc = $(data);
var $d = $doc.find;
});
in which case you can just use the syntax $d('selector').
The way you'd do this without jQuery installed would be:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'document';
xhr.send();
xhr.onload = function(e) {
var doc = e.target.responseXML;
}
and then you can access DOM elements via doc.getElementById('id') just like you'd normally select elements, but using doc instead of document.
Note: for these functions, the $doc, $d and doc variables are only accessible within the callback function (so they're only accessible within the function where they're defined).
You cannot.
Your code shows that the new page is being loaded in the same window.
The JavaScript environment for page1 will disappear before the environment for page2 is created. Since they don't exist at the same time, you can't access the DOM of one from the other.
What you could do is store some data in localstorage or a cookie, and have code you place in page2 look for that data and run JS based on what it says.
You could experiment a bit with Ajaxh, because, as Quentin said, changing window.location.href will load the chaned file. or use an iframe like this:
var frame= document.createElement('iframe');
frame.setAttribute('src', 'some2.html');
frame.setAttribute('name', 'some2');
frame.appendTo(body);
var some2 = document.frames['name'];
//now you can acces to some2 with getElementById,...