Open In App

script.aculo.us InPlaceEditor rows Option

Improve
Improve
Like Article
Like
Save
Share
Report

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 content on the page and submit the changes to the server.

The InPlaceEditor rows option is used to specify the number of rows to be shown in the InPlaceEditor. Any value over “1” would result in a multi-line textarea as the input area.

Syntax:

{ rows: value }

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

  • value: This is a number that is used to specify the number of rows to be shown in the editor.

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
  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 rows
            // option changed to a custom value
            new Ajax.InPlaceEditor(
                'editableElement2',
                'http://localhost/tmpscripts/inplace.php',
                {
  
                    // Specify the number of rows
                    // to be used in the InplaceEditor
                    rows: 3
                }
            );
  
            // InplaceEditor with the rows
            // option changed to a custom value
            new Ajax.InPlaceEditor(
                'editableElement3',
                'http://localhost/tmpscripts/inplace.php',
                {
  
                    // Specify the number of rows
                    // to be used in the InplaceEditor
                    rows: 8
                }
            );
        }
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
  
    <h2>InPlaceEditor rows Option</h2>
      
      
    <p>
        The "rows" option is used to specify
        the number of rows to be used in the
        InPlaceEditor.
    </p>
  
      
    <b>
        This element has the rows as the
        default one.
    </b>
      
    <div id="editableElement">Click to edit</div>
    <br>
      
    <b>This element has the rows set to 3 rows.</b>
      
    <div id="editableElement2">Click to edit</div>
    <br>
      
    <b>This element has the rows set to 8 rows.</b>
    <div id="editableElement3">Click to edit</div>
</body>
  
</html>


Output:



Last Updated : 26 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads