jQueryUI Dialog with server update

jQueryUI Dialog with server update

I am using the jQuery UI Dialog (form version), and modified the example slightly to allow for server side updates.  Specifically, I added to line 55 a POST to serverscript.php on the server which will update a database.  I am hoping I can get some help on the following three items.  PS - Line numbers refer to the below script even if my question states something like "the original used".

  1. Lines 59 to 63 on the original used name.val(), email.val(),and password.val() to update the table.  After I added the post statement, however, Line 74 clears those values before the table is written.  My workaround was to have the server pass back the values in json, however, it seems I shouldn't need to.  Any suggestions?
  2. There is a slight delay after clicking "Create New Account" as a server call is required.  During that time, the user can do other actions.  I would like to prevent any actions and display a waiting sign (i.e. hourglass, etc) until the post action is complete.  If the server is down, however, I don't want to do this indefinitely.  Any suggestions?
  3. Line 59 appends some html.  This appears to be using innerHTML.  Would you recommend making a sample row when originally writing the html, and cloning and appending this row?

Thank you



  1.     $(function() {
  2.         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  3.         $("#dialog").dialog("destroy");
  4.        
  5.         var name = $("#name"),
  6.             email = $("#email"),
  7.             password = $("#password"),
  8.             allFields = $([]).add(name).add(email).add(password),
  9.             tips = $(".validateTips");
  10.         function updateTips(t) {
  11.             tips
  12.                 .text(t)
  13.                 .addClass('ui-state-highlight');
  14.             setTimeout(function() {
  15.                 tips.removeClass('ui-state-highlight', 1500);
  16.             }, 500);
  17.         }
  18.         function checkLength(o,n,min,max) {
  19.             if ( o.val().length > max || o.val().length < min ) {
  20.                 o.addClass('ui-state-error');
  21.                 updateTips("Length of " + n + " must be between "+min+" and "+max+".");
  22.                 return false;
  23.             } else {
  24.                 return true;
  25.             }
  26.         }
  27.         function checkRegexp(o,regexp,n) {
  28.             if ( !( regexp.test( o.val() ) ) ) {
  29.                 o.addClass('ui-state-error');
  30.                 updateTips(n);
  31.                 return false;
  32.             } else {
  33.                 return true;
  34.             }
  35.         }
  36.        
  37.         $("#dialog-form").dialog({
  38.             autoOpen: false,
  39.             height: 300,
  40.             width: 350,
  41.             modal: true,
  42.             buttons: {
  43.                 'Create an account': function() {
  44.                     var bValid = true;
  45.                     allFields.removeClass('ui-state-error');
  46.                     bValid = bValid && checkLength(name,"username",3,16);
  47.                     bValid = bValid && checkLength(email,"email",6,80);
  48.                     bValid = bValid && checkLength(password,"password",5,16);
  49.                     bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
  50.                     // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
  51.                     bValid = bValid && checkRegexp(bla bla bla);
  52.                     bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
  53.                    
  54.                     if (bValid) {
  55.                         $.post('serverscript.php',
  56.                         {name:name.val(),email:email.val(),password:password.val()},
  57.                         function (data){
  58.                             if(!(data === "")) {var data = eval("(" + data + ")");}  //turn json into an object
  59.                             $('#users tbody').append('<tr>' +
  60.                             '<td>' + data.name + '</td>' +
  61.                             '<td>' + data.email + '</td>' +
  62.                             '<td>' + data.password+ '</td>' +
  63.                             '</tr>');
  64.                         }
  65.                         );
  66.                         $(this).dialog('close');
  67.                     }
  68.                 },
  69.                 Cancel: function() {
  70.                     $(this).dialog('close');
  71.                 }
  72.             },
  73.             close: function() {
  74.                 allFields.val('').removeClass('ui-state-error');
  75.             }
  76.         });
  77.        
  78.        
  79.        
  80.         $('#create-user')
  81.             .button()
  82.             .click(function() {
  83.                 $('#dialog-form').dialog('open');
  84.             });
  85.     });