tengo una mesa que se parece a esta
<table>
<tr>
<td class="score"><input type="text" maxlength="3" name="%s" class="auto-save"></td>
<td class="score"><input type="text" maxlength="3" name="%s" class="auto-save"></td>
</tr>
<table>
El código de arriba es generado por un código PHP que se ve así
return sprintf( '<input %s name="%s" value="%s" class="auto-save" />'
Luego tengo este fragmento de código js para guardar/borrar datos de formulario – Crédito https://github.com/medabida/savy
savy.js – https://github.com/medabida/savy/blob/master/savy.js
<script type="text/javascript" src="https://stackoverflow.com/questions/59130839/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../savy.js"></script>
<script type="text/javascript">
//$('.auto-save').savy('load') --> can be used without callback
$('.auto-save').savy('load',function(){
console.log("All data from savy are loaded");
});
function dstry(){
//$('.auto-save').savy('destroy') --> can be used without callback
$('.auto-save').savy('destroy',function(){
console.log("All data from savy are Destroyed");
window.location.reload();
});
}
</script>
He agregado los archivos js a mi carpeta de temas. El atributo de nombre en la tabla td es el identificador único, cambié la identificación en savy.js para acomodar el atributo de nombre (no quería usar la identificación porque el atributo de nombre se genera automáticamente y es único) Cuando agrego una publicación, el el contenido del nuevo valor de nombre td se incrementa automáticamente, por ejemplo, el anterior es nombre=»_nombre_43″, el nuevo se convierte en nombre=»_nombre_44″. Habiendo notado que el valor en el atributo de nombre no es fijo, aquí está el código php que lo genera automáticamente. return sprintf( '<input %s name="%s" value="%s" class="auto-save" />'
Mi savy.js manipulado se ve así
<script>(function($) {
$.fn.savy = function(order,fn) {
const sv = "savy-";
if (order == "load") {
$(this).each(function() {
if ($(this).is(":radio")) {
if(localStorage.getItem(sv+$(this).attr("name"))){
if (localStorage.getItem(sv+$(this).attr("name")) == this.name) {
this.checked = true;
}else{
this.checked = false
}
}
$(this).change(function() {
localStorage.setItem(sv+$(this).attr("name"), this.name);
});
}else if($(this).is(":checkbox")){
if(localStorage.getItem(sv+this.name)){
this.checked = (localStorage.getItem(sv+this.name) == "1" ? true : false);
}
$(this).change(function() {
localStorage.setItem(sv+this.name, (this.checked ? "1" : "0"));
});
}else if($(this).is("input") || $(this).is("textarea")) {
if(localStorage.getItem(sv+this.name)){
this.value = localStorage.getItem(sv+this.name);
}
$(this).keyup(function() {
localStorage.setItem(sv+this.name, this.value);
});
}else if($(this).is("select")) {
if ($(this).is("[multiple]")) {
if(localStorage.getItem(sv+this.name)){
$(this).val(localStorage.getItem(sv+this.name).split(","));
}else{
localStorage.setItem(sv+this.name, $(this).val());
}
$(this).change(function() {
localStorage.setItem(sv+this.name, $(this).val());
});
}else{
if(localStorage.getItem(sv+this.name)){
$(this).val(localStorage.getItem("savy-"+this.name));
}else{
localStorage.setItem(sv+this.name, $(this).val());
}
$(this).change(function() {
localStorage.setItem(sv+this.name, $(this).val());
});
}
}
});
if ($.isFunction(fn)){fn();}
}else if (order == "destroy") {
$(this).each(function() {
if(localStorage.getItem(sv+this.name)){
localStorage.removeItem(sv+this.name)
}
});
if ($.isFunction(fn)){fn();}
}else{
console.error("savy action not defined please use $('.classname').savy('load') to trigger savy to save all inputs")
} };})(jQuery);</script>
El código funciona bien cuando lo ejecuto desde el editor de texto de mi escritorio, pero no puedo hacer que funcione dentro de WordPress. ¿Qué podría estar haciendo mal? No soy un completo principiante en programación, pero estoy dispuesto a ensuciarme. Por favor, ayúdame a encontrar mi camino.
.