CKEditor 4
Sat, 07/16/2011 - 01:18
#1
scribe
scribe's picture
Joined: 29/03/2011
Posts: 15

Folders or Files not shown until page is refreshed

I have successfully implemented the CKFinder in my development PC. Everything works well (file upload, file deletion, file view, images appear with the small thumbs, fckeditor integration, etc.).

However, when I deployed it onto my server, everything works well (file upload, file deletion...) except one thing: The CKFinders don't show the folders and the files when the page is initially loaded on my pages. It simply shows the number of files (ex:"3 files").

Then, if click on the "Settings" button at the top of the CKfinder, the folders and the files appear. I don't need to change anything in the Settings. I can simply cancel the operation and my CKfinder shows the folders and the files.
In certain cases, a browser refresh also makes the folders and files appear.

I don't understand why I have such a behavior on my server while it works well on the development PC.
Has anybody else experienced this problem?
Please help with a solution.

Thanks,
Scribe

Details:
- In the root of my project I have two CKFinder folders called "CKFinderBugs" and "CKFinderSpecs" since my application uses two types folder structure depending on which part of the web application is being viewed (Bugtracking or Specifications).
- I have also created specific userfiles directories for the two distinct CKFinders called "userfilesBugs" and "userfilesSpecs" and these directories are also in the root of my project.
- the two respective config.asp have the baseUrl and baseDir variables set to their respective userfile directories.

- the accessControl variable in the two config.asp files allows the view of Folders and Files when the page is loaded in read only mode.
Set accessControl(0) = DefineAccessControlItem("*","*","/", true, false,false,false,true,false,false,false)


- when I allow user to upload files, accessControl allows file operations
Set accessControl(0) = DefineAccessControlItem("*","*","/", true, true,true,true,true,true,true,true)


Other details:
- Application developped in Asp.net 1.1 (VS 2003) on winXP station
- CKFinder package is the ASP version
- Server is Windows Server 2003 R2
Top
Sat, 07/16/2011 - 12:10
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: Folders or Files not shown until page is refreshed

Did you test this in different browsers?

That looks like a rendering problem, so it might be more important to understand that side. Can you send me a private message with an URL to test the problem?
Top
Tue, 07/19/2011 - 03:26
scribe
scribe's picture
Joined: 29/03/2011
Posts: 15

Re: Folders or Files not shown until page is refreshed

Hi,
I have more precisions on my problem.

1) You are correct , the problem seems to be browser related. I have the problem with Internet Explorer 8. I don't have the problem wih Internet Explorer 7 or Firefox (5.0.1).

I have tested on many stations which have IE7 or IE8, accessing both the application on my development PC and the one on the server. I always get the same result. The problem is there with IE8 , and everything works well in IE7.

So the problem has nothing to do with the server or the deployment of the application.

I have also tried to put the lowest security setting in IE8. It doesn't change anything, I still get the problem.

2) My web applications has multiple tabs. The CKFinder is located in one of the tabs (the "Files" tab).
The CKfinder is contained inside an iframe, which is itself inside the "Files" tab. The iframe has for source a slightly modified version of the standalone.html file from the samples. That's how I display my CKFinder.

The MultiPage and Tabstrip controls that I use are the IE Webcontrols.

The "Files" tab is not the one that is initially selected when the application starts.

If I let my web application be totally loaded and then click on the "Files" tab, that's when I get the problem in IE8 (Files and Folders are invisible, Files and Folder pane seem to have 0 height). However, if during the page is being loaded, I quickly click on the "Files" tab, then the CKFinder is displayed properly, showing Folders and Files, even in IE8. Same thing if I make the "Files" tab the selected tab when the application is loaded (everything is displayed properly).

So the problem is with IE8, when the CKFinder is located in a tab which is not selected by default when the application starts.

3) Since I don't want the "Files" tab of my Application to be selected by default, I tried to force a refresh of the CKFinder when the "Files" tab is selected. To do this, on the onclick event of the tabStrip, I try to call the following API javascript function:
frame1.finder.lN.refreshOpenedFolder();
(where "frame1" is the name of the iframe container, and "finder" is the instance of the CKFinder).

However it doesn't do anything, Folders and Files are still invisible.
Note: frame1.finder.lN.getSelectedFolder().name does however return the selected folder.

Any help would be appreciated,

Thanks,
Scribe
Top
Tue, 07/19/2011 - 19:17
scribe
scribe's picture
Joined: 29/03/2011
Posts: 15

Re: Folders or Files not shown until page is refreshed

An image is worth a thousand words.

Example of files and folders not showing in IE8:

Attachments: 

AttachmentSize
Image icon CKFinder not showing Files and Folders in IE88.43 KB
Top
Tue, 07/19/2011 - 21:44
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: Folders or Files not shown until page is refreshed

And it's even better to have code to test :) :

<!DOCTYPE html>
<html>
<head>
   <title>CKFinder - test</title>
   <meta charset=utf-8>
</head>
<body>
   <p>This is the main page including a hidden CKFinder</p>

   <input type="button" value="toggle" onclick="var tab=document.getElementById('tab'); tab.style.display = (tab.style.display == 'none' ? '' : 'none'); return false">
   <div style="display:none; width:100%; height:500px" id="tab">
      <iframe src="standalone.html" style="width:100%; height:500px"></iframe>
   </div>

</body>
</html>

Top
Tue, 07/19/2011 - 22:17
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: Folders or Files not shown until page is refreshed

I'm not sure if a good automatic solution can be found, but meanwhile you can fix it by adding a little extra javascript to your page.
After showing the CKFinder iframe, you just have to resize slightly that iframe and it will readjust the contents:

   <input type="button" value="toggle" onclick="var tab=document.getElementById('tab'); tab.style.display = (tab.style.display == 'none' ? '' : 'none'); var f = document.getElementById('finder');  var redrawFix = f.offsetHeight; f.style.width='99%'; redrawFix = f.offsetHeight; f.style.width='100%'; return false">
   <div style="display:none; width:100%; height:500px" id="tab">
      <iframe src="standalone.html" style="width:100%; height:500px" id='finder'></iframe>
   </div>


with timeout
   <input type="button" value="toggle" onclick="var tab=document.getElementById('tab'); tab.style.display = (tab.style.display == 'none' ? '' : 'none'); window.setTimeout( function() { var f = document.getElementById('finder'); f.style.width='99%'; var redrawFix = f.offsetHeight; f.style.width='100%';}, 0); return false">
   <div style="display:none; width:100%; height:500px" id="tab">
      <iframe src="standalone.html" style="width:100%; height:500px" id='finder'></iframe>
   </div>


Notes:
I've resized the iframe, trying to resize the wrapping div didn't fix it for me
vertical resize didn't work either.
Directly resizing after toggling the visibility doesn't work, you need to force a repaing (the trick is reading f.offsetHeight), or use a timeout (even with a 0 delay)

With this code you should be able to find the best approach for your system.
Top
Wed, 07/20/2011 - 19:03
scribe
scribe's picture
Joined: 29/03/2011
Posts: 15

Re: Folders or Files not shown until page is refreshed

Hi alfonsoml,

1) your test code:
I have tried your test code but it doesn't reproduce the problem in my case. The CKfinder is rendered correctly, even in IE8.
But I still have the problem in my application, or if I add another frame in your test code in which I put as a source my application. The CKFinder still has the same problem in IE8.

However, I am very happy that you have acknowledged my problem and that you are willing to look for a solution.

2) the solution that you have suggested:
Wow, it works! You are brilliant!
I don't think that you can fully understand how happy this solution makes me.
I cannot thank you enough for your help.

Thanks! You're the best.
Scribe
Top
Wed, 07/20/2011 - 19:21
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3737

Re: Folders or Files not shown until page is refreshed

I'm glad that the workaround has worked for you.
I don't know why my testcase didn't fail for you, but that's not important if you can keep on with your project. (the real problem would have been if I couldn't create a testcase to understand what's going on and perform some tests)
Top
Fri, 09/16/2011 - 20:04
djackson
djackson's picture
Joined: 15/09/2011
Posts: 6

Re: Folders or Files not shown until page is refreshed

Hi,
I had the same problem (only in IE8) and the fix works. However, I can't find a reliable way of waiting for ckfinder to render completely before resizing the iframe. The code below seems to work about 80% of the time, but not always. I'm using jquery so I call the function ckFinderIE8Fix() from $(document).ready and it calls itself until there are files in the files_view table (or it gives up after MAX_CKFINDERIE8FIX_RETRIES). Is there a better way to do this?

        function twiddleCKFinderSize()
        {    
            $("#select_file iframe").height($(window).height() - 149); // resize the iframe in ckfinder to fix a bug in IE8
            setTimeout('$("#select_file iframe").height($(window).height() - 150)', 50);
        }
        
        function ckFinderIE8Fix()
        {
            trace($("iframe").contents().find("#files_view table tr"));
           //if ($("iframe").contents().find("#files_view table tr").length > 0) 
           //if (ckfinder && ckfinder.files && ckfinder.files.length > 0)
           if ($("iframe").contents().find("#files_view table tr").length > 0) 
           {
             twiddleCKFinderSize();
             trace("resized ckfinder");
           } else {
                if (ckFinderIE8FixRetries < MAX_CKFINDERIE8FIX_RETRIES)
                {
                    trace("ckFinderIE8Fix retrying");
                    setTimeout("ckFinderIE8Fix()", 500);
                    ckFinderIE8FixRetries++;
                } else {
                    trace("ckFinderIE8Fix max retries exceeded");
                }
           }
        }
Top
Tue, 11/29/2011 - 11:15
tesin11
tesin11's picture
Joined: 28/11/2011
Posts: 4

Re: Folders or Files not shown until page is refreshed

I too am having the same issue. I do not know what is causing the problem but refreshing the page every time to make the files and folders appear is getting really annoying. Anyway, I’ll now try to get past the issue by trying other browsers like Mozilla Firefox.
Top
Sun, 12/04/2011 - 07:29
paulahendricks
paulahendricks's picture
Joined: 04/12/2011
Posts: 1

Re: Folders or Files not shown until page is refreshed

So is the problem really with IE8 or with CKfinder? :?

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check