Skip to content
Related Articles

Related Articles

script.aculo.us InPlaceEditor cancelText Option
  • Last Updated : 23 Dec, 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 cancelText option is used to specify the text of the link that cancels the editing and closes the editor. The default string value of the option is “cancel”.

Syntax:

{ cancelText : string }

Value: This option has a single value as mentioned above and described below:

  • string: This is a string that specifies the text to be shown for the link used to cancel the edit. The default string is “cancel”.

The below example illustrates the use of this option.



Example: The below HTML file demonstrates the InPlaceEditor cancelText Option 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 where the
            // cancelText option is modified
            new Ajax.InPlaceEditor(
                'editableElement2',
                'http://localhost/tmpscripts/inplace.php',
                {
 
                    // Specify the text to be used for
                    // the link to cancel the edit
                    cancelText: "Press to cancel!"
                }
            );
        }
    </script>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
    <h2>InPlaceEditor cancelText Option</h2>
 
     
<p>
        The "cancelText" option is used to
        specify the text to be shown for the
        cancel option of the editor.
    </p>
 
 
    <b>
        This element has the cancelText
        as the default one.
    </b>
     
    <div id="editableElement">
        Click this element to edit it!
    </div>
    <br>
     
    <b>
        This element has the cancelText
        set to a custom value.
    </b>
     
    <div id="editableElement2">
        Click this element to edit it!
    </div>
</body>
 
</html>

The below PHP file demonstrates this example:

PHP




<?php
  if( isset($_REQUEST["value"]) ) {
    $str = $_REQUEST["value"];
    echo $str;
  }
?>

 Output:

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :