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