[jQuery] dialog within tab: msg#02938 jQuery

Hi All,

Having a problem with a dialog within a tab.

Here's the tab 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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-
ui-1.7.2.custom.min.js"></script>
<link href="css/global.css" media="screen" rel="stylesheet" type="text/
css" />
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css"
media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>

<body>

<div id="tabs">
<ul>
<li><a href="rows1.html">Teachers</a></li>
<li><a href="rows2.html">Students</a></li>

</ul>
</div>

</body>
</html>

Here's the rows1.html code:

script type="text/javascript" src="js/editUserDialog.js"></script>
<table width="150">
<tbody><tr>
<th width="75">Name</th>

<th width="75">Email</th>
</tr>

<tr class="evenRow">
<td width="60">
K Bush </td>
<td width="60">
kate@xxxxxxxxxxxxx </td>

<td width="15"><a href="javascript:editUser('3', 'K', 'Bush',
'kate@xxxxxxxxxxxxx');">edit</a></td>
<td width="15"><a href="javascript:deleteUser(3);">delete</a></td>
</tr>

<tr class="oddRow">
<td width="60">
M Gore </td>
<td width="60">

mgore@xxxxxxxxxxxxxxx </td>
<td width="15"><a href="javascript:editUser('6', 'M', 'Gore',
'mgore@xxxxxxxxxxxxxxx');">edit</a></td>
<td width="15"><a href="javascript:deleteUser(6);">delete</a></td>
</tr>

</tbody></table>
<div id="userUpdate" title="Update User Info">
<p id="validateTips"></p>

<form>
<fieldset>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" value=""
class="text ui-widget-content ui-corner-all" />
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" value=""
class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text
ui-
widget-content ui-corner-all" />
<input type="hidden" name="userid" id="userid" value=""/>

</fieldset>
</form>
</div>

The rows2.html code is exactly the same except for the table rows.

The editUserDialog.js is:

$.ui.dialog.defaults.bgiframe = true;
$(function() {

var userid = $("#userid"),
firstname = $("#firstname"),
lastname = $("#lastname"),
email = $("#email"),
allFields =
$([]).add(userid).add(firstname).add(lastname).add
(email),
tips = $("#validateTips");

function updateTips(t) {
tips.text(t).effect("highlight",{},1500);
}

function checkLength(o,n,min,max) {

if ( o.val().length > max || o.val().length < min ) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between
"+min+" and "+max
+".");
return false;
} else {
return true;
}

}

function checkRegexp(o,regexp,n) {

if ( !( regexp.test( o.val() ) ) ) {
o.addClass('ui-state-error');
updateTips(n);
return false;
} else {
return true;
}

}

$("#userUpdate").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
'Update': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength
(firstname,"firstname",1,100);
bValid = bValid && checkLength(lastname,"lastname",
1,100);

if (bValid) {

$('#userUpdate').html('update
complete');
$('#userUpdate').dialog
('option','buttons',{ "Close": function() { $(this).dialog
('close'); } });
}
},
'Cancel': function() {
$(this).dialog('close');

}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
window.location.reload();
}
});

});

function editUser(userid, first, last, email)
{
// here's where we preopopulate the form depending on what
user was selected
$('#firstname').attr('value', first);
$('#lastname').attr('value', last);
$('#email').attr('value', email);
$('#userid').attr('value', userid);
$('#userUpdate').dialog('open');
}

The issue is that the dialog works fine for the items on the default
tab ('Teachers') for (clicking Edit will bring up the entry in the
Dialog, and clicking update will message back 'update complete' and
the dialog buttons will update fine. However, when choosing edit on
any item in the 2nd tab ('Students') the dialog will come up fine,
however clicking on 'Update' will not update the Dialog window with
'update complete' and change the buttons. I'm pretty sure it's
executing the code because I've put alerts in the js and everything
seems to be executing but the dialog isn't updating.

Any thoughts?

Neil