Dynamically add divs to HTML page and get its contents

Dynamically add divs to HTML page and get its contents

Hi

I've just started using JQuery and this may actually be a bit of a hard question to answer.

There is a project called Seed which allows JavaScript programs to run on the Linux desktop. There is connected project called SeedKit which runs HTML files as a Graphical User Interface front end for JavaScript files run by Seed. It acts like a webpage which rather than linked to a web-server is linked to a JavaScript program with HTML events like buton clicks etc that drives JavaScript much in the same way as normal desktop Graphical toolkits do. I hope this page from my blog starts a bit.

http://alsaf1.wordpress.com/2010/05/07/275/

Both projects are quite new so is very experimental. I am not involved in the development of any of the projects but I am trying to create a few examples to show how it works. My first example is to take the contents of the log folder /var/log, display it in the SeedKit HTML file and when a user clicks on it, it displays the contents of the log file.

The way I am going about this is firstly to create a two column table in the HTML thus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="./log.css" type="text/css" media="all" />
  <script src="./jquery-1.4.2.min.js"></script>
    <!-- Change script name here -->
    <script src="./log.js"></script>
</head>
<body>
<table summary="Main part of file" class="main" cellspacing="0">
<tr>
    <td class="files">List of files</td>
        <div id="file_main"></div>
        <td class="contents">Contents of log</td>
        </tr>
</table>
</body>
</html>

Secondly, the JavaScript file, gets the contents of the folder via the introspected Gnome Gio library and place it into the first column of tables as divs.

// log.js

function populate_file_class(){

    var Gio = imports.gi.Gio;

    // Get contents of folder /var/log
    file = Gio.file_new_for_path("/var/log");
    enumerator = file.enumerate_children("standard::name,standard::size");

    // Add contents of folder to divs on log.html
    while ((child = enumerator.next_file())) {
        var div_contents = "<div>" + child.get_name() + "</div>"
        var div = $(div_contents);
        div.attr('id', child.get_name());
        $("#file_main").append(div)
    }
}

$(document).ready(function(){

    // Call function to populate log.html
    populate_file_class();

    // Click on div to display its contents
    $(this).click(function(event){
        Seed.print ($(this).val());
        a = $(this).attr("id");
    });
});

The table on the HTML file is populated with the file names but I can't get the contents of the specific div I have clicked on. I tried $(this).text() but it displays all the text in the table. I wonder if anyone can help?