AJAX Dialog Forms

TODO

Document all the components necessary to create a popup dialog using JQueryUI.

Form Markup Requirements

Create separate PHP include file containing the markup for the FORM element that will be inserted into the dialog.

FORM element

Has no parent DIV element.

id="dialog-edit-form"

<form id="dialog-edit-form">
</form>

Contains hidden input storing action property, and optionally record id and content type id.

<input type="hidden" name="<?=P_COMMIT?>" value="1" />
<input type="hidden" name="<?=$input->id->param?>" value="<?=$input->id->value?>" />
<input type="hidden" name="<?=$input->site_section->id->param?>" value="<?=$input->site_section->id->value?>" />

Submit buttons. JavaScript handlers will be assigned to the buttons after the FORM element has been added to the DOM.

• data-tid attribute stores the content type value if it's needed by the JavaScript callback for the button.
• data-op attribute stores the operation when using LITTLED.dialogEdit() or a similar callback for the button.

<div class="submit-container">
	<a href="javascript:void(0)" class="dlg-commit-btn" data-tid="<?=$input->site_section->id->value?>" data-op="delete">delete</a>
	<a href="javascript:void(0)" class="dlg-cancel-btn">cancel</a>
</div>

AJAX Handler Script

The text displayed as the title of the dialog is passed back as the value of $json->label->value.