Geek Answers Handbook

How to find javascript file?

My application views the folder and then shows all the folders and the html file inside it in the drop-down menu and displays any html files inside the iframe. I have a file called "highlight.html" that I do not want to show in the drop-down menu, but if it is in the current directory, I want to show it automatically in the iframe.

This is my code to show what is in the folder:

  • The first function creates a drop-down list, dynamically loading folders or files (with the html extension).

  • In the second function: if you click on an existing subfolder, open this folder and look inside for the html file (s) to open it in an 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 provided a working demo at http://tdhtestserver.herobo.com/ .

solvable

+5
source share
3 answers

I answer my question because some of you do not understand my problem or they do not know how to do it. So I found that it was so simple, and all I did was just one line of code.

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

In this line, everything where high is the new iframe has been changed

 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') ); } }
0
source

Well. If highlight.html exists in the folder, there is no constitution choice. Let an iFrame be displayed with src = highlight.html IIUC. I'm fine?

The first function creates drop-down windows in which it dynamically loads folders or files with the html extension. So let's see if highlight.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 =....
0
source

RESULTING, the question is this: 1. $ (myframeid) .attr (src ...) AND 2. $ ('div.selectors-container'). append (nextOneSelectorHtml); /// you need to "draw" 1 or 2, depending on whether you selected the selection or not.

 function rendSelects($currentSelectItem, strPath) { //1of3 // let 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 just changed the display: - when starting the function itself:

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

  • when parsing the struct folder:

    // 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'); }

0
source

More articles:


All Articles