append a specific line from a file to a list element with jquery
I retrieve some values from a DB and save them in a file.
I have a list with an id in every li element.
When I click on an element I want to append the line from the file which is equal to the id I just clicked on.
I have an example:
<li id="test1">just test </li>
There is a test1 value in a line in the file. I want to append the value of it when I click on it.
$(document).ready(function() {
$.get("serverResource", function(data){
开发者_如何学Python $('#test1').click(function() {
$('#test1').append(data);
});
The problem is that data contains the entire file data and not just a line. How can I get a line from the file and then check the value with the id and if it's true append it?
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];
加载中,请稍侯......
精彩评论