Ajout d'une ligne spécifique d'un fichier à un élément de liste avec jquery

Je récupère certaines valeurs d'une base de données et les enregistre dans un fichier. J'ai une liste avec un identifiant dans chaque élément li.Ajout d'une ligne spécifique d'un fichier à un élément de liste avec jquery

Lorsque je clique sur un élément, je veux ajouter la ligne du fichier qui est égale à l'identifiant sur lequel je viens de cliquer.

J'ai un exemple:

<li id="test1">just test </li>

Il y a une valeur test1 dans une ligne dans le fichier. Je veux ajouter la valeur quand je clique dessus.

$(document).ready(function() { 


      $.get("serverResource", function(data){ 
         $('#test1').click(function() { 
            $('#test1').append(data); 
        });

Le problème est que data contient l'ensemble des données de fichier et non pas seulement une ligne. Comment puis-je obtenir une ligne à partir du fichier, puis vérifier la valeur avec l'ID et s'il est vrai l'ajouter?

Source

2010-09-02 mt0s

-vous avoir un exemple de ce à quoi ressemble la ligne dans le fichier? Et à quoi ressemblent les données renvoyées? –

les données dans le fichier sont juste texte et ligne1: test1, ligne2: test2 etc ... Donc quand je clique sur l'élément de test li je veux à côté du texte "juste tester" pour ajouter un texte "test1". La façon dont je le fais quand je clique sur un élément li j'ai toutes les données du fichier ajouté à côté du texte "juste test" ... J'ai besoin de quelque chose pour prendre everyline du fichier et le comparer avec le id donc quand il est vrai d'imprimer juste la ligne ... – mt0s

si vos données de test ressemble à ceci:

test1 
test2 
test3 
test4

et de la ligne X correspondens à li X, vous pouvez lire le contenu du fichier que vous chargez via AJAX dans un tableau javascript en divisant les lignes et insérer les données comme ceci:

<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>

Ceci est seulement une bonne approche si votre fichier de données ne contient pas des centaines de lignes grandes et longues. La lecture de beaucoup de données dans un tableau javascript consomme beaucoup de mémoire.

Si vous avez beaucoup de données, vous devez utiliser la logique Serverside pour extraire la ligne du fichier:

  <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>

Et fetchline.php pourrait ressembler à ceci (simplifié):

<?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];

Source

2010-09-02 12:23:19 Max

Ajout d'une ligne spécifique d'un fichier à un élément de liste avec jquery

Répondre

Questions connexes