'firstItemChecksAll' does not work when open from hidden parent div that is shown

[GoogleCodeExporter]

** What steps will reproduce the problem?
Combining Hidden Example (late ddcl init) from 
http://dropdown-check-list.googlecode.com/svn/trunk/doc/ddcl-tests.html and 
firstItemChecksAll.
(Have a menu that can be hidden or shown and contains the option for the first 
item to select all)

** What is the expected output? What do you see instead?
I implemented it as suggested under the Hidden Example and the menu displays. 
However, when I click on the first item, (all), nothing happens.

** What is your environment?
-- DropDownCheckList version:1.4
-- jQuery version:1.8.14
-- jQuery UI version:1.8.14
-- Browser and version:17.0.963.46

** Please provide any additional information below/Please attach sample
html

The html code that generates the select menu is here:
    <select id="submitFormJobCompletionReportsExitStatus" multiple="multiple">
      <script>
        document.write('<option>(all)</option>');
          for (i = 0; i < franklinExitStatuses.length; i++) {
            document.write('<option>'+franklinExitStatuses[i]+'</option>');
          }
       </script>
     </select>

And the Javascript for creating the dropdownchecklist part of the code is here, 
imbedded in the the hidden/show div elements, which use jQuery.

    case 'Job Completion Reports':        
        $('#tabs-2').find('#jobCompletionReports').slideToggle();
        $('#submitFormJobCompletionReportsExitStatus').dropdownchecklist({ firstItemChecksAll: 'exclusive', emptyText: "Please select...", icon: {}, width: 200, maxDropHeight: 200});
        $('#tabs-2').find('#summaryBankingReports').hide('slow', function(){});
        $('#tabs-2').find('#topTenReports').hide('slow', function(){});
        break;

Original issue reported on code.google.com by congch...@gmail.com on 16 Feb 2012 at 12:24

[GoogleCodeExporter]

I am not sure what is going on here.  I modified the TESTCASE page to use the 
firstItemChecksAll option in the 'hidden parent' example. And the TESTCASE page 
is operating as expected.
Are you getting anything reported in your 'error console' ?

Original comment by womohun...@ittrium.com on 20 Feb 2012 at 3:33

• Changed state: MoreInfo

[GoogleCodeExporter]

Apparently, when I click the 'select all' option, or any option in the list, 

event.layerX and event.layerY are broken and deprecated in WebKit. They will be 
removed from the engine in the near future.

gets printed out on the console. I tried a normal dropdownlist that's not 
imbedded in a hidden div and it works but it prints this statement just as well 
as the dropdownlist that's in the hidden div. However, after googling it, it 
seems to be a jquery bug, so I'm not too sure how that affects dropdownlist's 
ability, as it clearly works when not in the hidden div situation. Nothing else 
gets printed to the console...

Could it be a parent css styling that's affecting this particular div that 
holds the dropdownlist?

Original comment by congch...@gmail.com on 20 Feb 2012 at 10:33

[GoogleCodeExporter]

I found the problem.
You can't use document.write('<option>'+something+'</option>'); to generate the 
first line option. Otherwise, it won't work. You apparently have to use 
<option>all</option> in html instead of generating it through JavaScript

Original comment by congch...@gmail.com on 8 Mar 2012 at 3:19

[GoogleCodeExporter]

Thanks for the follow-up.  

Original comment by womohun...@ittrium.com on 8 Mar 2012 at 2:09

• Changed state: Done