script.aculo.us InPlaceEditor savingText Option

Last Updated : 26 Nov, 2020

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"> 
        GeeksforGeeks 
    </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>