Open In App

script.aculo.us InPlaceEditor externalControl Option

Improve
Improve
Like Article
Like
Save
Share
Report

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:



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