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 neveropen 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:
