ajax_example_advanced.inc 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <?php
  2. /**
  3. * @file
  4. * AJAX Commands examples.
  5. *
  6. * This demonstrates each of the
  7. * new AJAX commands. This is consolidated into a dense page because
  8. * it's advanced material and because it would spread itself all over creation
  9. * otherwise.
  10. */
  11. /**
  12. * Form to display the AJAX Commands.
  13. */
  14. function ajax_example_advanced_commands($form, &$form_state) {
  15. $form = array();
  16. $form['intro'] = array(
  17. '#type' => 'markup',
  18. '#markup' => t("<div>Demonstrates how AJAX commands can be used.</div>"),
  19. );
  20. // Shows the 'after' command with a callback generating commands.
  21. $form['after_command_example_fieldset'] = array(
  22. '#type' => 'fieldset',
  23. '#title' => t("This shows the Ajax 'after' command. Click to put something below the div that says 'Something can be inserted after this'"),
  24. );
  25. $form['after_command_example_fieldset']['after_command_example'] = array(
  26. '#value' => t("AJAX 'After': Click to put something after the div"),
  27. '#type' => 'submit',
  28. '#ajax' => array(
  29. 'callback' => 'ajax_example_advanced_commands_after_callback',
  30. ),
  31. '#suffix' => "<div id='after_div'>Something can be inserted after this</div>
  32. <div id='after_status'>'After' Command Status: Unknown</div>",
  33. );
  34. // Shows the 'alert' command.
  35. $form['alert_command_example_fieldset'] = array(
  36. '#type' => 'fieldset',
  37. '#title' => t("Demonstrates the AJAX 'alert' command. Click the button."),
  38. );
  39. $form['alert_command_example_fieldset']['alert_command_example'] = array(
  40. '#value' => t("AJAX 'Alert': Click to alert"),
  41. '#type' => 'submit',
  42. '#ajax' => array(
  43. 'callback' => 'ajax_example_advanced_commands_alert_callback',
  44. ),
  45. );
  46. // Shows the 'append' command.
  47. $form['append_command_example_fieldset'] = array(
  48. '#type' => 'fieldset',
  49. '#title' => t("This shows the Ajax 'append' command. Click to put something below the div that says 'Something can be inserted after this'"),
  50. );
  51. $form['append_command_example_fieldset']['append_command_example'] = array(
  52. '#value' => t("AJAX 'Append': Click to append something"),
  53. '#type' => 'submit',
  54. '#ajax' => array(
  55. 'callback' => 'ajax_example_advanced_commands_append_callback',
  56. ),
  57. '#suffix' => "<div id='append_div'>Something can be appended inside this div... </div>
  58. <div id='append_status'>'After' Command Status: Unknown</div>",
  59. );
  60. // Shows the 'before' command.
  61. $form['before_command_example_fieldset'] = array(
  62. '#type' => 'fieldset',
  63. '#title' => t("This shows the Ajax 'before' command."),
  64. );
  65. $form['before_command_example_fieldset']['before_command_example'] = array(
  66. '#value' => t("AJAX 'before': Click to put something before the div"),
  67. '#type' => 'submit',
  68. '#ajax' => array(
  69. 'callback' => 'ajax_example_advanced_commands_before_callback',
  70. ),
  71. '#suffix' => "<div id='before_div'>Something can be inserted before this</div>
  72. <div id='before_status'>'before' Command Status: Unknown</div>",
  73. );
  74. // Shows the 'changed' command.
  75. $form['changed_command_example_fieldset'] = array(
  76. '#type' => 'fieldset',
  77. '#title' => t("Demonstrates the AJAX 'changed' command. If region is 'changed', it is marked with CSS. This example also puts an asterisk by changed content."),
  78. );
  79. $form['changed_command_example_fieldset']['changed_command_example'] = array(
  80. '#title' => t("AJAX changed: If checked, div is marked as changed."),
  81. '#type' => 'checkbox',
  82. '#default_value' => FALSE,
  83. '#ajax' => array(
  84. 'callback' => 'ajax_example_advanced_commands_changed_callback',
  85. ),
  86. '#suffix' => "<div id='changed_div'> <div id='changed_div_mark_this'>This div can be marked as changed or not.</div></div>
  87. <div id='changed_status'>Status: Unknown</div>",
  88. );
  89. // Shows the AJAX 'css' command.
  90. $form['css_command_example_fieldset'] = array(
  91. '#type' => 'fieldset',
  92. '#title' => t("Demonstrates the AJAX 'css' command."),
  93. );
  94. $form['css_command_example_fieldset']['css_command_example'] = array(
  95. '#title' => t("AJAX CSS: Choose the color you'd like the '#box' div to be."),
  96. '#type' => 'select',
  97. // '#default_value' => 'green',
  98. '#options' => array('green' => 'green', 'blue' => 'blue'),
  99. '#ajax' => array(
  100. 'callback' => 'ajax_example_advanced_commands_css_callback',
  101. ),
  102. '#suffix' => "<div id='css_div' style='height: 50px; width: 50px; border: 1px solid black'> box</div>
  103. <div id='css_status'>Status: Unknown</div>",
  104. );
  105. // Shows the AJAX 'data' command. But there is no use of this information,
  106. // as this would require a javascript client to use the data.
  107. $form['data_command_example_fieldset'] = array(
  108. '#type' => 'fieldset',
  109. '#title' => t("Demonstrates the AJAX 'data' command."),
  110. );
  111. $form['data_command_example_fieldset']['data_command_example'] = array(
  112. '#title' => t("AJAX data: Set a key/value pair on a selector."),
  113. '#type' => 'textfield',
  114. '#default_value' => 'color=green',
  115. '#ajax' => array(
  116. 'callback' => 'ajax_example_advanced_commands_data_callback',
  117. ),
  118. '#suffix' => "<div id='data_div'>This div should have key='time'/value='a time string' attached.</div>
  119. <div id='data_status'>Status: Unknown</div>",
  120. );
  121. // Shows the AJAX 'html' command.
  122. $form['html_command_example_fieldset'] = array(
  123. '#type' => 'fieldset',
  124. '#title' => t("Demonstrates the AJAX 'html' command."),
  125. );
  126. $form['html_command_example_fieldset']['html_command_example'] = array(
  127. '#title' => t("AJAX html: Replace the HTML in a selector."),
  128. '#type' => 'textfield',
  129. '#default_value' => 'new value',
  130. '#ajax' => array(
  131. 'callback' => 'ajax_example_advanced_commands_html_callback',
  132. ),
  133. '#suffix' => "<div id='html_div'>Original contents</div>
  134. <div id='html_status'>Status: Unknown</div>",
  135. );
  136. // Shows the AJAX 'prepend' command.
  137. $form['prepend_command_example_fieldset'] = array(
  138. '#type' => 'fieldset',
  139. '#title' => t("This shows the AJAX 'prepend' command. Click to put something below the div that says 'Something can be inserted after this'"),
  140. );
  141. $form['prepend_command_example_fieldset']['prepend_command_example'] = array(
  142. '#value' => t("AJAX 'prepend': Click to prepend something"),
  143. '#type' => 'submit',
  144. '#ajax' => array(
  145. 'callback' => 'ajax_example_advanced_commands_prepend_callback',
  146. ),
  147. '#suffix' => "<div id='prepend_div'>Something can be prepended to this div... </div>
  148. <div id='prepend_status'>'After' Command Status: Unknown</div>",
  149. );
  150. // Shows the AJAX 'remove' command.
  151. $form['remove_command_example_fieldset'] = array(
  152. '#type' => 'fieldset',
  153. '#title' => t("Shows the Ajax 'remove' command."),
  154. );
  155. $form['remove_command_example_fieldset']['remove_command_example'] = array(
  156. '#title' => t("AJAX 'remove': Check to remove text. Uncheck to add it back."),
  157. '#type' => 'checkbox',
  158. '#default_value' => FALSE,
  159. '#ajax' => array(
  160. 'callback' => 'ajax_example_advanced_commands_remove_callback',
  161. ),
  162. '#suffix' => "<div id='remove_div'><div id='remove_text'>text to be removed</div></div>
  163. <div id='remove_status'>'After' Command Status: Unknown</div>",
  164. );
  165. // Show off the AJAX 'restripe' command. Also shows classic AJAX replacement
  166. // on the "how many rows" processing.
  167. $form['restripe_command_example_fieldset'] = array(
  168. '#type' => 'fieldset',
  169. '#title' => t("Demonstrates the Ajax 'restripe' command."),
  170. );
  171. $form['restripe_command_example_fieldset']['restripe_num_rows'] = array(
  172. '#type' => 'select',
  173. '#default_value' => !empty($form_state['values']['restripe_num_rows']) ? $form_state['values']['restripe_num_rows'] : 1,
  174. '#options' => drupal_map_assoc(array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)),
  175. '#ajax' => array(
  176. 'callback' => 'ajax_example_advanced_commands_restripe_num_rows',
  177. 'method' => 'replace',
  178. 'wrapper' => 'restripe_table',
  179. ),
  180. );
  181. $form['restripe_command_example_fieldset']['restripe_restripe'] = array(
  182. '#type' => 'submit',
  183. '#value' => t("Restripe the table"),
  184. '#ajax' => array(
  185. 'callback' => 'ajax_example_advanced_commands_restripe_callback',
  186. ),
  187. '#suffix' => "<div id='restripe_div'>
  188. <table id='restripe_table' style='border: 1px solid black' >
  189. <tr id='table-first'><td>first row</td></tr>
  190. </table>
  191. </div>
  192. <div id='restripe_status'>'Restripe' Command Status: Unknown</div>",
  193. );
  194. $form['submit'] = array(
  195. '#type' => 'submit',
  196. '#value' => t('Submit'),
  197. );
  198. return $form;
  199. }
  200. /**
  201. * Callback for 'after'.
  202. *
  203. * @see ajax_command_after()
  204. */
  205. function ajax_example_advanced_commands_after_callback($form, $form_state) {
  206. $selector = '#after_div';
  207. $commands = array();
  208. $commands[] = ajax_command_after($selector, "New 'after'...");
  209. $commands[] = ajax_command_replace("#after_status", "<div id='after_status'>Updated after_command_example " . date('r') . "</div>");
  210. return array('#type' => 'ajax', '#commands' => $commands);
  211. }
  212. /**
  213. * Callback for 'alert'.
  214. *
  215. * @see ajax_command_alert()
  216. */
  217. function ajax_example_advanced_commands_alert_callback($form, $form_state) {
  218. $commands = array();
  219. $commands[] = ajax_command_alert("Alert requested at " . date('r'));
  220. return array('#type' => 'ajax', '#commands' => $commands);
  221. }
  222. /**
  223. * Callback for 'append'.
  224. *
  225. * @see ajax_command_append()
  226. */
  227. function ajax_example_advanced_commands_append_callback($form, $form_state) {
  228. $selector = '#append_div';
  229. $commands = array();
  230. $commands[] = ajax_command_append($selector, "Stuff...");
  231. $commands[] = ajax_command_replace("#append_status", "<div id='append_status'>Updated append_command_example " . date('r') . "</div>");
  232. return array('#type' => 'ajax', '#commands' => $commands);
  233. }
  234. /**
  235. * Callback for 'before'.
  236. *
  237. * @see ajax_command_before()
  238. */
  239. function ajax_example_advanced_commands_before_callback($form, $form_state) {
  240. $selector = '#before_div';
  241. $commands = array();
  242. $commands[] = ajax_command_before($selector, "New 'before'...");
  243. $commands[] = ajax_command_replace("#before_status", "<div id='before_status'>Updated before_command_example " . date('r') . "</div>");
  244. return array('#type' => 'ajax', '#commands' => $commands);
  245. }
  246. /**
  247. * Callback for 'changed'.
  248. *
  249. * @see ajax_command_changed()
  250. */
  251. function ajax_example_advanced_commands_changed_callback($form, $form_state) {
  252. $checkbox_value = $form_state['values']['changed_command_example'];
  253. $checkbox_value_string = $checkbox_value ? "TRUE" : "FALSE";
  254. $commands = array();
  255. if ($checkbox_value) {
  256. $commands[] = ajax_command_changed('#changed_div', '#changed_div_mark_this');
  257. }
  258. else {
  259. $commands[] = ajax_command_replace('#changed_div', "<div id='changed_div'> <div id='changed_div_mark_this'>This div can be marked as changed or not.</div></div>");
  260. }
  261. $commands[] = ajax_command_replace("#changed_status", "<div id='changed_status'>Updated changed_command_example to $checkbox_value_string: " . date('r') . "</div>");
  262. return array('#type' => 'ajax', '#commands' => $commands);
  263. }
  264. /**
  265. * Callback for 'css'.
  266. *
  267. * @see ajax_command_css()
  268. */
  269. function ajax_example_advanced_commands_css_callback($form, $form_state) {
  270. $selector = '#css_div';
  271. $color = $form_state['values']['css_command_example'];
  272. $commands = array();
  273. $commands[] = ajax_command_css($selector, array('background-color' => $color));
  274. $commands[] = ajax_command_replace("#css_status", "<div id='css_status'>Updated css_command_example to '{$color}' " . date('r') . "</div>");
  275. return array('#type' => 'ajax', '#commands' => $commands);
  276. }
  277. /**
  278. * Callback for 'data'.
  279. *
  280. * @see ajax_command_data()
  281. */
  282. function ajax_example_advanced_commands_data_callback($form, $form_state) {
  283. $selector = '#data_div';
  284. $text = $form_state['values']['data_command_example'];
  285. list($key, $value) = preg_split('/=/', $text);
  286. $commands = array();
  287. $commands[] = ajax_command_data($selector, $key, $value);
  288. $commands[] = ajax_command_replace("#data_status", "<div id='data_status'>Updated data_command_example with key=$key, value=$value; " . date('r') . "</div>");
  289. return array('#type' => 'ajax', '#commands' => $commands);
  290. }
  291. /**
  292. * Callback for 'html'.
  293. *
  294. * @see ajax_command_html()
  295. */
  296. function ajax_example_advanced_commands_html_callback($form, $form_state) {
  297. $text = $form_state['values']['html_command_example'];
  298. $commands = array();
  299. $commands[] = ajax_command_html('#html_div', $text);
  300. $commands[] = ajax_command_replace("#html_status", "<div id='html_status'>Updated html_command_example with text=$text; " . date('r') . "</div>");
  301. return array('#type' => 'ajax', '#commands' => $commands);
  302. }
  303. /**
  304. * Callback for 'prepend'.
  305. *
  306. * @see ajax_command_prepend()
  307. */
  308. function ajax_example_advanced_commands_prepend_callback($form, $form_state) {
  309. $commands = array();
  310. $commands[] = ajax_command_prepend('#prepend_div', "Prepended Stuff...");
  311. $commands[] = ajax_command_replace("#prepend_status", "<div id='prepend_status'>Updated prepend_command_example " . date('r') . "</div>");
  312. return array('#type' => 'ajax', '#commands' => $commands);
  313. }
  314. /**
  315. * Callback for 'remove'.
  316. *
  317. * @see ajax_command_remove()
  318. */
  319. function ajax_example_advanced_commands_remove_callback($form, $form_state) {
  320. $commands = array();
  321. $should_remove = $form_state['values']['remove_command_example'];
  322. $should_remove_string = $should_remove ? 'TRUE' : 'FALSE';
  323. if ($should_remove) {
  324. $commands[] = ajax_command_remove('#remove_text');
  325. }
  326. else {
  327. $commands[] = ajax_command_html('#remove_div', "<div id='remove_text'>text to be removed</div>");
  328. }
  329. $commands[] = ajax_command_replace("#remove_status", "<div id='remove_status'>Updated remove_command_example (value={$should_remove_string} " . date('r') . "</div>");
  330. return array('#type' => 'ajax', '#commands' => $commands);
  331. }
  332. /**
  333. * Callback for 'restripe'.
  334. *
  335. * Rebuilds the table with the selected number of rows.
  336. */
  337. function ajax_example_advanced_commands_restripe_num_rows($form, $form_state) {
  338. $num_rows = $form_state['values']['restripe_num_rows'];
  339. $output = "<table id='restripe_table' style='border: 1px solid black'>";
  340. for ($i = 1; $i <= $num_rows; $i++) {
  341. $output .= "<tr><td>Row $i</td></tr>";
  342. }
  343. $output .= "</table>";
  344. return $output;
  345. }
  346. /**
  347. * Callback for 'restripe'.
  348. *
  349. * @see ajax_command_restripe()
  350. */
  351. function ajax_example_advanced_commands_restripe_callback($form, $form_state) {
  352. $commands = array();
  353. $commands[] = ajax_command_restripe('#restripe_table');
  354. $commands[] = ajax_command_replace("#restripe_status", "<div id='restripe_status'>Restriped table " . date('r') . "</div>");
  355. return array('#type' => 'ajax', '#commands' => $commands);
  356. }