jQuery Dialog Assistance

jQuery Dialog Assistance

I have an AJAX call in which if the form processing result is SUCCESSFUL, I I want to show in the SAME kind of modal dialog a Title bar that says "SUCCESS!!!", a body with the following text 


" Thank you for choosing the Teal Center. Your appointment request has been sent and you will receive an email confirmation. This is only a *request* for an appointment. You will receive a second notification to inform you whether or not your request can be accommodated.

and only show a CLOSE "X" and Close button.

Can someone assist me in inserting the right syntax to get this to happen.  I appreciate it.

Here is my code:

  1. $(function() {
  2. var $div = $('.req_link');
  3. $('.req_link').button()
  4. .css({
  5. 'text-decoration' : 'none',
  6. 'background' : '#2C8586',
  7. 'color' : 'white',
  8. 'width' : '90px',
  9. 'font-size' : '0.8em'
  10. }).hover(function() {
  11. $(this).css({
  12. 'background' : '#2BA6CB',
  13. 'color' : 'white'
  14. });
  15. }).mouseleave(function() {
  16. $(this).css({
  17. 'background' : '#2C8586',
  18. 'color' : 'white'
  19. });
  20. });
  21. $(".req_link").click(function() {
  22. if($("#tx_types").val() == '' ) {
  23. alert('You must select a Treatment Type first.');
  24. return false;
  25. }
  26. $availability_href = $(this).attr("href");
  27. $('#dialog').load($availability_href+"&js=1");
  28. $('#dialog').dialog("open");
  29. return false;
  30. });
  31. $("#dialog").dialog({
  32. title: 'Request Appointment',
  33. autoOpen: false,
  34. draggable: false,
  35. position: "center top+40 window",
  36. width: 400,
  37. resizable: false,
  38. modal: true,
  39. buttons: {
  40. Cancel: function() {
  41. $(this).dialog('close');
  42. },
  43. "Request Appointment": function() {
  44. $(".ui-dialog-buttonpane button:contains('Request Appointment')").button("disable");
  45. $.ajax({
  46. type: 'POST',
  47. url: 'ajax/rad_process.php?js=1',
  48. data: $('#dialog form').serialize(),
  49. cache: false,
  50. error: function(xml, status, error) {
  51. $('#dialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
  52. },
  53. success: function(html) {
  54. $("#dialog").dialog('close');
  55. /*$("#conf_msg").html(html);*/
  56. $("#loading").html("<img src=\"/images/ajax-loader.gif\" height=\"14\">");
  57. $.ajax({
  58. type: 'POST',
  59. url: 'ajax/req_appt_success.php?js=1',
  60. data: $('#av_list_form').serialize(),
  61. cache: false,
  62. error: function(xml, status, error) {
  63. $("#loading").html("");
  64. $('.tblha').html('<tr><td colspan=\"8\"><p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p></td></tr>');
  65. },
  66. success: function(html) {
  67. $("#loading").html("");
  68. $(".tblha").html(html);
  69. alert('SUCCESS!!! Thank you for choosing the Teal Center. Your appointment request has been sent and you will receive an email confirmation. This is only a *request* for an appointment. You will receive a second notification to inform you whether or not your request can be accommodated.')
  70. }
  71. });
  72. $("#conf_msg").show();
  73. $(document).scrollTop( $("#conf_msg").offset().top );
  74. }
  75. });
  76. return false;
  77. }
  78. });
  79. });