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>