xajax Show Dialog

Tips and Tricks:Show Dialog
From xajax Wiki
Making a floating dialog box with xajax.
I use smarty with my php and hope the following can help somebody. If not add improvements so my code can improve. With this dialog I am displaying forms, tables, images, help pages, progress bars ....
Contents[
[url=javascript:toggleToc()]hide[/url]
]
1 Adding xajax to smarty
2 Floating Dialog
3 Set up the dialog HTML and CSS
4 Code to display the dialog
5 Page layout to help opacity
6 xajax PHP Functions

Adding xajax to smarty
Example of how to use xajax with smarty. Have a variable in the template and set it with $smarty->assign
Section of template file
  
    {$pagetitle}
   
   
    {$xajax}
  
Required Php
  $smarty->assign('xajax',$xajax->getJavascript('include/libs/xajax'));
Floating Dialog
Set up the dialog HTML and CSS
The html below is a smarty template but you can see what is happening. Dialog layer has an image for closing and a content variable to display different types of content. The css can be changed to whatever works for you, but this is fine for my software. As the dialog_close image has the css cursor change to hand so users know they can press it.
Html


{$content}
CSS
#dialog {
position:absolute;
left: 200px;
top: 120px;
width: 300px;
     
-moz-border-radius: 4px;
font-weight: bold;
display: block;
text-align: left;
padding-left: 32px;
padding-right: 8px;
padding-top: 7px;
padding-bottom: 7px;
border: 1px solid #7f7f7f;
background-color: #dedede;
z-index: 2;
margin: 5;
}
#dialog #dialog_close {
float: right;
cursor: pointer;
cursor: hand;
}
Code to display the dialog
I am showing these dialog boxes when images, table rows or cells and major form changes. To show the dialog add this code to an element in your page:
Page layout to help opacity
I use two layers on all my pages so I can dim the screen when I display my dialog. popupholders I use to add and remove my dialog boxes pageholder I use for the rest of my page content
xajax PHP Functions
Once the show dialog is called it creates the dialog through smarty and allows me to assign $content to whatever I like ("text","images","another smarty template"). I add the dialog box to the holders div and then set the opacity for pageholder to 0.6.
To close the dialog I just remove the dialog and reset the opacity for pageholder to 1.0.
function showdialog()
  {
    $objResponse = new xajaxResponse();
    $smarty = get_tpl();
    $content = "Dialog Content Here";
    $smarty->assign('content',$content);
    $dialog = $smarty->fetch('components/dialog.html');
    $objResponse->addPrepend("popupholders","innerHTML",$dialog);
    $objResponse->addAssign("pageholder","style.opacity","0.6");
    return $objResponse;
  }
  function closedialog()
  {
    $objResponse = new xajaxResponse();
    $objResponse->addRemove("dialog");
    $objResponse->addAssign("pageholder","style.opacity","1.0");
    return $objResponse;
  }
  $xajax->registerFunction("showdialog");
  $xajax->registerFunction("closedialog");
Hope this helps people,
Simon