The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server.
The InPlaceEditor class is used to define an editable field that can make a request to a file to access its content. We can specify the element which needs to be converted into an in-place editor, URL to make the request to, and options to pass different parameters.
Syntax:
Ajax.InPlaceEditor(element, url, options);
Values:
- element: This is an element to which we want to add the editable text field.
- url: The URL or file path to make AJAX request to.
- options: Additional field to customize the editor.
Example:
To demonstrate the use of this function follow the below code. A JavaScript code is implemented which creates an in-place editor for specific elements. The URL needed for the code is “test.html” with a simple text GeeksforGeeks in it. By clicking on Click me, you will see the in-place editor.
Clicking on ok, will fetch the content of the “test.html” page content.
<!DOCTYPE html> <html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<p id="editme">Click me</p>
<!-- JavaScript part to initialize the objects -->
<script type="text/javascript">
new Ajax.InPlaceEditor('editme', 'test.html');
</script>
</body>
</html>
|
Output:
test.html The following is the code for the file “test.html” which is used as URL in the above example code.
<!DOCTYPE html> <html>
<body>
GeeksforGeeks
</body>
</html>
|