Intermittent Dupicate or triplicate divs in File Browser API using JS, JQuery

Hi SIite Point community,

I am currently creating a file browser list using JS, JQuery and Laravel. Unfortunately, Im experiencing DUplicate and triplicate issue that is intermittent and mostly happening in Chrome especially when I double click the link or pressed the enter very fast and multiple times during the alert confirmation. I am already lacking of idea. I used return false, stopPropagation and preventDefault and place it everywhere I think it would be necessary but I have no success. I also tried to put some checkers if the elements are already existing or appending. But in Firefox it sometimes work. Could you help me understand more what is really going on and how to fix that issue. THank you so much in advance!

$(function(){



          $("#homedirs").delegate("#homefolder", "click", function(event){

                        event.preventDefault();

                        event.stopPropagation(); 

                        var location             = $(this).attr('id');

                        var directory            = $(this).find('img').attr('id');

                        var projectId            = $(this).find('img').attr('class');

                        var mydivs               = $("div a#homefolder");

                        var subDir               = $( this ).find('span').attr('id');

                        var filecheck1                                    = $(this).siblings().is('.contentFolders');

                        var filecheck2                                    = $(this).siblings().is('.contentFiles');



                        getmain(projectId, directory);



                      $("#homedirs").delegate(".contentFolders", "click", function(event){

                                    

                                     var projectId                    = $('#homefolder').find('img').attr('class');

                                    var contentdivs                  = $(".contentFolders");

                          var location                     = $(this).find('a').attr('id');

                          var nextSubDir                   = $(this).attr('id');

                          var parentDirectory              = $(this).find('img').attr('id');

                          var refDirectory                 = $(this).children().attr('class');

                                    var childDirectory               = $(this).attr('id');



                                    var filecheck1                                                               = $(this).children().is('.contentFolders');

                                      var filecheck2                                                                = $(this).children().is('.contentFiles');



                                      // $(document).ready(function(){

                                                    var filecheck3                                                                = $(this).children().next().is('.contentFolders');

                                                    var filecheck4                                                                = $(this).children().next().is('.contentFiles');

                                                    var filecheckFolderA             = ($(this).children().next().attr('id'));

                                                    var filecheckFolderB             = ($(this).children().next().attr('class'));



                                                    alert("CLASS EXIST: " +$(this).children().children().attr('class'));



                                                    // alert("HTML : " +$(this).html());

                                                    // alert("CHECKER: " +$(this).children().next().html());



                                                    // alert("FILECHECK 3 : " + $(this).children().next().attr('id'));

                                                    // alert("FILECHECK 4 : " + $(this).children().next().attr('class'));

                                      

                                                  if(!($(this).children().next().attr('class'))){

                                                  // if(!($(this).children().children().attr('class'))){

                                                  //           alert("FILECHECK 3 : " + $(this).children().next().attr('id'));

                                                                  // alert("FILECHECK 4 : " + $(this).children().next().attr('class'));

                                                                getsub(location, projectId, parentDirectory, childDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);

                                                                return false;

                                                  }



                                    // });

                                                    return false;



                      });

           

                        function getmain (id, mainDirectory){



                                      var dirname = mainDirectory;

                                      var id = id;

                                      getDirectoryList(null, id, dirname);

                        }



                        function getsub (locate, id, mainDirectory, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){



                                      var dirname = mainDirectory;

                                      var id = id;

                                      getDirectoryList(locate, id, dirname, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);

                        }



    function getDirectoryList(locate, id, mainDir, subDir, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){



                  var nextSubDir       = nextSubDir;

                  var filecheck1       = filecheck1; 

                  var filecheck2       = filecheck2;

                  var filecheckFolderA = filecheckFolderA;

                  var filecheckFolderB = filecheckFolderB;

                  var refDirectory     = refDirectory;





                  if(locate){

                                var hostname     = "https://info.tmj.jp/dev2-sync/index.php/getsub/";

                                                    var dirpage      = $.trim(hostname+id+'?dir=/'+mainDir+subDir);

                  }else{

                                var hostname     = "https://info.tmj.jp/dev2-sync/index.php/getsub/";

                                                    var dirpage      = $.trim(hostname+id+'?dir=/'+mainDir);

                  }

                  // alert(dirpage);

                  $.getJSON( dirpage, function(data){



                                                    var directorycount  = [];

                                                    var directories     = [];

                                                    var filedetails     = [];

                                                    var filecount       = [];

                                                    var isCondir        = [];

                                                    var dirNames        = [];

                                                    $.each(data, function(key, val){



                                                                  directorycount.push(val.foldercnt);

                                                                  filecount.push(val.filecnt);

                                                                  isCondir.push(val.dotdotdir);



                                                                  for (var i = 0; i<directorycount; i++){

                                                                                directories.push(foldersDisplay(val.folderDetail[i], val.homefolderName[i]));

                                                                                dirNames.push(val.homefolderName[i]);

                                                                  };

                                                                  for (var i = 0; i<filecount; i++){

                                                                                filedetails.push(filesDisplay(val.fileDetail[i]));

                                                                  };

                                                    });

                                                    

                                                    if (isCondir != "/") {

                                                                  displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB)

                                                    }else{

                                                                  displayHomeDirectories(directories, filedetails)

                                                    }

                                                    

                  });

              }



    function displayHomeDirectories(directories, filedetails){ 



                  for (var i = 0; i < mydivs.length; i++){

                                                    var parentDir = ($(mydivs[i]).find('span').attr('id'));

                                                    if(subDir === parentDir){

                                                                  if((!filecheck1) && (!filecheck2)){

                                                                                $('div a#homefolder')

                                                                                .filter(function( index ){

                                                                                              return index === i;

                                                                                }).after(filedetails)

                                                                                  .after(directories);

                                                                  }                                                                     

                                                    }                                                       

                                      }                    

    }



    function displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){

                 var contentdivs = $("div a#contentFolders").filter('.'+refDirectory);



                 if((!filecheckFolderA) && (!filecheckFolderB)){



                               alert("nextSubDir " + nextSubDir + " DIRECTORY COUNT IS: " + directorycount + " and FILE COUNT" + filecount);

                               if(directorycount == ""){

                                             directorycount = 0;                                                 

                               }else if((filecount == "")){

                                             filecount = 0; 

                               }

                               var documentCounter = parseInt(directorycount) + parseFloat(filecount);

                               alert("Total DOCUMENT CUNT IS: " + documentCounter);



                                for (var i = 0; i<contentdivs.length; i++){

                                                                  var parentDir         = ($(contentdivs[i]).children().next().next().attr('id'));

                                                                  if(nextSubDir === parentDir){

                                                                                if((!filecheck1) && (!filecheck2)){

                                                                                              // $("div a#contentFolders").children('img').addClass("exist");

                                                                                              $("div a#contentFolders").filter('.'+refDirectory).eq(i).after(filedetails).after(directories);

                                                                                              return false;

                                                                                }                                                                                                                                           

                                                                  }                                         

                                                    }

                                      }                    

    }



    function showhide(){

                                      /*If the image is plus. When the sublink is clicked. Below function will change the plus image to minus*/   

                                      if($('.homefolder img#showhide').hasClass('plus')){

                                                    $('.homefolder img#showhide').removeClass('plus');

                                                    $('.homefolder img#showhide').addClass('minus');

                                      }



                                      /*Below image will toggel or hide and show the subdir linnk list.*/

                                      $(".homefolder img").click(function(event){

                                                    event.preventDefault();

                                                    if($('.homefolder img#showhide').hasClass('minus')){

                                                                  $('.homefolder img#showhide').removeClass('minus');

                                                                  $('.homefolder img#showhide').addClass('plus');

                                                                  // var mydivs    = $("div.contentFolders");

                                                                  // for (var i = 0; i < mydivs.length; i++){

                                                                  //           alert(i);

                                                                  //           alert(mydivs);

                                                                  // };

                                                                  // alert($('.contentFolders').children().children().contains('.app'));

                                                                  // var spanid    = $(this).parent().next().parent().attr('id').is(imgId).hide();

                                                                  // var imgId     = $(this).parent().parent().attr('id');

                                                                  // alert("SPAN ID is:" + spanid + "& IMAGE ID is:" + imgId);

                                                                  // alert("TEST:" + ($(spanid).next().attr('class')));

                                                                  // if(spanid === imgId){

                                                                  //                         alert("IMAGE ID is:" + imgId);

                                                                  //                         // $('.contentFolders').hide();

                                                                  //                         var imgId = '#'+imgId;

                                                                  //                         $(this).parent().next().parent().attr('id').is(imgId).hide();     

                                                                  // };

                                                                  // $('.contentFolders').hide();              

                                                                  // $('.contentFiles').hide();

                                                    }else {

                                                                  $('.homefolder img#showhide').removeClass('plus');

                                                                  $('.homefolder img#showhide').addClass('minus');

                                                                  // $('.contentFolders').show();             

                                                                  // $('.contentFiles').show();

                                                    }

                                                    if($('.contentFolders img#showhide').hasClass('plus')){

                                                                  $('.contentFolders img#showhide').removeClass('minus');

                                                                  $('.contentFolders img#showhide').addClass('plus');

                                                                  // $('.contentFolders').hide();              

                                                                  // $('.contentFiles').hide();

                                                    }else {

                                                                  $('.contentFolders img#showhide').removeClass('minus');

                                                                  $('.contentFolders img#showhide').addClass('plus');

                                                                  // $('.contentFolders').show();             

                                                                  // $('.contentFiles').show();

                                                    }

                                                    

                                      });



                        }



                        jQuery.fn.appendEach = function( arrayOfWrappers ){

                  var rawArray = jQuery.map(

                      arrayOfWrappers,

                      function( value, index ){

                          return( value.get() );

                      });

                  this.append( rawArray );

                  return( this );

              };



                        function foldersDisplay(directorynames, newId) {

                                      return (

                                                    $( "<div class='contentFolders' id="+newId+">" + directorynames + "</div>" ).css({"margin-left":"20px"})

                                                    // $("<></input>")

                                      );

                        }



                        function filesDisplay(filenames) {

                                      return (

                                                    $( "<div class='contentFiles'>" + filenames + "</div>" ).css({"margin-left":"20px"})

                                      );

                        }



                        return false;

          });



});

Hi,

Would it be possible that you provide enough code that we can reproduce your issue, or post a link to a site demonstrating the problem you are having?

Hi Pullo,

Thanks for the reply. I will get my code in the office tomorrow and post it here.
Basically, I am trying to create an rsync application where in the employee can easily synchronize their project from development or from one location to other location. I am using JavaScript, Jquery, Laravel as PHP framework, JSON and SQLite. I am currently creating a file browsing list where in the employee can select their project name on a dropdown. Then their respective directory will be shown inside an iframe. The current problem is when I click the a folder or directory, the appended subfolders and documents are intermittently triplicated or duplicated especially in CHrome browser and when I fast click the mouse or enter button in confirming the alert message. Also, when I tried to use the alert function to trace what is going on, in Chrome, the result sometimes display and sometimes not especially when my cheker if the next div or elements are already existing in front of the clicked element.
My code structure was, the subdirectories click function are inside the homefolders directory click function as well. And they both used recursive method.
I am really running out of idea why the behavior is like that. Tomorrow, I am planning to separate the two click function. But Im not really sure if that will work.

Thank you very much;
Warly

Hi Pullo,

Good Morning! Here is my code. I actually separated the two click event yet I am still encountering the same problem.

my Index blade;
@extends(‘layout’)
@section(‘header’)

@stop
@section(‘content’)

<div class="main">
    <!-- <span style="position: absolute; right: 30px; font-weight: bold;"><% $today %></span> -->
    <div id="head">
        <div class="userInfo">
            <h2>Welcome to RSYNC APPLICATION</h2>
            <p> <% $name %> (<% $username %>) <% $structure %></p>
        </div>
        <div class="user_control1">
            <p><a href="<% URL::secure('logoutapi') %>" >ログアウト</a></p>
            <p><a href="<% URL::secure('ContactAdmin') %>" >Contact Administrator</a></p>
        </div>
    </div>
    <hr>            
    <div class="user_control">
        <ul>@if( $id  == 1)
            <li><a href="<% URL::secure('main') %>">ホーム</a></li>
            <li><a href="<% URL::secure('main.projectSelect') %>">Project Select</a></li>
            <li><a href="<% URL::secure('main.lastSync') %>">Sync Details</a></li>
            <li><a href="<% URL::secure('main.fullSync') %>">Sync History</a></li>
            <li><a href="<% URL::secure('addUser') %>">Add User</a></li>
            <li><a href="<% URL::secure('addAnken') %>">Add Anken</a></li>
            <li><a href="<% URL::secure('showLogs') %>">Show Logs</a></li>
            @else
            <li><a href="<% URL::secure('main') %>">ホーム</a></li>
            <li><a href="<% URL::secure('main.projectSelect') %>">Project Select</a></li>
            <li><a href="<% URL::secure('main.lastSync') %>">Sync Details</a></li>
            <li><a href="<% URL::secure('main.fullSync') %>">Sync History</a></li>
            @endif
        </ul>
    </div>            
    <hr>

    <!-- <iframe id="addUser" src="<% URL::secure('addUser') %>"></iframe> -->

    <!-- <iframe id="addAnken" src="<% URL::secure('addAnken') %>"></iframe> -->

    <div class="project">
        <span>Project Name:</span>
        <select onchange="getDisplayPath()">
               <option selected disabled>-----Please Select-----</option>
               @foreach($ankenmasters as $anken)
                <!-- <option id="<% $anken->id %>" value="<% $anken->anken_code %>" onclick="document.getElementById('idisplay').contentWindow.getDisplayPath(this.id)"><% $anken->anken_name %></option> -->
                <option id="<% $anken->id %>" value="<% $anken->id %>"><% $anken->anken_name %></option>
               @endforeach
        </select>
    </div>
    <br>
    <div class="infowindow">
        <div class="display_source">            
            <span><h2>Source</h2></span>
            <div> 

                <hr class="hr_display">
                <iframe id="idisplay" src="<% URL::secure('display') %>" marginheight="1" marginwidth=1 frameborder=0></iframe>
                <hr class="hr_display">
            </div>
        </div>
        <div class="display_destination">
            <span><h2>Destination</h2></span>
            <div> 
                <hr class="hr_display">
                <!-- <p id="demo"></p> -->
                <iframe id="idisplay" src="<% URL::secure('display') %>" marginheight="1" marginwidth=1 frameborder=0></iframe>
                <hr class="hr_display">
            </div>
            <br>
        </div>
    </div>
    <div id="btnfield">
        <input class="btn" type="button" value="SYNC"></input>
    </div>
</div>
@stop

@section('script')
<script src="<% URL::secureAsset('js/jquery-1.11.3.min.js') %>"></script> 
<script src="<% URL::secureAsset('js/function.js') %>"></script>
@stop

My DISPLAY BLADE:

@extends(‘layout’)
@section(‘header’)




@stop
@section(‘content’)


Directory Listing of:




File

Size

Last Modified







@stop
@section('script')

@stop

Thanks and best regards,
Warly

CONTINUATION:

MY CONTROLLERS;

<?php class DisplayController extends \BaseController { /*::::Function that dispay iframe just returning the display.blade.php in view main::::*/ public function displayIframe(){ return View::make('main.display'); } /****END OF DISPLAY IFRAME FUNCTION****/ /*:::::::::::::::::::::::::Display Default directory inside Anken Src Path:::::::::::::::::::::::::::::::::::::::::*/ public function getpath($ankenId=null){ /*::::Get anken ID and its value from database using eloquent model ANKEN Master. Put value in object by foreach::::*/ if(is_null($ankenId)) { return AnkenMaster::findOrfail($ankenId); } $data = AnkenMaster::where('id', '=', $ankenId)->get(); foreach ($data as $key => $value) { $id = $value->id; $anken_code = $value->anken_code; $anken_name = $value->anken_name; $anken_src_path = $value->anken_src_path; $anken_dest_path = $value->anken_dest_path; $anken_url = $value->anken_url; } /****End of getting values from data base****/ /*::::Global Variable initializations::::*/ $showthumbnails = true; $showdirs = true; $displayindex = false; // $forcedownloads = true; // $allowuploads = false; $startdir = $anken_src_path; $hide = array( 'dlf', 'index.php', 'Thumbs', '.htaccess', '.htpasswd' ); $indexfiles = array ( 'index.html', 'index.htm', 'default.htm', 'default.html' ); $filetypes = array ( 'png' => 'jpg.gif', 'jpeg' => 'jpg.gif', 'bmp' => 'jpg.gif', 'jpg' => 'jpg.gif', 'gif' => 'gif.gif', 'zip' => 'archive.png', 'rar' => 'archive.png', 'exe' => 'exe.gif', 'setup' => 'setup.gif', 'txt' => 'text.png', 'htm' => 'html.gif', 'html' => 'html.gif', 'fla' => 'fla.gif', 'swf' => 'swf.gif', 'xls' => 'xls.gif', 'xlsx' => 'xls.gif', 'doc' => 'doc.gif', 'sig' => 'sig.gif', 'fh10' => 'fh10.gif', 'pdf' => 'pdf.gif', 'psd' => 'psd.gif', 'rm' => 'real.gif', 'mpg' => 'video.gif', 'mpeg' => 'video.gif', 'mov' => 'video2.gif', 'avi' => 'video.gif', 'eps' => 'eps.gif', 'gz' => 'archive.png', 'asc' => 'sig.gif', ); $getDir = (Input::get('dir')); $getSort = (Input::get('sort')); $getOrder = (Input::get('order')); /****End of variable initializations****/ /*::::Turn off all error reporting::::*/ error_reporting(0); /*::::Checking if Directory. If directory, sets dirOK and dotdotDir which is being used in showContent JS in conDir::::*/ if($getDir){ if(substr($getDir, -1, 1)!='/') { $getDir = strip_tags($getDir) . '/'; } $dirok = true; $dirnames = split('/', strip_tags($getDir)); for($di=0; $di<sizeof($dirnames); $di++) { if($di<(sizeof($dirnames)-2)){ $dotdotdir = $dotdotdir . $dirnames[$di] . '/'; } if($dirnames[$di] == '..'){ $dirok = false; } } if(substr($getDir, 0, 1)=='/'){ $dirok = false; } if($dirok) { $startdir = $startdir . strip_tags($getDir); } } /****End of get directory****/ /*::::Clears file status cache::::*/ clearstatcache(); /*::::Openning a directory, read and checking if file or directory.::::*/ if ($handle = opendir($startdir)){ while (false !== ($file = readdir($handle))){ if ($file == "." || $file == "..") continue; $discard = false; /*::::hiding of files::::*/ for($hi=0;$hi' .$fileSize. ''.$newfolderName.'' .$date .''; $foldercnt = count($folderDetail); $homefolderName[] = str_replace('/', '', $folderName); if($class=='b') $class='w'; else $class = 'b'; } /****End of all Folder or Directory displaying****/ /*::::For FILE looping.::::*/ $arsize = sizeof($files); for($i=0;$i<$arsize;$i++) { $filename = $files[$i]; if(strlen($filename)>43){ $filename = substr($files[$i], 0, 40) . '...'; } $fileurl = $startdir . $files[$i]; // if(FILE RSYNC) { // CODE HERE // } $fileList = $fileurl; $altFile = $files[$i]; $fileName[] = $filename; $fileSize = round(filesize($startdir.$files[$i])/1024) . 'KB'; $filedate = date ("Y/m/d H:i:s", filemtime($startdir.$files[$i])); $fileDetail[] = '' .$fileSize. ' ' .$filename.'&nbsp &nbsp &nbsp &nbsp &nbsp' .$filedate.''; $filecnt = count($fileDetail); if($class=='b') $class='w'; else $class = 'b'; } /****End of all FILE displaying****/ } /*::::Making all values available for JSON calls by putting into an OBJECT array.::::*/ $parameters[] = array( 'startdir' => $startdir, 'files' => $files, 'dotdotdir' => $dotdotdir, 'id' => $id, 'anken_code' => $anken_code, 'anken_name' => $anken_name, 'anken_src_path' => $anken_src_path, 'anken_dest_path' => $anken_dest_path, 'anken_url' => $anken_url, 'homeDir' => $homeDir, 'dirHost' => $dirHost, 'varDirListing ' => $varDirListing, 'folderName' => $folderName, 'fileName' => $fileName, 'fileSize' => $fileSize, 'filedate' => $filedate, 'class' => $class, 'folderDetail' => $folderDetail, 'fileDetail' => $fileDetail, 'filecnt' => $filecnt, 'foldercnt' => $foldercnt, 'dirok' => $dirok, 'moveDir' => $moveDir, 'arsize' => $arsize, 'folderHref' => $folderHref, 'newfolderName' => $newfolderName, 'homefolderName' => $homefolderName ); /*::::Returing the response as JSON parameters usig the parameter array in line 257::::*/ return Response::json($parameters); } /****END OF GET PATH FUNCTION****/ /*:::::::::::::::::::::::::GET sub directories function calls:::::::::::::::::::::::::::::::::::::::::*/ public function getsub($id= null){ /*::::Get anken ID and its value from database using eloquent model ANKEN Master. Put value in object by foreach::::*/ if(is_null($id)){ return; } $data = AnkenMaster::where('id', '=', $id)->get(); foreach ($data as $key => $value){ $id = $value->id; $anken_code = $value->anken_code; $anken_name = $value->anken_name; $anken_src_path = $value->anken_src_path; $anken_dest_path = $value->anken_dest_path; $anken_url = $value->anken_url; } /****End of getting values from data base****/ /*::::Global Variable initializations::::*/ $subDir = (Input::get('dir')); $getSort = (Input::get('sort')); $getOrder = (Input::get('order')); $getDownload = (Input::get('download')); $showthumbnails = true; $showdirs = true; // $forcedownloads = true; $displayindex = false; // $allowuploads = false; // $overwrite = true; $startdir = $anken_src_path.$subDir; $hide = array( 'dlf', 'index.php', 'Thumbs', '.htaccess', '.htpasswd' ); $indexfiles = array ( 'index.html', 'index.htm', 'default.htm', 'default.html' ); $filetypes = array ( 'png' => 'jpg.gif', 'jpeg' => 'jpg.gif', 'bmp' => 'jpg.gif', 'jpg' => 'jpg.gif', 'gif' => 'gif.gif', 'zip' => 'archive.png', 'rar' => 'archive.png', 'exe' => 'exe.gif', 'setup' => 'setup.gif', 'txt' => 'text.png', 'htm' => 'html.gif', 'html' => 'html.gif', 'fla' => 'fla.gif', 'swf' => 'swf.gif', 'xls' => 'xls.gif', 'xlsx' => 'xls.gif', 'doc' => 'doc.gif', 'sig' => 'sig.gif', 'fh10' => 'fh10.gif', 'pdf' => 'pdf.gif', 'psd' => 'psd.gif', 'rm' => 'real.gif', 'mpg' => 'video.gif', 'mpeg' => 'video.gif', 'mov' => 'video2.gif', 'avi' => 'video.gif', 'eps' => 'eps.gif', 'gz' => 'archive.png', 'asc' => 'sig.gif', ); /****End of variable initializations****/ /*::::Turn off all error reporting::::*/ error_reporting(0); /*::::Appending slash to the start directory::::*/ if((substr($startdir, -1, 1)!='/') && $startdir!='') $startdir = $startdir . '/'; /*::::Checking if Sub Directpry. If directory, sets dirOK and dotdotDir which is being used in showContent JS in conDir::::*/ if($subDir){ if(substr($subDir, -1, 1)!='/'){ $subDir = strip_tags($subDir) . '/'; } $dirok = true; $dirnames = split('/', strip_tags($subDir)); for($di=0; $di<sizeof($dirnames); $di++){ if($di<(sizeof($dirnames)-2)) { $dotdotdir = $dotdotdir . $dirnames[$di] . '/'; } if($dirnames[$di] == '..') { $dirok = false; } } if(substr($subDir, 0, 1)=='/'){ $dirok = false; } if($dirok){ $startdir = $startdir . strip_tags($subDir); } } /****End of get SUB Directory****/ /*::::Clears file status cache::::*/ clearstatcache(); /*::::Openning a directory, read and checking if file or directory.::::*/ if ($handle = opendir($startdir)){ while (false !== ($file = readdir($handle))){ if ($file == "." || $file == "..") continue; $discard = false; /*::::hiding of files::::*/ for($hi=0;$hi' .$fileSize. ' '.$newfolderName. '' .$date .''; // $folderDetail[] = '' .$fileSize. ' '.$newfolderName. '' .$date .''; // $folderDetail[] = '' .$fileSize. ' '.$newfolderName. '' .$date .''; $folderDetail[] = '' .$fileSize. ' '.$newfolderName. '' .$date .''; $foldercnt = count($folderDetail); $homefolderName[] = str_replace('/', '', $folderName); if($class=='b') $class='w'; else $class = 'b'; } /****End of all Folder or Directory displaying****/ /*::::For FILE looping.::::*/ $arsize = sizeof($files); for($i=0;$i<$arsize;$i++) { if($filetypes[$ext]) { $icon = $filetypes[$ext]; } $filename = $files[$i]; if(strlen($filename)>43) { $filename = substr($files[$i], 0, 40) . '...'; } $fileurl = $startdir. $files[$i]; $fileList = $fileurl; $altFile = $files[$i]; $fileName[] = $filename; $fileSize = round(filesize($startdir.$files[$i])/1024) . 'KB'; $filedate = date ("Y/m/d H:i:s", filemtime($startdir.$files[$i])); // $fileDetail[] = '' .$fileSize. ' ' .$filename.'&nbsp &nbsp &nbsp &nbsp &nbsp' .$filedate.''; // $fileDetail[] = '' .$fileSize. ' ' .$filename.'&nbsp &nbsp &nbsp &nbsp &nbsp' .$filedate.''; $fileDetail[] = '' .$fileSize. ' ' .$filename.'&nbsp &nbsp &nbsp &nbsp &nbsp' .$filedate.''; $filecnt = count($fileDetail); if($class=='b') $class='w'; else $class = 'b'; } /****End of all FILE displaying****/ } /*::::Making all values available for JSON calls by putting into an OBJECT array.::::*/ $subContents[] = array( 'startdir' => $startdir, 'files' => $files, 'hide' => $hide, 'dotdotdir' => $dotdotdir, 'filetypes' => $filetypes, 'id' => $id, 'anken_code' => $anken_code, 'anken_name' => $anken_name, 'anken_src_path' => $anken_src_path, 'anken_dest_path' => $anken_dest_path, 'anken_url' => $anken_url, 'homeDir' => $homeDir, 'dirHost' => $dirHost, 'varDirListing ' => $varDirListing, 'folderName' => $folderName, 'fileName' => $fileName, 'fileSize' => $fileSize, 'filedate' => $filedate, 'class' => $class, 'folderDetail' => $folderDetail, 'fileDetail' => $fileDetail, 'filecnt' => $filecnt, 'foldercnt' => $foldercnt, 'dirok' => $dirok, 'moveDir' => $moveDir, 'arsize' => $arsize, 'folderHref' => $folderHref, 'subDir' => $subDir, 'host' => $host, 'homefolderName' => $homefolderName, 'refDir' => $refDir ); /*::::Returing the response as JSON parameters usig the parameter array in line 569::::*/ return Response::json($subContents); } /****END OF GET SUB DIRECTORY FUNCTION****/ } -------------------------------------------------------------------------------------------------------------------------------------------------

my function.js that display the home directory of the selected project.

function getDisplayPath(){

/*Below are variables declared for shortcut copntrol on iframe*/
var iframe                     = $("#idisplay").contents().find("span.data");
var href_src                   = $("#idisplay").contents().find("a#src_path");
var adirUp                     = $("#idisplay").contents().find("a#dirUp");
var dirUpImg                   = $("#idisplay").contents().find("a#dirUp img");
var displayContent             = $("#idisplay").contents().find("a#displayContent");
var displayImg                 = $("#idisplay").contents().find("img#folder");
var fileList                   = $("#idisplay").contents().find("a#fileList");
var filesize                   = $("#idisplay").contents().find("span#filesize");
var filedate                   = $("#idisplay").contents().find("span#filedate");
var filenames                  = $("#idisplay").contents().find("span#filename");
var fileListIcon               = $("#idisplay").contents().find("img#icon");
var dirUp                      = $("#idisplay").contents().find("div#dirUp");
var foldersdetail              = $("#idisplay").contents().find("div#homedirs");
var subfolders              = $("#idisplay").contents().find("div#homefolder");
var filesdetail                = $("#idisplay").contents().find("div#homefiles");
var anken_id                   = $("select option:selected").val();
var hostname                   = "https://info.tmj.jp/dev2-sync/index.php/getpath/";
var datapage                   = hostname + anken_id;

    $.getJSON( datapage, function( data ) {
      var items        = [];
      var foldercount  = [];
      var folders      = [];
      var filedetails  = [];
      var filecount    = [];
      // var divId        = [];

      $.each( data, function( key, val ) {
         items.push('<a>' + val.anken_src_path + '<br>');
         foldercount.push(val.foldercnt);
         filecount.push(val.filecnt);
         // fileType.push(folderImage(val.imageSrc.folder));            
         // alert(val.imageSrc.folder);
            for (var i = 0; i<foldercount; i++) {
                 // folders.push(val.folderDetail[i]);
                 folders.push(foldersDisplay(val.folderDetail[i], val.homefolderName[i]));
                 // divId.push(addDivId(val.newfolderName[i]));
                 
            };
            for (var i = 0; i<filecount; i++) {
                  // alert(i);
                  // alert(val.fileDetail[i]);
                  filedetails.push(filesDisplay(val.fileDetail[i]));
             };
          });

        if($(anken_id).change()){
            $(iframe).empty();
            $( "<a>", {
                  "class": "my-new-list",
                  html: items.join('')
            }).appendTo(iframe).html();

            $(foldersdetail).empty();
            $(foldersdetail).appendEach(folders);
            // $(foldersdetail).appendEach(divId);


            $(filesdetail).empty();
            $(filesdetail).appendEach(filedetails);    

            // var sublinkDiv = $(foldersdetail).find("div#sublink")
            // for (var i = 0; i < sublinkDiv.length; i++) {
            //     // alert(sublinkDiv.length);
            //     return $(foldersdetail).find("div#sublink a").prepend(fileType);
            // }

                    
            
        }        

});

    // JQUERY PLUGIN: I append each jQuery object (in array of
    // jQuery objects) to the currently selected collection.
    jQuery.fn.appendEach = function( arrayOfWrappers ){

        // Map the array of jQuery objects to an array of
        // raw DOM nodes.
        var rawArray = jQuery.map(
            arrayOfWrappers,
            function( value, index ){

                // Return the unwrapped version. This will return
                // the underlying DOM nodes contained within each
                // jQuery value.
                return( value.get() );

            }
        );

        // Add the raw DOM array to the current collection.
        this.append( rawArray );

        // Return this reference to maintain method chaining.
        return( this );

    };        

    function foldersDisplay(foldernames, newId) {

        return (
               // $("<div class='homefolder'>" + foldernames + "</div>")
               $("<div id="+newId+">" + foldernames + "</div>")
           );
    }

    function filesDisplay(filenames) {
        return (
               $( "<div>" + filenames + "</div>" )
           );
    }

    // function folderImage(folderimg){
    //     return(
    //             $("<img src=" +folderimg+ ">")
    //         );
    // }

}


my showcontent.js where I encounter the propblem. This displays all the subdirectories on my directories using recursive function.

$(function(){

$("#homedirs").delegate("#homefolder", "click", function(event){
    event.preventDefault();
    event.stopPropagation(); 
    var location             = $(this).attr('id');
    var directory            = $(this).find('img').attr('id');
    var projectId            = $(this).find('img').attr('class');
    var mydivs               = $("div a#homefolder");
    var subHomeDir           = $( this ).find('span').attr('id');
    var homecheck1              = $(this).siblings().is('.contentFolders');
    var homecheck2              = $(this).siblings().is('.contentFiles');

    getmain(projectId, directory, mydivs, subHomeDir, homecheck1, homecheck2);
});

 $("#homedirs").delegate(".contentFolders", "click", function(event){
     
     var projectId                    = $('#homefolder').find('img').attr('class');
     var contentdivs                  = $(".contentFolders");
     var location                     = $(this).find('a').attr('id');
     var nextSubDir                   = $(this).attr('id');
     var parentDirectory              = $(this).find('img').attr('id');
     var refDirectory                 = $(this).children().attr('class');
     var childDirectory               = $(this).attr('id');

     var filecheck1                       = $(this).children().is('.contentFolders');
    var filecheck2                      = $(this).children().is('.contentFiles');

    // $(document).ready(function(){
        var filecheck3                     = $(this).children().next().is('.contentFolders');
        var filecheck4                     = $(this).children().next().is('.contentFiles');
        var filecheckFolderA             = ($(this).children().next().attr('id'));
        var filecheckFolderB             = ($(this).children().next().attr('class'));

        alert("CLASS EXIST: " +$(this).children().children().attr('class'));

        // alert("HTML : " +$(this).html());
        // alert("CHECKER: " +$(this).children().next().html());

        // alert("FILECHECK 3 : " + $(this).children().next().attr('id'));
        // alert("FILECHECK 4 : " + $(this).children().next().attr('class'));
    
         if(!($(this).children().next().attr('class'))){
         // if(!($(this).children().children().attr('class'))){
         //     alert("FILECHECK 3 : " + $(this).children().next().attr('id'));
            // alert("FILECHECK 4 : " + $(this).children().next().attr('class'));
             getsub(location, projectId, parentDirectory, childDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);
             return false;
         }

     // });
        return false;

 });

function getmain (id, mainDirectory, mydivs, subHomeDir, homecheck1, homecheck2){

    var dirname        = mainDirectory;
    var id                = id;
    var homeFolderDivs = mydivs;

    getDirectoryList(null, id, dirname, homeFolderDivs, subHomeDir, homecheck1, homecheck2);
}

function getsub (locate, id, mainDirectory, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){

    var dirname = mainDirectory;
    var id = id;

    getDirectoryList(locate, id, dirname, null, null, null, null, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);
}

function getDirectoryList(locate, id, mainDir, homeFolderDivs, subHomeDir, homecheck1, homecheck2, subDir, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){

    var nextSubDir       = nextSubDir;
    var filecheck1       = filecheck1; 
    var filecheck2       = filecheck2;
    var filecheckFolderA = filecheckFolderA;
    var filecheckFolderB = filecheckFolderB;
    var refDirectory     = refDirectory;
    var homeFolderDivs   = homeFolderDivs;


    if(locate){
        var hostname     = "https://info.tmj.jp/dev2-sync/index.php/getsub/";
        var dirpage      = $.trim(hostname+id+'?dir=/'+mainDir+subDir);
    }else{
        var hostname     = "https://info.tmj.jp/dev2-sync/index.php/getsub/";
        var dirpage      = $.trim(hostname+id+'?dir=/'+mainDir);
    }
    // alert(dirpage);
    $.getJSON( dirpage, function(data){

        var directorycount  = [];
        var directories     = [];
        var filedetails     = [];
        var filecount       = [];
        var isCondir        = [];
        var dirNames        = [];
        $.each(data, function(key, val){

            directorycount.push(val.foldercnt);
            filecount.push(val.filecnt);
            isCondir.push(val.dotdotdir);

            for (var i = 0; i<directorycount; i++){
                directories.push(foldersDisplay(val.folderDetail[i], val.homefolderName[i]));
                dirNames.push(val.homefolderName[i]);
            };
            for (var i = 0; i<filecount; i++){
                filedetails.push(filesDisplay(val.fileDetail[i]));
            };
        });
        
        if (isCondir != "/") {
            displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB)
        }else{
            displayHomeDirectories(directories, filedetails, homeFolderDivs, subHomeDir, homecheck1, homecheck2)
        }
        
    });
}

function displayHomeDirectories(directories, filedetails, homeFolderDivs, subHomeDir,  homecheck1, homecheck2){    

    for (var i = 0; i < homeFolderDivs.length; i++){
        var parentDir = ($(homeFolderDivs[i]).find('span').attr('id'));
        if(subHomeDir === parentDir){
            if((!homecheck1) && (!homecheck2)){
                $('div a#homefolder')
                .filter(function( index ){
                    return index === i;
                }).after(filedetails)
                  .after(directories);
            }                    
        }                
    }              
}

function displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){
     var contentdivs = $("div a#contentFolders").filter('.'+refDirectory);

     if((!filecheckFolderA) && (!filecheckFolderB)){

         alert("nextSubDir " + nextSubDir + " DIRECTORY COUNT IS: " + directorycount + " and FILE COUNT" + filecount);
         if(directorycount == ""){
             directorycount = 0;                     
         }else if((filecount == "")){
             filecount = 0; 
         }
         var documentCounter = parseInt(directorycount) + parseFloat(filecount);
         alert("Total DOCUMENT CUNT IS: " + documentCounter);

        for (var i = 0; i<contentdivs.length; i++){
            var parentDir = ($(contentdivs[i]).children().next().next().attr('id'));
            if(nextSubDir === parentDir){
                if((!filecheck1) && (!filecheck2)){
                    // $("div a#contentFolders").children('img').addClass("exist");
                    $("div a#contentFolders").filter('.'+refDirectory).eq(i).after(filedetails).after(directories);
                    return false;
                }                                        
            }            
        }
    }              
}

function showhide(){
    /*If the image is plus. When the sublink is clicked. Below function will change the plus image to minus*/    
    if($('.homefolder img#showhide').hasClass('plus')){
        $('.homefolder img#showhide').removeClass('plus');
        $('.homefolder img#showhide').addClass('minus');
    }

    /*Below image will toggel or hide and show the subdir linnk list.*/
    $(".homefolder img").click(function(event){
        event.preventDefault();
        if($('.homefolder img#showhide').hasClass('minus')){
            $('.homefolder img#showhide').removeClass('minus');
            $('.homefolder img#showhide').addClass('plus');
            // var mydivs    = $("div.contentFolders");
            // for (var i = 0; i < mydivs.length; i++){
            //     alert(i);
            //     alert(mydivs);
            // };
            // alert($('.contentFolders').children().children().contains('.app'));
            // var spanid    = $(this).parent().next().parent().attr('id').is(imgId).hide();
            // var imgId     = $(this).parent().parent().attr('id');
            // alert("SPAN ID is:" + spanid + "& IMAGE ID is:" + imgId);
            // alert("TEST:" + ($(spanid).next().attr('class')));
            // if(spanid === imgId){
            //         alert("IMAGE ID is:" + imgId);
            //         // $('.contentFolders').hide();
            //         var imgId = '#'+imgId;
            //         $(this).parent().next().parent().attr('id').is(imgId).hide();    
            // };
            // $('.contentFolders').hide();    
            // $('.contentFiles').hide();
        }else {
            $('.homefolder img#showhide').removeClass('plus');
            $('.homefolder img#showhide').addClass('minus');
            // $('.contentFolders').show();    
            // $('.contentFiles').show();
        }
        if($('.contentFolders img#showhide').hasClass('plus')){
            $('.contentFolders img#showhide').removeClass('minus');
            $('.contentFolders img#showhide').addClass('plus');
            // $('.contentFolders').hide();    
            // $('.contentFiles').hide();
        }else {
            $('.contentFolders img#showhide').removeClass('minus');
            $('.contentFolders img#showhide').addClass('plus');
            // $('.contentFolders').show();    
            // $('.contentFiles').show();
        }
        
    });

}

jQuery.fn.appendEach = function( arrayOfWrappers ){
    var rawArray = jQuery.map(
        arrayOfWrappers,
        function( value, index ){
            return( value.get() );
        });
    this.append( rawArray );
    return( this );
};

function foldersDisplay(directorynames, newId) {
    return (
        $( "<div class='contentFolders' id="+newId+">" + directorynames + "</div>" ).css({"margin-left":"20px"})
        // $("<></input>")
    );
}

function filesDisplay(filenames) {
    return (
        $( "<div class='contentFiles'>" + filenames + "</div>" ).css({"margin-left":"20px"})
    );
}

return false;

});

Thanks once again,
Warly

Hi Pullo,

Good Morning! I noticed that the duplicate happens during fast clicking of mouse. It seems that the loading of DOM or appended elements are too sow for a mouse click event result for the checker to be bypassed. I tried preventing double click but it is still not working. Here is my code for double click event handler.

$(“*”).dblclick(function(e){
e.preventDefault();
});

Have a great day!

Thanks and best regrds,
Warly

This is where you’ll be wanting a technique called debounce, which ensures that a function is called only ones per x number of milliseconds.

See Stop Clicking that Mouse! Event Debounce with Underscore.js for further good details about it.

1 Like

Hi,

Sorry for the late reply. I was tied up.
Basically, what Paul says ^^

Hi Paul,

Thank you so much for the reply. I will explore on this. I think this wil be my best solution as I tried to used document onload and document ready or selector.onload in Jquery but still the fast mouse click is bypassing them.

I will let you know once I am done. :smile:

Have a great day!

Best regards,
Warly

Hi Pullo,

THanks as well. This is really a great community as everyone is very open and helpful. I will contribute as well to the best I can.

Have a great day!

Best regards,
Warly

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.