La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El Ajax.InPlaceEditor se utiliza para hacer que los elementos sean editables, lo que permite al usuario editar el contenido de la página y enviar los cambios al servidor.
La opción submitOnBlur de InPlaceEditor se utiliza para especificar si el formulario de editor del elemento se enviará cada vez que pierda el foco. El valor predeterminado de esta opción es «falso», es decir, el formulario no se enviará cuando pierda el foco.
Sintaxis:
{ submitOnBlur: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: este es un valor booleano que especifica si el formulario de entrada se enviará cada vez que pierda el foco. El valor predeterminado es «falso».
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo: Se requiere el siguiente script para simular el guardado de datos en el servidor.
PHP
<?php
if( isset($_REQUEST["value"]) ) {
$str = $_REQUEST["value"];
echo $str;
}
?>
El siguiente script demuestra esto con el ejemplo:
HTML
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = controls">
</script>
<script type="text/javascript">
window.onload = function () {
new Ajax.InPlaceEditor(
'editableElement',
'http://localhost/tmpscripts/inplace.php',
{
// Setting submitOnBlur
// to false, to prevent
// submitting when losing focus
submitOnBlur: false,
}
);
new Ajax.InPlaceEditor(
'editableElement2',
'http://localhost/tmpscripts/inplace.php',
{
// Setting submitOnBlur
// to true, submits
// when focus is lost
submitOnBlur: true,
}
);
}
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>InPlaceEditor submitOnBlur Option</h2>
<p>The "submitOnBlur" option is used to
specify if the element is submitted
when it loses focus.</p>
<b>
This element has the submitOnBlur as
the default value, false.
</b>
<div id="editableElement">Click here element
and then outside to lose focus.</div>
<br>
<b>This element has the submitOnBlur set
to true.</b>
<div id="editableElement2">Click here element
and then outside to lose focus.</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA