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.
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>