JQuery UI Dialog - Not working in IE7

Soldato
Joined
8 Oct 2005
Posts
4,184
Location
Midlands, UK
Hi,

This is nothing major as it's for an internal system at work where I know what browsers versions are being used (either Firefox, Safari or IE8 - which the below script all works in).

However, I can't get it working in IE7 at all, the dialog doesn't seem to create and it's kind of annoying me.

NB: click the first checkbox to open the dialog, as I'm just testing at the mo :)

A live example can be seen here - http://www.web-design-talk.co.uk/ocuk/index.html , or the code below.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yadadada</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
    
    $("#dialog").hide();
    
    $('#chk23').bind('click', function() {
    
    
        var ID = $(this).val();
        var selStage = $('select#selStage').val();
        
        //console.log('The ID is: ' + ID + ' and stage selected is ' + selStage);
        
        $('p#loading').hide();
        $('p#done').hide();
        
        $("#dialog").dialog({
                bgiframe: true,
                height: 220,
                modal: true,
                buttons: {
                    Exit: function() {
                        //$(this).dialog('close');
                        window.location.replace('index.html');
                    },
                    OK: function() {
                        
                        $.ajax({
                            type: 'POST',
                            url: 'ajax.php',
                            data: 'ID='+ID+'&selStage='+selStage,
                            beforeSend: function() {
                                $('form#chkForm').hide();
                                $('p#instruction').hide();
                                $('p#loading').show();
                                $(":button:contains('OK')").attr("disabled","disabled").addClass('ui-state-disabled'); 
                            },
                            success: function(result) {
                                $('p#loading').hide();
                                $('p#done').show();
                                $('p#done').html(result + "<br /><br />Click 'Exit' button to return.");
                                $(":button:contains('OK')").attr("disabled","disabled").addClass('ui-state-disabled'); 
                                $(":button:contains('Cancel')").val('exit');
                                $('p#yada').animate({ "opacity" : ".5" }, 1000).slideUp("slow"); 
                                //console.log(result);
                            }
                        });
                    }
                },
                overlay: {
                    backgroundColor: '#ff0000',
                    opacity: 0.5
                },
        });
    
    
    
    
    });
    


});
</script>

<style type="text/css">
h1 { font-size:1.3em; }
h2 { font-size:1.0em;margin-left:30px;margin-bottom:0px; }
p { margin:0; font-size: 0.7em;}
</style>

</head>


<body style="font-family:Verdana, Arial, Helvetica, sans-serif;margin-left:100px;">
    
    <h1>Rob Daily Jobs to do</h1>
    
    <h2>3054 - Stoke City</h2>
    <p id="yada"><input type="checkbox" id="chk23" value="23" style="margin-left:50px;" /> 3054 - Business Cards full colour, 300g....</p>
    <p><input type="checkbox" id="chk22" value="23" style="margin-left:50px;" /> 3054 - Website Design and Development using.......</p>
    <p><input type="checkbox" id="chk2" value="23" style="margin-left:50px;" /> 3054 - 360 Page Booklet full colour......</p><br /><br />
    
    
    <h1>Amy Daily Jobs to do</h1>
    
    <h2>3054 - Stoke City</h2>
    <p><input type="checkbox" id="chk25" value="23" style="margin-left:50px;" /> 3099 - Business Cards full colour, 300g....</p>
    <p><input type="checkbox" id="chk28" value="23" style="margin-left:50px;" /> 3099 - Website Design and Development using.......</p>
    <p><input type="checkbox" id="chk21" value="23" style="margin-left:50px;" /> 3099 - 360 Page Booklet full colour......</p>
    
    
    

    <div id="dialog" title="Mark item as complete">
        <p id="instruction" style="margin-top:10px;"><span class="ui-icon ui-icon-info" style="float:left; margin:8px 3px 20px 0;"></span>
            Select a stage to move this to list item to:</p>
        
        <p id="loading" style="margin-left: 80px;"><img src="ajax-loader.gif" alt="loading" /><br />Please wait....</p>
        
        <p id="done"></p>
        
        <form id="chkForm" method="post">
            <select id="selStage" style="width: 200px;background:#fff;border:1px solid #ccc;">
                <option>Daily Jobs to do</option>
                <option>Web Development</option>
                <option>Printing A (current stage)</option>
                <option>Printing B</option>
                <option>Ready to invoice</option>
                <option>Day Book</option>
            </select>
        </form>
        
    </div>

</body>
</html>
 
Don't know if it's any help, but in IE7 mode of IE8 i get this error:

Code:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; MDDS; .NET CLR 3.5.30729; .NET CLR 3.0.30618; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; MSN OptimizedIE8;ENGB)
Timestamp: Mon, 7 Sep 2009 08:12:33 UTC


Message: Expected identifier, string or number
Line: 62
Char: 3
Code: 0
URI: http://www.web-design-talk.co.uk/ocuk/index.html
 
OMG! Had an extra comment after

Code:
overlay: {
                    backgroundColor: '#ff0000',
                    opacity: 0.5
                },

Removing it, made it work in IE7.That's weird, as it worked in other browsers and FireBug didn't pick it up either.

Thanks!!!!
 
Back
Top Bottom