I have the following code in php:
<html>
<head>
<script stype="text/javascript">
function ventanachat(){
var xmlHttp;
if (window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var fetch_unix_timestamp ="";
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById("ventanachat").innerHTML=xmlHttp.responseText;
setTimeout('ventanachat()',10);
}
}
xmlHttp.open("GET","db.php"+"?t="+timestamp,true);
xmlHttp.send(null);
}
window.onload = function startrefresh(){
setTimeout('ventanachat()',1000);
}
</script>
</head>
<body>
<form action="insert.php" method="GET">
<input type="text" name="mensaje" id="enviachat" >
<input type="submit">
</form>
<div id="ventanachat" style="width:200px;height:200px;border:1px solid black;overflow:hidden;">
<script type="text/javascript">
ventanachat();
</script>
</div>
</body>
</html>
It is a very basic chat page that updates every 1 second. (the insert.php and db.php files are just consultations and are good)
It works perfect in Apache but Nginx does not work me. Why?.
(I speak Spanish, sorry if misspelled. use a translator). Thanks
Related
Good day.
I'm trying to send a simple piece of data from one php file (manage.php) to another (view.php).
I cannot send the data via a form, I want to send it via a JS script. Here's my attempt:
var read = function(id) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("id=" + id);
}
In view.php, using $_POST["id"] causes an error stating that the index "id" is undefined.
What's the correct way to send the data? Thank you.
Your input is not complete. So I did the full example below that you can follow. I made a function, named readid(id), doing the same thing as you want. Then I call that function from html, when needed.
<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function readid(id){
"use strict";
console.log("id=", id)
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/cgi-bin/view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 || this.status === 200){
console.log(this.responseText); // echo from php
}
};
xmlhttp.send("id=" + id);
}
</script>
</head>
<body>
<p>This is a test</p>
<input type="button" name="Submit" value="Submit" id="formsubmit" onClick="readid(id)">
</body>
</html>
view.php
<?php
$logFile = "view.log";
$id = $_POST['id'];
file_put_contents($logFile, $id);
echo $id;
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type: 'POST',
data: id,
url: 'PATH_TO_VIEW.PHP',
success: function(data) {
//do something
},
error: function(data){
console.log('Something went wrong.');
}
});
});
</script>
</body>
</html>
Now the data in ajax can be collected numerous e.g. serialized and new FormData(form) to quickly name two.
I just wanted to know that how can i write code in using JavaScript and HTML in order to make XML file work.
I am currently using this code but it is not working
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
<h1 id="to">To:
<h1 id="from">From:
<h1 id="message">Message:
<p>
</div>
<script>
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","FileName.xml", false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to").childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from").childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("message").childNodes[0].nodeValue;
</script>
</body>
</html>
And i am using this XML code
<?xml version="1.0" encoding="UTF-8"?>
<e-mail>
<to>John</to>
<from>Larry</from>
<message>Hello how are you!</message>
</e-mail>
You are missing closing </h1> tags, also <h1> is not valid child of <p> element; use .onload event of XMLHttpRequest() to perform tasks with .responseText; add index [0] following getElementsByTagName() call to reference specific element in HTMLCollection
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h1 id="to">To:</h1>
<h1 id="from">From:</h1>
<h1 id="message">Message:</h1>
</div>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "FileName.xml", false);
xmlhttp.onload = function() {
xmlDoc = xmlhttp.responseXML;
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue;
}
xmlhttp.send();
</script>
</body>
</html>
plnkr https://plnkr.co/edit/jLsO3SgV8dMG3sRBZbds?p=preview
This question already has answers here:
add onclick function for submit button
(5 answers)
Closed 7 years ago.
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
</head>
<body style="background-color:red;">
I was just thinking that I could do us a private lil webpage ^^
I love you so much hun! <3
<form name="Wish">
Wish<input type="text" name="wish"/>
<input type="submit" class="button" onclick="sendtoajax(this.form)" />
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function sendtoajax(form){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert('done')
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("form.wish.value");
}
</script>
</body>
</html>
I want to execute the function on button click and if I just leave it plain so it executes immidiatelly it work but when I put it into a function and I call it on button click it doesnt at all...
Change type="button" of input. If input has type="submit" it submits the form and hence your function will not be called.
<input type="button" class="button" onclick="sendtoajax(this.form)" />
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<script language="javascript">
function sendtoajax(){
var xmlhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert('done')
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send( 'wish='+document.querySelectorAll('input[name="wish"]')[0].value );
}
</script>
</head>
<body style="background-color:red;">
I was just thinking that I could do us a private lil webpage ^^ I love you so much hun! <3
<form name='Wish'>
<label>Wish<input type="text" name="wish" /></label>
<input type="button" class="button" value='Wish now' onclick="sendtoajax()" />
<input type="reset" value="Cancel"/>
</form>
</body>
</html>
In your code, the <form> submits and redirects. AJAX forms are not meant to redirect. Either give return false; like this:
<input type="submit" class="button" onclick="sendtoajax(this.form); return false;" />
Or give an event.preventDefault() in your AJAX code:
function sendtoajax(form) {
//----
//----
//----
return false;
}
If you can do with jQuery, it is very easy. Lemme take the same code of yours, and convert it to jQuery in a simple way and explain you:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<title>Login page</title>
</head>
<body style="background-color: red;">
I was just thinking that I could do us a private lil webpage ^^
I love you so much hun! <3
<form name="Wish" id="Wish">
Wish <input type="text" name="wish" />
<input type="submit" class="button" />
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
$(function () {
$("#Wish").submit(function () {
$.post("ajax.php", $(this).serialize(), function () {
alert("Submitted");
});
});
});
</script>
</body>
</html>
I'm trying to load content from a php file which name is "include.php" to a in another php file which name is "index.php". But the loading does not work. The code is as below:
The file: index.php
<header>
<script type="text/javascript">
function load(){
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechage = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(adiv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'include.php', true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="submit" value="Submit" onclick="load();">
<div id="adiv"></div>
</body>
The File: include.php
<?php
echo 'Hello!';
?>
Thanks.
If what you are doing is the way you describe then this is simpler:
<header>
<?php include("include.php") ?>
</head>
<body>
<input type="submit" value="Submit" onclick="load();">
<div id="adiv"></div>
</body>
If you want to get result from include.php into JavaScript then you'll probably be better using ajax.
By the way, if you are planning a "universal header" for all your PHP files, you don't need to echo it just write it as normal HTML with any necessary PHP tags
Should it not be document.getElementById("adiv").innerHTML = xmlhttp.responseText;? Notice the quotes.
....xmlhttp.onreadystatechage = function (){
if(xmlhttp.readyState == 4 && xmlhttp.st...
Check the spelling onReadyStateChange.
Below is the code I have been working on,
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-tagsinput.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
<script>
var request;
function sendInfo(){
var v=document.main.io.value;
var url="myjsp.jsp?val="+v;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
try{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}catch(e){
alert("Unable to connect to server");
}
}
function getInfo(){
if(request.readyState==4){
var m=request.responseText;
document.getElementById('sam').innerHTML=m;
}
}
</script>
</head>
<body>
<form name="main">
<input type="text" name="io" onkeyup="sendInfo()" data-role="tagsinput"/>
</form>
<div id="sam">
</div>
</body>
I have not included the "myjsp.jsp" file as I'm sure that nothing is wrong with it.
If I create the textbox as follows,
<input type="text" name="io" onkeyup="sendInfo()"/>
then the function "sendInfo()" is called but if I add "data-role='tagsinput'" as,
<input type="text" name="io" onkeyup="sendInfo()" data-role="tagsinput"/>
then the function "sendInfo()" is not called.
I have to write data-role="tagsinput" for generating the bootstrap tags, but I also want the function "sendInfo()" to execute.
Any suggestions on this situation??
Thanks in advance.
you can add the event listener with javascript:
window.attachEvent = function(){
document.querySelector("input[data-role='tagsinput']").onkeyup(function(){
sendInfo();
});
};
window.addEventListener("load", attachEvent);
to make sure for accessibility of your function, define it in window context:
window.sendInfo=function sendInfo(){/.../}
and you can also try body onload attribute:
<body onload="attachEvent();">...</body>