Ajax Button Help

Mod-Jay · May 8, 2011

Hello, I am trying to make a(n) ajax button start a php script. Im having a bit of trouble and i was hoping you could take a look at the code. I have 3 Different files Index.php , Javascript.js, And save.php. What i want this script to do is Save a file without having to restart the page.

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Save File</title>
<script type="text/javascript" src="js/Javascript.js"></script>
  </head>
<body>
<?php
$page = $_GET['page'];
if($_GET['page']) {
$contents = file_get_contents("../toplist/" . $page);
?>
<button type='button' onClick="MakeRequest()" name='submit' value='Save code'>Save Code</button>
<div id="SavedFile">
</div>
<?php
echo "<textarea id=\"code\" name='content' rows=\"*\" cols=\"*\">" .htmlspecialchars($contents) . "</textarea>";
echo "<input type='hidden' value='$page' name='page' id='page'/>";
?>
</body>
</html>

Javascript.js

		function getXMLHttp()
	{
	  var xmlHttp

	  try
	  {
		//Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	  }
	  catch(e)
	  {
		//Internet Explorer
		try
		{
		  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
		  try
		  {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		  }
		  catch(e)
		  {
			alert("Your browser does not support AJAX!")
			return false;
		  }
		}
	  }
	  
	  function HandleResponse(response)
	{
	  document.getElementById('SavedFile').innerHTML = response;
	}
	  
	function MakeRequest()
	{
	  var xmlHttp = getXMLHttp();
	  var page = document.getElementById("page").value;
	  var content = document.getElementById("code").value;

	  xmlHttp.onreadystatechange = function()
	  {
		if(xmlHttp.readyState == 4)
		{
		  HandleResponse(xmlHttp.responseText);
		}
	  }
	  
	  document.savecode.submit();
	  
	  xmlHttp.open("POST", "edit.save.php", true); 
	  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  xmlHttp.send("page="+page+"&content="+content+"");
	}

Save.php

<?php
$page = $_GET['page'];
$content = $_GET['code'];
    $handle = fopen('../toplist/' . $page, 'w');
    if (!is_writable($page)) {
       die('File is not writable!');
   chmod("../toplist/" . $page, 0755);
   }
    $write = fwrite($handle, $content);
    if ($write === FALSE){
       die('Write error!');
 } else {
   echo "File saved";
    }
    fclose($handle);
?>

Thanks in advanced for trying.

sunfighter · May 8, 2011

So many things I finally gave up.

Here is what I found before I throw up my hands and substituted code.

Your using POST method in the browser and trying to receive it with $_GET.

Your second GET['code'] should be $_POST['content']

Javascript: function getXMLHttp() needs closing bracket }

In the <body> your first php section has an IF with an opening { but no closing one.

You need to start learning how to trouble shoot bad code. Firebug has a javascript add-on. The use of alerts tell you how far into a program you have gone before it quits. In Ajax the server side script should say Echo 'HERE';die; before you code it, just to make sure your calling the script and can display the results.

With these corrected the code still does not reach the server. I have deleted your ajax and added mine. Here's a working script.

Browser code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Save File</title>
<script type="text/javascript">
var httpRequest;
if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
        httpRequest.overrideMimeType('text/xml');
    }
}
else if (window.ActiveXObject) {
    try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {}
    }
}
window.ajaxobject =	httpRequest;

function makeRequest()
{
var httpRequest = window.ajaxobject;
var url = 'Save.php';
var page = document.getElementById("page").value;
var content = document.getElementById("code").value;

var params = "page="+page+"&content="+content;
if (!httpRequest)
{
    alert('Giving up  Cannot create an XMLHTTP instance');
}

httpRequest.onreadystatechange =  function() {alertContents(httpRequest);};
httpRequest.open('POST', url, true);
//Send the proper header information along with the request
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");
httpRequest.send(params);
}

function alertContents(httpRequest) {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
		if (httpRequest.responseText){
			document.getElementById('SavedFile').innerHTML = httpRequest.responseText;
		}
        } else {
            alert('There was a problem with the request. '+ httpRequest.status);
        }
}
}
</script>
  </head>
<body>

<?php
if($_GET['page'])
{
$page = $_GET['page'];
$contents = file_get_contents($page);
} // YOU REALLY NEEED CODE TO HANDLE ERRORS
?>
<button type='button' onclick="makeRequest()" name='submit' value='Save code'>Save Code</button>
<div id="SavedFile"></div>
<?php
echo "<textarea id=\"code\" name='content' rows=\"*\" cols=\"*\">" .htmlspecialchars($contents) . "</textarea>";
echo "<input type='hidden' value='$page' name='page' id='page'/>";
?>
</body>
</html>

Your server side php:

<?php
$page = $_POST['page'];
$content = $_POST['content'];
    $handle = fopen($page, 'w');
    if (!is_writable($page)) {
       die('File is not writable!');
   chmod("../toplist/" . $page, 0755);
   }
    $write = fwrite($handle, $content);
    if ($write === FALSE){
       die('Write error!');
 } else {
   echo "File saved";
    }
    fclose($handle);
?>

Sign In

Ajax Button Help

Recommended Posts

Mod-Jay

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information