How to find a file with javascript?

Question

My app is looking into a folder and then show all folders and html file inside it in a dropdown menu, and display any html files inside an iframe. I have a file called "highlighted.html" which I don't want to show in the dropdown menu, but if it is in the current directory I do want to show it automatically in an iframe.

This is my code to show what is in folder:

• First function create a dropdown box loading dynamically folders or files (with html extension).

• In second function: if click on an existing subfolder, then open that folder and look inside for html file(s) to open it in a iframe

   function rendSelects($currentSelectItem, strPath) { var currentSelectLevel = (null === $currentSelectItem ? -1 : parseInt($currentSelectItem.attr('data-selector-level'))), nextOneSelectorHtml = '<select ' + 'class="dropdown selectpicker" ' + 'name="dd" ' + 'data-selector-level="' + (currentSelectLevel + 1) + '" ' + 'data-path="' + strPath + '" ' + 'onchange="onFsSelectChange(this)"' + '><option text selected> -- select an option -- </option>'; $('div.selectors-container select.dropdown').each(function (i, el) { if (parseInt(el.getAttribute('data-selector-level')) > currentSelectLevel) { el.parentNode.removeChild(el); $(el).selectpicker('destroy'); } }); if (fsStructure[strPath].subfolders.length > 0) { for (var i = 0; i < fsStructure[strPath].subfolders.length; i++) { nextOneSelectorHtml += '<option ' + 'class="subfolder-option" ' + 'data-subfolder="' + fsStructure[strPath].subfolders[i] + '" >' + fsStructure[strPath].subfolders[i] + '</option>'; } } if (fsStructure[strPath].subshtmls.length > 0) { for (var i = 0; i < fsStructure[strPath].subshtmls.length; i++) { nextOneSelectorHtml += '<option ' + 'class="html-page-option" ' + 'data-html-page-name="' + fsStructure[strPath].subshtmls[i] + '">' + fsStructure[strPath].subshtmls[i] + '</option>'; } } nextOneSelectorHtml += '</select>'; $('div.selectors-container').append(nextOneSelectorHtml); $('div.selectors-container').trigger('dropdownadded.mh'); } function onFsSelectChange(el) { var currentSelectorPath = el.getAttribute('data-path'), selectedOption = el.options[el.selectedIndex]; if (selectedOption.classList.contains('subfolder-option')) { loadFolderStructure(currentSelectorPath + '/' + selectedOption.getAttribute('data-subfolder'), $(el)) } if (selectedOption.classList.contains('html-page-option')) { playSwf(currentSelectorPath + '/' + selectedOption.getAttribute('data-html-page-name')); } } 

I have provided a working demo at http://tdhtestserver.herobo.com/ .

SOLVED

Answer 1

Well. If highlighted.html does exist in folder, no select constitution. Let's display an iFrame with src=highlighted.html IIUC . Am I OK ?

First function create a dropdown boxes where it load dynamically folders or files with html extension. Ok, so let's check if highlighted.html is here.

     function rendSelects($currentSelectItem, strPath) {
//here : (begin of change)             
if(strPath.indexOf("hightlighted")>=0) {
                       $("#myiFrame").attr('src', /path/to/highlighted)
                }

    // enfd of change. The continue as  :
    var currentSelectLevel = (null === $currentSelectItem ? -1 : parseInt($currentSelectItem.attr('data-selector-level'))),
        nextOneSelectorHtml =....

Answer 2

ACTUALLY, the matter is to choose between : 1. $(myframeid).attr(src...) AND 2. $('div.selectors-container').append(nextOneSelectorHtml); /// you have to "render" 1 or 2, depending on finding highlighted in or not.

function rendSelects($currentSelectItem, strPath) {
//1of3 // let's add a boolean
var is_highlighted_here = false;
var highlighted_path="";
//done.

    var currentSelectLevel = (null === $currentSelectItem ? -1 : parseInt($currentSelectItem.attr('data-selector-level'))),
    nextOneSelectorHtml =
        '<select ' +
        'class="dropdown selectpicker" ' +
        'name="dd" ' +
        'data-selector-level="' + (currentSelectLevel + 1) + '" ' +
        'data-path="' + strPath + '" ' +
        'onchange="onFsSelectChange(this)"' +
        '><option text selected> -- select an option -- </option>';

    $('div.selectors-container select.dropdown').each(function (i, el) {
        if (parseInt(el.getAttribute('data-selector-level')) > currentSelectLevel) {
            el.parentNode.removeChild(el);
            $(el).selectpicker('destroy');
        }
    });

    if (fsStructure[strPath].subfolders.length > 0) {
        for (var i = 0; i < fsStructure[strPath].subfolders.length; i++) {
            nextOneSelectorHtml +=
                '<option ' +
                'class="subfolder-option" ' +
                'data-subfolder="' + fsStructure[strPath].subfolders[i] + '" >' + fsStructure[strPath].subfolders[i] +
            '</option>';
        }
    }

    if (fsStructure[strPath].subshtmls.length > 0) {
        for (var i = 0; i < fsStructure[strPath].subshtmls.length; i++) {

// 2of3 // oh !! look at here :
if( fsStructure[strPath].subshtmls[i].indexOf("highlighted")>=0 )
{
s_highlighted_here=true;
highlighted_path = fsStructure[strPath].subshtmls[i];
}
//done. scroll to bottom.


            nextOneSelectorHtml +=
                '<option ' +
                'class="html-page-option" ' +
                'data-html-page-name="' + fsStructure[strPath].subshtmls[i] + '">' + fsStructure[strPath].subshtmls[i] +
                '</option>';
        }
    }

    nextOneSelectorHtml += '</select>';
// 3of3 // here finally
  if(is_highlighted_here) {
                       $("#myiFrame").attr('src', highlighted_path);
  }
  else {
    $('div.selectors-container').append(nextOneSelectorHtml);
    $('div.selectors-container').trigger('dropdownadded.mh');
  }

}//function end

Well, if i display only changed : - at the very function start :

 //1of3 
    var is_highlighted_here = false;
    var highlighted_path="";

• when parsing the folder struct :

  // 2of3 // oh !! look at here : if( fsStructure[strPath].subshtmls[i].indexOf("highlighted")>=0 ) { s_highlighted_here=true; highlighted_path = fsStructure[strPath].subshtmls[i]; }

• And finally, when rendering :

  // 3of3 if(is_highlighted_here) { $("#myiFrame").attr('src', highlighted_path); } else { $('div.selectors-container').append(nextOneSelectorHtml); $('div.selectors-container').trigger('dropdownadded.mh'); }

Answer 3

I answer on my question because some of you haven't understood my issue or they don't know how to do it. So I found that was so easy and all i've done was only one line of code.

high( currentSelectorPath + '/'+selectedOption.getAttribute('data-subfolder')+'/highlighted.html');

This line was changed everything, where high is a new iframe

function onFsSelectChange( el ) {
  var 
    currentSelectorPath = el.getAttribute('data-path'),
    selectedOption = el.options[el.selectedIndex];

  if ( selectedOption.classList.contains('subfolder-option') ) {
    loadFolderStructure( currentSelectorPath + '/' + selectedOption.getAttribute('data-subfolder'), $(el) )
    high( currentSelectorPath + '/'+selectedOption.getAttribute('data-subfolder')+'/highlighted.html');
  } 
  if ( selectedOption.classList.contains('html-page-option') ) {
    playSwf( currentSelectorPath + '/' +  selectedOption.getAttribute('data-html-page-name') );
  }

}