Tengo un sitio web html con Sortable.js. Quiero guardar el estado actual del cuerpo cuando un usuario reorganiza la lista y hace clic en el botón Guardar. No quiero que se guarde en el almacenamiento local, sino directamente en el archivo alojado, reemplazando el html del cuerpo con la nueva versión reorganizada.
<body> <div class='wrapper'> <ul class='list'> <li class='item' contenteditable='true'>Item 1</li> <li class='item' contenteditable='true'>Item 2</li> <li class='item' contenteditable='true'>Item 3</li> </ul> <button class='add-item'>add new item</button> <button class='save'>save changes</button> </div> </body>Creo que lo que estoy tratando de lograr es muy simple y se puede hacer usando php y ajax, pero no puedo encontrar una respuesta directa a mi pregunta.
Actualmente solo hay un archivo index.php.
La seguridad no es un problema.
Puedes hacer algo como esto...
<body> <div class='wrapper'> <ul class='list'> <li class='item' contenteditable='true'>Item 1</li> <li class='item' contenteditable='true'>Item 2</li> <li class='item' contenteditable='true'>Item 3</li> </ul> <button class='add-item'>add new item</button> <button class='save' onclick="saveHTML()">save changes</button> </div> </body>secuencia de comandos Java
function saveHTML(){ var currentStateHTML = document.documentElement.innerHTML; console.log(currentStateHTML);//For debugging $.post("file.php", {type : "save", state : currentStateHTML}, function(data, status){ if(status == "success"){ if(data == "saved"){ location.reload();//which is index.php itself } else console.log("error"); } } ); }archivo php
<?php if(isset($_POST['type'])){ if($_POST['type'] == "save"){ $html = $_POST['state']; if(file_put_contents("index.php", $html)){ echo "saved"; //The file got updated } else "error"; } } ?>Nota: - Actualizar/Borrar/Agregar a un archivo en su caso html/php es una tarea compleja y delicada, puede explorar más sobre esto, el código anterior es solo un ejemplo y podría ser inapropiado.
Sugerencias:-
php , ¿por qué? porque document.documentElement.innerHTML; solo obtendrá la frontend de su página, lo cual es arriesgado al actualizar el archivo backend real.Para cualquier consulta comenta abajo.