if your test data looks like this:
test1
test2
test3
test4
and line X correspondens to li X, then you could read the content of the file you load via AJAX in a javascript array by splitting the lines and then inserting the data like so:
<html>
<head>
...
<script type="text/javascript">
$(document).ready(function() {
$.get('my_data.txt', function(data) {
var lines = data.split("\n");
$('#root li').click(function() {
var li = $(this);
// find position of the li in the containing ul
// and append the line to the li
var index = $('#root li').index(li);
li.append(lines[index]);
});
});
});
</script>
</head>
<body>
<ul id="root">
<li id="test1">Content 1</li>
<li id="test2">Content 2</li>
<li id="test3">Content 3</li>
<li id="test4">Content 4</li>
</ul>
</body>
</html>
This only is a good approach if your data file does not contain hundreds of large and long lines. Reading that much data in a javascript array consumes a lot of memory.
If you have much data, you should use serverside logic to extract the line from the file:
<script type="text/javascript">
$(document).ready(function() {
$('#root li').click(function() {
var li = $(this);
var index = $('#root li').index(li);
// use this ajax request to let PHP fetch the content of that line
$.get('fetchline.php', 'index=' + index, function(line) {
li.append(line);
});
});
});
</script>
And fetchline.php could look like this (simplified):
<?php
// get the index provided as GET var
$index = intval($_GET['index']);
// read all lines from the data file in an array, not super optimisied,
// but should do for not too large files
$lines = file('my_data.txt');
// print the line with index = $index
print $lines[$index];