Tags Order A-Z Category Context

<sn:dialog>

The <sn:dialog> tag is currently in beta and its features, attributes and behavior could change with no notice. We'd appreciate your input while <sn:dialog> is in beta.

Creates a lightbox-style dialog to collect user input. The dialog will remain hidden until a link with the clicktoshowdialog attribute set to this dialog's id is clicked. When the buttons are clicked the form in the element is submitted (if the button is of type submit) otherwise, the link specified by the href attribute of the button is followed.

By default a cancel button appears, which closes the dialog without anything being submitted to the server. This default behavior can be turned off, though it is recommended that all dialogs have a cancel button.

Mock Ajax

It's also possible to use mock ajax within an sn:dialog tag. If the clickrewriteform, clickrewriteid and clickrewriteurl are set, the dialog will make a mock ajax request to the remote server, which must respond with an sn:dialogresponse tag which wraps the same elements that would normally be present in an sn:dialog.

In the example below, the contents of http://your-domain.com/path/to/dialog-response.snml should be the following: <sn:dialogresponse cancel_button="false"> <sn:dialog-title>Message received</sn:dialog-title> <sn:dialog-content>Thanks for telling us if you ride</sn:dialog-content> <sn:dialog-button type="submit" close_dialog="true" value="Close"/> </sn:dialogresponse>

Attributes

  • string < required > A unique name for this dialog. This identifier is used to open the dialog. Can be any string .
  • boolean < optional > Whether or not do display a cancel button on this dialog. Must be a boolean . Default is true.

Valid Contexts

  • : The area where your app is displayed alone
  • : The Bebo profile page
  • : On a notification page (after the user has clicked on a link in the email)
  • : On the invitations page

Code

<sn:dialog id="submit" cancel_button="true">
   <sn:dialog-title>This is my dialog!</sn:dialog-title>
  <sn:dialog-content>
       Hey there, which motorcycle type is the best?
       <form action="" id="dialog-form">
          <input type="radio" name="like" value="Sportbikes"> Sportbikes<br/>
          <input type="radio" name="like" value="Standards"> Standards<br/>
          <input type="radio" name="like" value="Cruisers">Cruisers<br/>
          <input type="submit"/>
       </form>
   </sn:dialog-content>
   <sn:dialog-button type="submit" value="Tell Me!" form_id="dialog-form"/>
 </sn:dialog>
 
 
 <sn:dialog id="link" cancel_button="false">
    <sn:dialog-title>This follows a link</sn:dialog-title>
    <sn:dialog-content>
      Click on one of the links below
    </sn:dialog-content>
    <sn:dialog-button href="http://www.bebo.com" type="button" value="Go to Bebo"/>
    <sn:dialog-button close_dialog="true" value="Don't do it!" type="button"/>
 </sn:dialog>
 
 
 <sn:dialog id="mock-ajax">
   <sn:dialog-title>This one executes mock ajax</sn:dialog-title>
   <sn:dialog-content>
       <form id="mock-ajax-form">
          <input type="checkbox" name="doyouride"> Do you ride a motorcycle?
       </form>
   </sn:dialog-content>
   <sn:dialog-button type="submit" value="Go!" clickrewriteurl="http://your-domain.com/path/to/dialog-response.snml" clickrewriteid="mock-ajax" clickrewriteform="mock-ajax-form"/>
   
 </sn:dialog>


 
 <a href="#" clicktoshowdialog="submit">Click here for the form-based dialog</a> <br/>
 <a href="#" clicktoshowdialog="link">Click here for the dialog that follows a link</a> <br/>
 <a href="#" clicktoshowdialog="mock-ajax">Click here to show the mock ajax dialog</a>
Play with this code in the sandbox

This is my dialog!

Hey there, which motorcycle type is the best?
Sportbikes
Standards
Cruisers

This one executes mock ajax

Do you ride a motorcycle?
Click here for the form-based dialog
Click here for the dialog that follows a link
Click here to show the mock ajax dialog