Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#8744 closed bug (notabug)

Select tags not working on dialog in IE9 (std mode)

Reported by: marcuus Owned by: marcuus
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.24
Keywords: Cc:
Blocked by: Blocking:

Description

I have tried this in jQuery 1.7.3 and 1.8.0. The problem only seems to occur in IE9 in std mode. The problem is when the user pops the dialog then goes to the last tab, the select boxes are unselectable. However if I turn modal off the selects seem to work.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Dialog Test</title>
<link href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css"  rel="stylesheet"/>
<link href="/css/liteaccordion.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/liteaccordion.jquery.min.js"></script>
<script>
$(document).ready(function () {

    $('#filter-dlg').dialog({
        title   : "Test Dialog",
        autoOpen: false,
        width   : 750,
        height  : 650,
        modal   : false,
        buttons : {
            "Close" : function(){ $(this).dialog("close"); }
        }
    });

    $('#accordion').liteAccordion({
        containerWidth:700,
        firstSlide:1,
        autoplay:false
    });

    $('#btnDialog').click(function(){
        $('#filter-dlg').dialog('open');
    });
});
</script>
</head>
<body>

<button type="button" id="btnDialog" class="fg-button ui-state-default fg-button-toggleable ui-corner-all">
    <span class="ui-icon ui-icon-refresh" style="float:left;"></span>Call Dialog
</button>

<div id='filter-dlg'>

    <div id="accordion">
        <ol>
            <li>
                <h2>
                    <span>Slide One</span>
                </h2>
                <div>Panel One</div>
            </li>
            <li>
                <h2>
                    <span>Slide Two</span>
                </h2>
                <div>Panel Two</div>
            </li>
            <li>
                <h2>
                    <span>Slide Three</span>
                </h2>
                <div>Panel Three</div>
            </li>
            <li>
                <h2>
                    <span>Slide Four</span>
                </h2>
                <div>
                    <select id="class" name="class">
                        <option value="-1">Select a Species Class</option>
                        <option value="Deepwater Finfish">Deepwater Finfish</option>
                        <option value="Freshwater Fish">Freshwater Fish</option>
                        <option value="Inshore / Deepwater Finfish">Inshore / Deepwater Finfish</option>
                        <option value="Inshore Finfish">Inshore Finfish</option>
                        <option value="Other">Other</option>
                        <option value="Shellfish">Shellfish</option>
                    </select>
                </div>
            </li>
            <li>
                <h2>
                    <span>Slide Five</span>
                </h2>
                <div>
                    <select id="method" name="method[]" multiple="multiple" size="10">
                        <option value="25">Beach Seine &#47; Drag Net (BS)</option>
                        <option value="23">Bottom Long Line (BLL)</option>
                        <option value="24">Bottom Trawl &#45; Pair (BPT)</option>
                        <option value="26">Bottom Trawl &#45; Single (BT)</option>
                        <option value="27">Cod Pots (CP)</option>
                        <option value="28">Crab Pots (CRP)</option>
                        <option value="31">Dahn Line (DL)</option>
                        <option value="34">Danish Seine (DS)</option>
                        <option value="30">Diving &#45; Free&#47;Snorkel (DIF)</option>
                        <option value="55">Diving &#45; Scuba (DIU)</option>
                        <option value="56">Drag Net</option>
                        <option value="29">Dredge (D)</option>
                        <option value="35">Eel Pot (EP)</option>
                        <option value="37">Fish Traps (FP)</option>
                        <option value="36">Fyke Net (FN)</option>
                        <option value="38">Hand Gathering (H)</option>
                        <option value="39">Hand Line (HL)</option>
                        <option value="57">Hand Pick</option>
                        <option value="32">Inshore Drift Net (DN)</option>
                        <option value="40">Lampara Nets (L)</option>
                        <option value="41">Mechanical Beach Harvester (MH)</option>
                        <option value="42">Midwater Trawl (MW)</option>
                        <option value="43">Octopus Pots (OCP)</option>
                        <option value="33">Pair Danish Seine (DPS)</option>
                        <option value="44">Pole and Line (PL)</option>
                        <option value="45">Potting &#45; Other (POT)</option>
                        <option value="46">Purse Seine (PS)</option>
                        <option value="48">Ring Net (RN)</option>
                        <option value="47">Rock Lobster Pot (RLP)</option>
                        <option value="49">Scoop Net (SCN)</option>
                        <option value="52">Set Net &#45; incl. Gill Net (SN)</option>
                        <option value="13">Spear</option>
                        <option value="50">Squid Jig (SJ)</option>
                        <option value="51">Surface&#47;Midwater Long Line (SLL)</option>
                        <option value="53">Troll (T)</option>
                        <option value="54">Trot Line (TL)</option>
                    </select>
                </div>
            </li>
        </ol>
        <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript>
    </div>
</div>

</body>
</html>

Change History (15)

comment:1 Changed 7 years ago by mikesherov

Owner: set to marcuus
Status: newpending

Thanks for taking the time to contribute to the jQuery UI project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket. Specifically, we don't know the contents of "liteaccordion.jquery.min.js" and so can't create a test case that shows the problem you're having!

Additionally, be sure to test against the git version of both jQuery UI and jQuery to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu) to get started.

comment:2 Changed 7 years ago by marcuus

Status: pendingnew

Hi I have posted a jsFiddle here: http://jsfiddle.net/marcuus/CAzmx/ But I cant get jsFiddle to actually do anything.

Also the website for liteAccordion id here http://nicolahibbert.com/demo/liteAccordion/ I have attached the library to this email.

Also the same issue occurs with zAccordion from here: http://www.armagost.com/zaccordion/

Also it may be relevant that turning modal off in the jqueryui dialog fixes the problem (in both cases).

Regards Mark

comment:3 Changed 7 years ago by mikesherov

Status: newpending

"But I can't get the fiddle to actually do anything."

Thanks for posting that test case, but I'm not sure what that means. Are you saying that you're unable to demonstrate the bug using jsFiddle? Unfortunately, we can't really fix this bug without a clear test case.

Can you try again and let me know if you can get a test case that demonstrates the bug? Thanks again!

comment:4 Changed 7 years ago by marcuus

Status: pendingnew

I cant get jsFiddle to run the accordion. However if you actually bother to run it you will see that the select list are unselectable. I dont understand why you cant run the original code I sent you which demonstrates clearly the bug. I have already spent a lot of time reducing the code so that only the bug is visible.

comment:5 Changed 7 years ago by mikesherov

Status: newpending

If you can't get jsfiddle to run the accordion, how can you expect me to get it running :-) ?

I've opened the fiddle you've sent over in IE9 and could not reproduce the bug that you've described. Even if I could, it looks like it may be a bug in a 3rd party plugin, liteAccordion, which is not something we can debug.

If you can get the jsfiddle to run properly, I will gladly look into the bug, but until then, I'm not sure what more I could do to help.

comment:6 Changed 7 years ago by marcuus

Status: pendingnew

So when you run the fiddle in IE9 std mode you can select items in the select lists because I certainly cant. The same bug must exists in the zAccordion plugin as well?

comment:7 Changed 7 years ago by mikesherov

Status: newpending

I'm not sure what you mean by "std mode", but I assume that's standards mode? It works fine for me.. I can select freshwater fish no problem, and I can select from the select multiple as well.

Actually, I was just now able to sort of repro this in Chrome using your fiddle, but the problem went away when I removed firebug Lite from the demo: http://jsfiddle.net/CAzmx/4/embedded/result/ Can you try that and let me know if that fixes the problem for you?

comment:8 Changed 7 years ago by marcuus

Status: pendingnew

Yes it works here too. But what does that mean? It runs under jsFiddle(?) jsFiddle seems to have a lot of other things going on code beautifiers etc. The problem still exists in the original code.

comment:9 Changed 7 years ago by mikesherov

Resolution: notabug
Status: newclosed

It means you have something else going on in your original code, and if you can not reproduce the issue in jsFiddle, you have a bug somewhere in your own code. Unfortunately, I really can't help you without you proving that a bug exists in isolation. I'm going to close this ticket as not a bug.

However, if you can reproduce this issue in jsFiddle.net or jsbin.com, feel free to create a new issue or reply to this one and we can investigate. Thanks again for going back and forth with me!

comment:10 Changed 7 years ago by marcuus

Why use jsFiddle at all when you cab run the original code I supplied which isolates the bug quite simply.

comment:11 Changed 7 years ago by mikesherov

Several reasons:

  1. It does not use the latest versions of jQuery and jQuery UI. A bug may have been fixed during the last few releases.
  2. It contains relative path references to files that don't exist, and therefore, doesn't run at all and doesn't demonstrate a bug. This is the first thing I tried, which prompted me to ask for a fiddle in the first place.

Again, if you'd like us to investigate the bug, provide a test case somewhere, either JSBin or jsfiddle or anywhere, that demonstrates the bug in isolation. If you can do that, we will gladly look into it. Until then, I literally have no evidence of a bug. I believe you that there might be a bug, but there are 560 other tickets in the system that I'm currently triaging that have valid test cases, and until you can demonstrate a bug in isolation, those tickets are going to be the priority over yours. Sorry.

comment:12 Changed 7 years ago by Scott González

marcuus: Can you test your local code against http://code.jquery.com/ui/jquery-ui-git.js and http://code.jquery.com/ui/jquery-ui-git.css? You're probably having z-index problems which no longer exist in master.

comment:13 Changed 7 years ago by marcuus

Yes that works. When will the z-index fix be published?

comment:14 Changed 7 years ago by Scott González

When 1.10.0 is released, which will be a few months.

comment:15 Changed 7 years ago by marcuus

Im demoing this site next week.

Note: See TracTickets for help on using tickets.