We help IT Professionals succeed at work.

Jquery UI dialog select box issue in IE

I have jquery ui dialog box which has 3 drop downs, when i launch
the dialog box I can not expand a drop down list but it works in Firefox.


Don not know what the issue is
Comment
Watch Question

Commented:
Post your javascript code and html code
erikTsomikSystem Architect, CF programmer

Author

Commented:
<div id="contentDialog" style="display: none;"></div>      

<script type="text/javascript">
      $(document).ready( function() {
            
            
            $.get('index.html', function(data) {
              $('#contentDialog').html(data);
                    //alert('Load was performed.');
            });

      });       
            
            function AddAMessage(val1, val2){
                  
                  
                  $("#dialog:ui-dialog").dialog("destroy");
                  
                  $('#contentDialog').dialog({
                        resizable: false,
                        draggable: false,
                        modal: true,
                  
                        overlay: { opacity: 0.2, background: "cyan" },
                width: 450,
                height: 470,
                position: [520, 180],
                        buttons: {
                              "OK": function(){
                                    $(this).dialog("close");
                                    var temp = $("#sysMsgSelectStdMsgID option:selected").text();
                                    var temp2 = $("#sysMsgSelectStdMsgID option:selected").val();
                                    $("#" + val1).val(temp);
                                    $("#" + val2).val(temp2);
                                    $(this).dialog("destroy");
                              },
                              "Cancel": function(){
                                    $(this).dialog("close");
                                    $(this).dialog("destroy");
                              },
                        }
                  });
                  return false;      
            }
</script>

index.html

<form name="frm">
<select name="test" id="test">
<option value="0">Please choose a color</option>
<option value="1">Orange</option>
<option value="2">Yellow</option>
</select>
</form>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Why the destroy? I'll try a fiddle later
erikTsomikSystem Architect, CF programmer

Author

Commented:
well it is only not working in ie and firefox. Also if I leave the div visible then drop down works but if i hide it initially and then enable  by dialog then is not clickable
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
There is nothing else on that page with a zindex ?
erikTsomikSystem Architect, CF programmer

Author

Commented:
i have z - index set to 5000
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Works for me here

http://jsfiddle.net/mplungjan/kXLMy/

I need more info - it is not the script but something else. Normally a transparent div in front of everything

What do you have zindex set to 5000 on?

Explore More ContentExplore courses, solutions, and other research materials related to this topic.