Skip to content
Related Articles

Related Articles

script.aculo.us InPlaceEditor externalControl Option
  • Last Updated : 14 Dec, 2020

In this article, we will demonstrate the effect of externalControl option of InPlaceEditor class by using a JavaScript library called script.aculo.us which helps us in adding an element which will trigger the editing of the in-place editor.

Syntax:

Ajax.InPlaceEditor( element, url, { size: 100 });

Approach 1: To demonstrate the use of this function, we have written a small piece of code. We have written a small JavaScript code which will create an in-place editor for specific elements. By clicking on the button, you will see the in-place editor is triggered and goes into edit mode.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Import the libraries -->
    <script type="text/javascript"
        src="prototype.js">
    </script>
  
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
</head>
  
<body>
    <p id="editme">Click me</p>
  
  
    <button id="editbutton">
        Edit
    </button>
      
    <!-- Script for the JavaScript
        to initialize the objects -->
    <script type="text/javascript">
        new Ajax.InPlaceEditor(
            'editme', 'example', 
            { externalControl: 'editbutton' }
        );
    </script>
</body>
  
</html>

Output:



Approach 2: In this approach, we have written a small JavaScript code which will create an in-place editor for specific elements, and then we will make a request to a file and fetch the content from that file. We will create a file with name test.html with a simple text GeeksforGeeks in it. By clicking on the button, you will see the in-place editor is triggered and goes into edit mode we will click on OK to get the content from the file.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Import the libraries -->
    <script type="text/javascript" 
        src="prototype.js">
    </script>
  
    <script type="text/javascript" 
        src="scriptaculous.js">
    </script>
</head>
  
<body>
    <p id="editme">Click me</p>
  
  
    <button id="editbutton">
        Edit
    </button>
      
    <!-- Script to initialize the objects -->
    <script type="text/javascript">
        new Ajax.InPlaceEditor(
            'editme', '/test.html', 
            { externalControl: 'editbutton' }
        );
    </script>
</body>
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :