Extra content at the end of the document - Ajax - javascript

When I run my code this error appears :
This page contains the following errors:
error on line 2 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
I made my code in two files: javascript and php like this:
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = isset($_GET['food']);
$foodArray = array('tuna', 'bacon', 'beef');
if(in_array($food, $foodArray)){
echo 'We do have'.$food;
}
elseif($food==''){
echo 'Enter a food';
}else{
echo 'We dont sell'.$food;
}
echo '</response>';
?>
<html>
<head>
<script src="index.js"></script>
</head>
<body onload="process()">
<form method ="get" action="index.php"><input type="text" id="userInput"/></form>
<div id="underInput"></div>
</body>
</html>
and
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp){
alert("Error")
}else{
return xmlHttp;
}
}
function process(){
if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4){
food = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "index.php?food=" + food,true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()', 1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
xmlResponse = xmlHttp.responseXML;
xmlDocument = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.dataa;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' + message + '</span>';
setTimeout('process()', 1000);
}else{
alert("Error1");
}
}
}
Can somebody help?
Thanks

The error comes because of html code.
Make different php file. Dont add html code in that
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = isset($_GET['food']);
$foodArray = array('tuna', 'bacon', 'beef');
if(in_array($food, $foodArray)){
echo 'We do have'.$food;
}
elseif($food==''){
echo 'Enter a food';
}else{
echo 'We dont sell'.$food;
}
echo '</response>';
?>
do changes in html file use keyup or any other function dont use onload functin
<html>
<head>
<script src="xml.js"></script>
</head>
<body>
<form method ="get" action="test.php">
<input type="text" id="userInput" onkeyup = "process();"/>
</form>
<div id="underInput"></div>
</body>
</html>
codepad

Related

How to display output of shell script at runtime in php page using ajax

I have two php pages. 1st page will load at client browser and display buttons. If clicked it will use ajax call to execute my second php page. The 2nd php page connects to a server using ssh2_exec, execute some shell scripting and display the output on the same loaded page without refresh. I am able to achieve this with my existing pages. But it displays complete output at once after 2nd page completes its execution. I want as the 2nd php page start execution the output should start displaying line by line on client browser.
Below are my 2 pages:
php page1:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../css/new_style.css" />
</head>
<script>
function disable()
{
document.getElementById("save").disabled = true;
}
function enable_button()
{
document.getElementById("save").disabled = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('output').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'arg0_orgcmd_exec.php?id=118' , true);
xmlhttp.send();
}
function disable_button()
{
document.getElementById("execute").disabled = true;
}
</script>
<body>
<div class="main_body">
<form action=" " method="" name="output_frame">
<center>
<input class=" " id="execute" onclick="enable_button();" type="button" name="submit" value="Execute" />
<input class=" " disabled name="save" id="save" type="submit" onclick="disable_button();" value="Save In File" />
<input class=" btn btn-danger back-btn" type=button onclick="location.href='main_menu.php'" value='Close' />
</center>
</form>
</div>
<div id="output" class="output">
</div>
<iframe name="iframe_output"></iframe>
</body>
</html>
arg0_orgcmd_exec.php :
<?php
$page_id = $_GET['id'];
$conn = ssh2_connect($server_ip,$server_port);
ssh2_auth_password($conn, $server_id, $server_pass);
//Checking web.lock file
$stream_lock = ssh2_exec($conn, "ls /tmp/web.lock" );
stream_set_blocking($stream_lock, true);
$check_lock = stream_get_contents($stream_lock);
if(empty($check_lock)) {
$script_output1 = ssh2_exec($conn, "touch /tmp/web.lock ; my_script.sh ; rm -rf /tmp/web.lock" );
stream_set_blocking($script_output1, true);
echo "<pre>";
while($line1 = fgets($script_output1)) {
echo $line1;
ob_flush();
flush();
}
echo "</pre>";
echo "<br />";
echo "<h2>Script Output Finished!!!!<h2>";
echo "<br />";
}else {echo "Already one pending script running in selected server. Kindly wait!!!"; }
fclose($script_output1);
ssh2_exec($conn, 'exit');
unset($conn);
?>
The problem with your code is that with AJAX you can't get the data as it is available, only the complete response after the server side script closes the connection.
One solution is to use Server Sent Events
var evtSource = new EventSource("arg0_orgcmd_exec.php?id=118");
evtSource.onmessage = function(e) {
var newElement = document.createElement("div");
newElement.innerHTML = "<br />message: " + e.data;
document.getElementById('output').appendChild(newElement);
}
Your PHP script needs modifications also:
header("Content-Type: text/event-stream\n\n");
$page_id = $_GET['id'];
$conn = ssh2_connect($server_ip,$server_port);
ssh2_auth_password($conn, $server_id, $server_pass);
//Checking web.lock file
$stream_lock = ssh2_exec($conn, "ls /tmp/web.lock" );
stream_set_blocking($stream_lock, true);
$check_lock = stream_get_contents($stream_lock);
if(empty($check_lock)) {
$script_output1 = ssh2_exec($conn, "touch /tmp/web.lock ; my_script.sh ; rm -rf /tmp/web.lock" );
stream_set_blocking($script_output1, true);
echo "event: commandStarted\n";
while($line1 = fgets($script_output1)) {
echo 'data: ' . json_encode($line1) . "\n\n";
ob_flush();
flush();
}
echo "event: commandEnded\n";
} else {
echo 'data: "Already one pending script running in selected server. Kindly wait!!!"' . "\n\n";
}
fclose($script_output1);
ssh2_exec($conn, 'exit');
unset($conn);

passing variables through parameters AJAX PHP JAVASCRIPT

I'm trying to write a simple AJAX code to get it to search through a simple array, and output the results to the screen, and it works before I tried to pass the variables through the parameter, but now it isn't passing the variables through the parameters for some reason. Please take a look:
functions.js:
var xmlHttp = createXmlHttpRequestObject();
//****************************************************************AJAX
function createXmlHttpRequestObject() {
var xmlHttp;
if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp)
alert("Not xmlHttp!")else
return xmlHttp;
}
//****************************************************************AJAX
function process(IDName, passTo, output) {
if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
get = encodeURIComponent(document.getElementById(IDName).value);
xmlHttp.open("GET", passTo + get, true);
xmlHttp.onreadystatechange = handleServerResponse(output);
xmlHttp.send(null);
} else {
setTimeout('process()', 1000);
}
}
//****************************************************************AJAX
function handleServerResponse(output) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById(output).innerHTML = message;
setTimeout('process()', 1000);
} else {
alert('xmlHttp.status does not equal 200!');
}
}
}
foodstore.php:
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna','bacon','beef','ham');
if(in_array($food,$foodArray))
echo 'We do have '.$food.'!';
elseif ($food=='')
echo 'Enter a food';
else
echo 'Sorry punk we dont sell no '.$food.'!';
echo '</response>';
?>
test5.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="process('userInput','foodstore.php?food=','underInput')">
<h3>The Chuff Bucker</h3>
Enter the food you would like to order:
<input type="text" id="userInput" />
<div id="underInput" />
</body>
</html>
Try adding console.log(variable) on different stages to check the current state of variables, probably you are having problems with the get variable with the encodeURIComponent or maybe it isn't entering to that if on process function.

php created select tag with ajax

Good day this is my code of index
<!DOCTYPE html>
<html>
<body>
<script>
function show_month(var) {
if (windows.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","month.php?q="+var,true);
xmlhttp.send();
}
</script>
<?php
$from = (date('Y'));
$to = 2050;
echo '<form>';
echo '<select name="year" onchange="show_month(this.value)">';
for($y = $from; $y <= $to; $y++) {
echo "<option value=$y>{$y}</option>";
}
echo '</select>';
echo '<form>';
?>
<div id="txtHint"><b>here will be info</b></div>
</body>
</html>
and here is code of my month.php
<!DOCTYPE html>
<html>
<body>
<?php
$q = $_GET['q'];
echo $q;
if ($q == 2015) {
echo "actual year";
}
else {
echo "unactual year";
}
?>
</body>
</html>
As you see I created select tag with php so I can make multiple options of year just by using loop and I want that if I select year 2015 javascript should print message actual year but it isn't working I think that problem is somewhere in select or sending value can someone more intelligent than me look into this code and tell me whats is wrong?
Your js code does not have the response code. Also you have a few other errors in your code which will cause issues for you.
show_month(var) you cannot have var as this specific to JS, change it to something else.
windows.XMLHttpRequest This is window not windows.
In order to show what you need use;
alert(xmlhttp.responseText);
in your response if.
<script>
function show_month(t) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","month.php?q="+t,true);
xmlhttp.send();
}
</script>
and finally you don't need <!DOCTYPE html> in your month.php if you are just returning text (most likely you will never need a reason for it).
Your js code is missing code to handle server response
<script>
function show_month(var) {
if (windows.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","month.php?q="+var,true);
xmlhttp.send();
}

How to replace contents of div instead of append when php script is running through XMLHttprequest?

Is there a way to make the div be replaced with the php echo value instead of being appended to the div as it does now with the following code?
PHP File (generator.php) :
header('Content-type: text/html; charset=utf-8');
function output($val)
{
echo $val.str_repeat(" ",5000);
sleep(2);
}
output('Begin... (counting to 10)');
for( $i = 0 ; $i < 10 ; $i++ )
{
output($i+1);
}
output('End...');
?>
Calling HTML file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function start() {
try {
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
}
xmlhttp.onreadystatechange = refreshwait;
xmlhttp.open('GET', './generator.php', true);
xmlhttp.send('null');
refresher;
}
function refresher(){
window.setTimeout(refreshwait,1000)
}
function refreshwait() {
if (xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var code = 'Finished';
document.getElementById('view_area').innerHTML = code;
}
}else{
var responseText = xmlhttp.responseText;
//document.getElementById("view_area").innerHTML = responseText;
$("#view_area").html(responseText);
}
}
</script>
</head>
<body>
<div id="a_form">
<form id="aform">
<input name="Generate" onClick="start()" type="button" value="Generate Fresh File" />
</form>
</div>
<div id="view_area"></div>
</body>
</html>

AJAX Silent Update from database

I am trying to update a paragraph from my html document using ajax but its not working and there is not error.
It simply does not change the value of the paragraph.
Is there an error in my code?
Thank you.
PHP/XML:
<?php
header('Content-Type :text/xml');
echo '<?xml version="1.0"encoding="UTF-8"standalone="yes"?>';
echo '<response>';
$connect = mysql_connect("****","***","****");
mysql_select_db("****");
$query = mysql_query("SELECT * FROM questions WHERE number=1");
$query2 = mysql_fetch_array($query);
echo $query2['q1'];
echo '</response>';
?>
javascript
<script>
var xmlHttp = createXmlHttpRequstObject();
function createXmlHttpRequstObject() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();
} catch(e) {
xmlHttp=false;
}
if(!xmlHttp)
alert("NOPE");
else
return xmlHttp;
}
function refresh() {
if(xmlHttp.readyState==4||xmlHttp.readyState==0){
xmlHttp.open("GET","ref.php",true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
} else {
setTimeout('refresh()',1000);
}
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
var xmlResponse = xmlHttp.responseXML;
var xmlDocumentElement = xmlResponse.documentElement;
var message= xmlDocumentElement.firstChild.data;
document.getElementById("choice1").innerHTML=message;
setTimeout('refresh()', 1000);
}
}
</script>
HTML:

Categories