Here is a fully working example. Just copy paste into three files named:
whateveryouwant.php
another_php_file.php (to change name, you must also change in ajax code (2 places)
contacts.xml
How It Works:
The first ajax code block runs as soon as the DOM is ready (note: no event triggers it, it just runs. The 2nd code block is triggered by a click event). The ajax sends this POST over to the PHP file called another_php_file.php: req=load. This is a key=>value associative array: "req" is the var name, and "load" is its value.
Now, look what happens inside another_php_file.php. Upon launch, the file checks what POST variables it received. If $_POST['req'] == 'load' then it reads the file from disk and ECHOes it back out. That's how AJAX works: whatever is echoed from the specified PHP processor file is received inside that AJAX code block's success: function.
And how does the xml text get inside the textarea control? Look again at that first AJAX code block. Remember that data echoed from the PHP processor file is received inside the success function? Here's the magic:
success: function(result) {
$('textarea').val(result);
}
result is a variable (could name it anything) containing what was echoed by the PHP file. Then we use jQuery to stick result into the textarea control.
Note that I did not specify an ID for that textarea control. This code assumes there is only one on your page. If you had more than one, then you would reference the desired textarea control by its ID:
$('#myText').val(result);
The HTML:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'another_php_file.php',
data: 'req=load',
success: function(result) {
//alert(result);
$('textarea').val(result);
}
});
$('#mybutt').click(function() {
var stuff = $('textarea').val();
alert(stuff);
$.ajax({
type: 'POST',
url: 'another_php_file.php',
data: 'req=save&changes=' +stuff,
success: function(result) {
alert(result);
//$('textarea').val(result);
}
});
});
}); //END $(document).ready()
</script>
</head>
<html>
<body>
<input type="button" value="Save Changes" id="mybutt" />
<textarea id='myText' rows="30" cols="120" value='<?php echo $xml; ?>' />
</body>
</html>
another_php_file.php
<?php
//This necessary to prevent AJAX from automatically ESCAPING all values (e.g. "Bob" is turned into \"Bob\" )
//See http://stackoverflow.com/questions/4550036/jquery-is-automatically-escaping-ajax
if (get_magic_quotes_gpc()) {
$process = array(&$_GET, &$_POST, &$_COOKIE, &$_REQUEST);
while (list($key, $val) = each($process)) {
foreach ($val as $k => $v) {
unset($process[$key][$k]);
if (is_array($v)) {
$process[$key][stripslashes($k)] = $v;
$process[] = &$process[$key][stripslashes($k)];
} else {
$process[$key][stripslashes($k)] = stripslashes($v);
}
}
}
unset($process);
}
if ($_POST['req'] == 'load') {
$xml = file_get_contents("contacts.xml");
echo $xml;
}else if ($_POST['req'] == 'save') {
$d = $_POST['changes'];
//echo $d;
$size = file_put_contents('contacts.xml', $d);
echo 'Wrote ' .$size. ' bytes to file. Refresh page with [Ctrl]+[F5] to see your changes.';
}
contacts.xml
<?xml version="1.0"?>
<phonebooks>
<contacts group_name="Dimple" editable="1" id="0">
<contact first_name="Extension" last_name="1000" contact_type="sip">
<numbers>
<number dial="1620" dial_prefix="" label="Extension" primary="1">
</numbers>
</contact>
<contact first_name="George" last_name="Smith" contact_type="sip">
<numbers>
<number dial="1700" dial_prefix="" label="Extension" primary="1">
</numbers>
</contact>
</phonebooks>
