Will saving innerhtml allow to save all elements on page
I need to save a web page the content of which changes dynamically. For
example, a user can add custom functions and they are added to the custom
functions drop down list. I would like to save the "newly" updated page
using PHP and AJAX. I tried getting the innerHTML of all the elements by
wrapping them in a "main-body" div. When I display the result with the
alert box, all the data seems to be captured. But when I post the data to
my savedata.php file using the POST AJAX method the data is not saved.
Only the first few lines of the data is saved.
The new options in the select boxes and the content of the textarea are
not saved either. However, if I individually try to save the textarea and
select box data using .value instead of innerHTML that works.
My question in a nutshell, is why doesn't the innerHTML data get saved
despite the fact that the alert box shows all the data when I use
documentGetById("main-body").innerHTML to get all the contents of my page.
Here is some code
Javascript and AJAX Code
function savehtml()
{
//Make ajax call after setting up variables
var saveme=document.getElementById('txtArea').innerHTML
var filename = document.getElementById('nameoff').value
var parameters="saveme="+saveme+"&filename="+filename
ajaxr('savedata.php', "result", parameters)
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i])
}
catch(e){
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest()
else
return false
}
function ajaxr(phpfilename, idofinnerhtml, parameters)
{
var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
alert(parameters)
document.getElementById(idofinnerhtml).innerHTML="Result:
"+mygetrequest.responseText
/*document.getElementById("catbody").value="Result :
"+mygetrequest.responseText*/
}
else{
document.getElementById(idofinnerhtml).innerHTML="Result: Failed "
}
}
}
mygetrequest.open("POST", phpfilename, true)
mygetrequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded")
mygetrequest.send(parameters)
}
HTML Code
<body>
<div id="main-body">
<table>
<tr>
<td>
<textarea id="txtArea" name="txtArea" rows="10" cols="100"><?
?></textarea><br><br>
</td>
<h2>Quick tools</h2>
<button onclick="addsigns();">Add a sign</button><br>
<input type="radio" id="andsign" name="whichsign" value="&&">&&
<input type="radio" id="orsign" name="whichsign" value="||">||
<input type="radio" id="notsign" name="whichsign" value="!">!
....
Php Code
$data=$_POST['saveme'];
$filename=$_POST['filename'];
echo $data;
$handle = fopen($filename, 'w+');
flock($handle, LOCK_EX);
fwrite($handle, $data);
flock($handle, LOCK_EX);
fclose($handle);
No comments:
Post a Comment