script.aculo.us InPlaceEditor savingText Option
The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server.
The InPlaceEditor savingText option is used to specify the text to be shown while the text is being sent to the server to be saved. The default string of the option is “Saving…“.
Syntax:
{ savingText : value }
Parameters: This option has a single value as mentioned above and described below:
- value: This is a string that specifies the text to be shown while the text is being sent to the server. The default string is “Saving…”.
The below example illustrates the use of this option.
Example: The below script is required to simulate the saving of data to the server.
PHP
<?php // Simulate the time taken by // the server sleep(1); if ( isset( $_REQUEST [ "value" ]) ) { $str = $_REQUEST [ "value" ]; echo $str ; } ?> |
The below script demonstrates this with the example:
HTML
<!DOCTYPE html> < html > < head > < script type = "text/javascript" src = "prototype.js" > </ script > < script type = "text/javascript" src = "scriptaculous.js?load = controls" > </ script > < script type = "text/javascript" > window.onload = function () { // Default InplaceEditor with no // options new Ajax.InPlaceEditor( 'editableElement', 'http://localhost/tmpscripts/inplace.php', ); // InplaceEditor with the savingText // option changed to a custom value new Ajax.InPlaceEditor( 'editableElement2', 'http://localhost/tmpscripts/inplace.php', { // Specify the text to be used // while sending to server savingText: "Saving the contents..." } ); } </ script > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < h2 >InPlaceEditor savingText Option</ h2 > < p > The "savingText" option is used to specify the text to be shown when the text is being saved. </ p > < b > This element has the savingText as the default one. </ b > < div id = "editableElement" >Click to edit</ div > < br > < b > This element has the savingText set to a custom value. </ b > < div id = "editableElement2" >Click to edit</ div > </ body > </ html > |
Output:
Contact Us