Some thing like browsing file in jQuery

Question

I want to create a page, some thing like browsing a file. Now I have this question: I have some links in this page which are folders and files, and an "Open" button. I want when user press a key, the first link (file/folder) started with this character be selected. I also want when user double-clicks on each link or if clicks on each link and press "Open" button, i show the content of selected folder or if this is file the, I want the window to be closed. Now I want to know how can I understand when "Open" button is clicked, which item is selected?

<script type="text/javascript">
        function func(id){
            var label = $('<label/>').text(id).appendTo($('#div_for_labels'));
            $('#div_show').html('waiting...').load('learning/?ajax=true&path='+id);
        }

        $('openButton').click(function(e){
            e.preventDefault();
            ???
        })
    </script>


            <div id="div_for_labels"></div>
            <div id="div_show">
            {% for f_name, f_type in list %}
                    {% if f_type == 'folder' %}
                        <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/folder.jpeg">{{ f_name }}</a></p>
                    {% else %}
                        <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/file.jpeg">{{ f_name }}</a></p>
                    {% endif %}
            {% endfor %}
            </div>
            <div>
                <input type="submit" id="openButton" value="Open">
            </div>

I don't know what script should I write on "Open" button to understand which item is selected and so send its id to my view?

EDIT:
My views.py:

def learning(request):
    if request.is_ajax():
            if 'path' in request.GET:
                # receives list
                return render_to_response("path.html",{'list': list})
            else:
                # receives list
                return render_to_response("learningPath.html",{'list': list})

The first time it goes to "learning.html" page which contains div for labels and "open" button. The other times because of preventing from repeating div for labels and "open" button, it goes to "path.html" which only contains:

{% for f_name, f_type in list %}
                        {% if f_type == 'folder' %}
                            <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/folder.jpeg">{{ f_name }}</a></p>
                        {% else %}
                            <p><a ondblclick="func(this.id)" id="{{ f_name }}" class="res"><img src="/media/img/file.jpeg">{{ f_name }}</a></p>
                        {% endif %}
                {% endfor %}

Answer 1

Do not mix HTML and JavaScript, just do everything with jQuery.

<script type="text/javascript">
$(function() {
   var _loadFile = function(file) {
     if (file.type == 'folder') {
       var label = $('<label/>').text(file.name).appendTo($('#div_for_labels'));
       $('#div_show').html('waiting...').load('learning/?ajax=true&path='+file.name);
     } else {
        // load file here
     }
   };

   var _selectedFile = null;  // nothing selected;

   // using '#div_show' as relative parent, fetch all 'a.res' elements...
   $('a.res', $('#div_show')).live({  // bind now and any future elements
       dblclick: function() {
           var $this = $(this);
           _loadFile($this.data('file'));
       },
       click: function() {
           var $this = $(this);
           $('#div_show a.res.file-selected').removeClass('file-selected'); // remove old selection (if any)
           $this.addClass('file-selected');

           _selectedFile = $this.data('file');
       }
   });

   $('openButton').click(function(e){
      e.preventDefault();

      if (_selectedFile) {
         _loadFile(_selectedFile);
      } else {
         alert("No file selected");
      }
   })
});
</script>

<div id="div_for_labels"></div>
<div id="div_show">
   {% for f_name, f_type in list %}
       <p><a data-file="{'name':'{{ f_name }}', 'type':'{{ f_type }}'}" class="res"><img src="/media/img/{{ f_type }}.jpeg">{{ f_name }}</a></p>
   {% endfor %}
</div>
<div>
   <input type="submit" id="openButton" value="Open">
</div>

Note : I assume that f_type is either folder or file.

** Edit **

Your path.html file should contain only the mentioned HTML chunk like above :

{% for f_name, f_type in list %}
   <p><a data-file="{'name':'{{ f_name }}', 'type':'{{ f_type }}'}" class="res"><img src="/media/img/{{ f_type }}.jpeg">{{ f_name }}</a></p>
{% endfor %}