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:
