script.aculo.us InPlaceEditor ajaxOptions Option
Last Updated :
30 Nov, 2020
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 ajaxOptions option is used in defining the options specified to all AJAX calls. In simple words, we can control the type of the request made during submitting the text after editing the in-place editor.
Syntax:
{ ajaxOptions: object}
Values:
- object: This is an object containing the ajax options.
Example:
To demonstrate the use of this function, refer the following code. The JavaScript part of the code will create an in-place editor for specific elements. Create a file called “test.html” which we are going to use for making the request. This “test.html” will contain a simple text GeeksforGeeks. By clicking on Click me, you will see the in-place editor. Just click on ok to make the request and further we are going to check the type of request from the Network tab in the Dev Tools of Chrome. When you click on ok, it will create a request and a “test.html” will popup in the Network tab as shown in the screenshots below.
Note:
Use a server to run the file with ajax capabilities. In this article, we are using a PHP server.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<p id="editme1">Click me for post request</p>
<p id="editme2">Click me for get request</p>
<script type="text/javascript">
new Ajax.InPlaceEditor('editme1', 'test.html',
{ ajaxOptions: { method: 'post' } });
new Ajax.InPlaceEditor('editme2', 'test.html',
{ ajaxOptions: { method: 'get' } });
</script>
</body>
</html>
|
Output for post request:
Output for get request:
You can see that the request method is POST for first one and GET for the second one.
test.html The following code is the content for the file “test.html” used in the above HTML code.
<!DOCTYPE html>
<html>
<body>
GeeksforGeeks
</body>
</html>
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...