I'm trying to read .txt files from external links the user provides, so I can later use them in an app. For now I'm just trying to show them in a div (.output). I got so far, and now I got stuck, don't really know how to proceed.
function getText(url){
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
if (type.indexOf("text") !== 1) {
return request.responseText;
}
}
}
}
$(".url-input").change(function() {
getText($(".url-input").value);
});
.output {
width:500px;
height:500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Ugh</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="output"></div>
<input class="url-input" type="url">
</body>
</html>
JavaScript get (notice you have to input the file name with the extension (.txt):
just change the value to val():
$(".url-input").change(function() {
getText($(".url-input").val());
});
jQuery get:
replace all the javascript with these few lines:
$(".url-input").change(function() {
$.get($(this).val(), function( data ) {
$('.output').html(data);
});
});
This is much better option, because the Ajax Get is an asynchronous call, so you want to update the output value on the callback.
By the way, you should do some validation on that use input before you make the Ajax call. Also, to remove the need to add the ".txt" in the input change it to:
$(".url-input").change(function() {
$.get($(this).val()+'.txt', function( data ) {
$('.output').html(data);
});
});
Related
I have a problem with a html file not 'loading' js and css files properly. This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create new snippet</title>
<script src="static/js/send.js"></script>
<link rel="stylesheet" href="static/css/button.css">
</head>
<body>
<textarea id="code_snippet" placeholder="//write your code here"></textarea><br/>
<button type="submit" onclick="send()">Submit</button>
</body>
</html>
It is supposed to take some input into the textarea tag and send it to a database when you click on the button. However, the function send() doesn't work at all. Also, the linked CSS doesn't work as well. This is my project structure:
This is the send() function:
function send() {
let object = {
"code": document.getElementById("code_snippet").value
};
let json = JSON.stringify(object);
let xhr = new XMLHttpRequest();
xhr.open("POST", '/api/code/new', false)
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(json);
if (xhr.status != 200) {
alert("Something went wrong!");
} else if (xhr.status == 200){
alert("Success!");
}
}
This function works fine when I put it inside of script tag
You should make sure the links are relative or absolute to the home directory.
/absolute path
and use without "/" for relative path
try to access css and js file links from browser.
I'm trying to call a function from a button in the html body when onclick. This function sends the id to a php for processing some information.
The problem is that when I press the button, it is not calling the function. Can anyone tell me what I'm doing wrong?
Thank you
This is the code,
<html>
<head>
<title>Carrental</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function delete(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="delete(9)">Erase</button>
</body>
</html>
delete is an operator. You cannot use it as the name of a variable.
Rename the function.
You need to change the delete to another name function , delete is an operator , you can see the list of operators here : Expressions and operators
function ajaxCall(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="ajaxCall(9)">Erase</button>
</body>
You cant call the function delete. Just Rename it :)
The problem is delete is operator in JavaScript
The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.
So your code try to delete the object or element mentioned after it and is not calling method you wrote.
As per example in #Pluto https://stackoverflow.com/a/62086635/124891
You have to rename the method and call it.
I am trying to implement an AJAX Example which perfectly works with the GET request, but I am not able to transmit via POST. What am I doing wrong ? The POST object received by PHP is always empty. Thanks for any advice!
HTML & JavaScript:
<html>
<head>
<title> Create a new user</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function checkUser(){
xhttp = new XMLHttpRequest();
xhttp.open("POST","usercheck.php",true);
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var data = xhttp.responseText;
alert("Benutzer" + data);
}
}
xhttp.send("username=" + encodeURIComponent(document.getElementById("username").value));
}
</script>
</head>
<body>
<p>User:</p><br>
<input type="text" id="username" name="username">
<button onclick="checkUser();"> Check </button>
</body>
</html>
PHP Code:
<?php
$usernames = array("admin", "gast", "paul");
$validate_pattern = "/^[a-z0-9]{4,20}$/";
if (!isset($_POST["username"])) {
die("{valid:false,message:false}");
}
if (in_array($_POST["username"], $usernames)) {
die("{valid:false,message:'Username is used!'}");
}
if (!preg_match($validate_pattern, $_POST["username"])) {
die("{valid:false,message:'Username wrong.'}");
}
echo "{valid:true,message:false}";
?>
I found the bug in the code. I missed to set the request header, which was not part of the tutorial unfortunately:
xhttp.setRequestHeader('Content-Type','x-www-form-urlencoded');
I want to generate html as well as SVG code based on my Subsciber`s any of the position of on web page (or you can say any of the div).
I want to give some javascript code to be put in side of that page`s div so at that div whole my code place.
I don't want to use iframe because height and width is not defined its automated.
here what i have tried and i am still trying.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<div>
<script>
(function(){
var xhr=new XMLHttpRequest();
xhr.open("get","request Url of my side",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
document.write(xhr.responseText);
}
};
}());
</script>
</div>
</body>
</html>
But what happening here is before response came whole page was loaded and document.write() erase existing content and place my responseText .
Any Help will be appreciated.
JQuery solution. You can write similar in pure java, but its a bit harder. Inside <div id="results"></div> you will get your response.
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
Reference: http://api.jquery.com/jquery.ajax/
EDIT: Pure Javascript solution:
Async=true:
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("results").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "test.html", true);
xhttp.send();
Async=false:
xhttp.open("GET", "test.html", false);
xhttp.send();
document.getElementById("results").innerHTML = xhttp.responseText;
Reference: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
its just take me long time to find document.scripts
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
Here Is The Code
<div>
<script>
(function(t){
var xhr=new XMLHttpRequest();xhr.open("get","request url",true);xhr.send();
xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){
document.scripts[document.scripts.length-1].parentNode.innerHTML=xhr.responseText;}}
}(this));
</script>
</div>
</body>
</html>
I am trying to retrieve data from a web page and then display it on my webpage, nothing fancy atm just display it so it cam be read, however I am not sure how to do this, this is what I have so far(Also sorry if I've not done the formatting properly I'm still new to this):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Night Out In Glasgow!!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="pull.js"></script>
</head>
<body>
<form action = "">
<p><button type = "button" onclick ="getData()">Get The Data</button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
This is then my JS which is in a separate file called pull.js, which I have linked to in my HTML, hope this clears up any confusion form original post.
/*jslint node: true, browser: true */
"use strict";
/*jslint node: true, browser: true */
"use strict";
function getData(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ratings.food.gov.uk/OpenDataFiles/FHRS776en- GB.xml");
xmlhttp.onreadystatechange = checkData;
xmlhttp.send(null);
function checkData() {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
//We've got a response
alert(xmlhttp.responseXML);
}
}
else{
//Somethings went wrong
alert("Error: " + xmlhttp.status + ": " +xmlhttp.statusXML);
}
}
}
Try it in this order:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","...");
xmlhttp.onreadystatechange = {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
...
};
xmlhttp.send();
I'm not sure with your case, but the same origin policy restricts contents retrieved via XMLHttpRequest to be accessed from a website with different origin. Go check this StackExchange answer