Start by reading this, to make sure you understand the difference between initializing (once) and opening (many times) a dialog: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
That's my best guess as to the source of your problem, by just looking at your code. If you put together a minimal live sample page, for example on http://jsbin.com/ that would facilitate review. - Richard On Fri, Jul 31, 2009 at 4:32 PM, nodell <neil.odell...@gmail.com> wrote: > > 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"> > k...@moremusic.com </td> > > <td width="15"><a href="javascript:editUser('3', 'K', 'Bush', > 'k...@moremusic.com');">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"> > > mg...@depechemode.com </td> > <td width="15"><a href="javascript:editUser('6', 'M', 'Gore', > 'mg...@depechemode.com');">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 >
