I have a html website with Sortable.js. I want to save the current state of the body when a user rearranges the list and clicks a save button. I don’t want it to save to local storage but directly to the hosted file, replacing the body html with the new rearranged version.
<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>I believe what I’m trying to achieve is very simple and can be done using php and ajax, but I can’t find any direct answer to my question.
Currently there is only one index.php file.
Security is no issue.
Advertisement
Answer
You can to something like this…
<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>Java script
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"); } } );}php file
<?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"; } }?>Note:- Updating/Erasing/Appending to a file in your case html/php file is a complex and sensitive task, you can explore more on this, the above code is just an example and might be inappropriate.
Suggestions:-
- Do not try to update file containing
phpscript, why.? becausedocument.documentElement.innerHTML;will only get you thefrontendof your page, which is risky while updating the actual backend file. - Save all/updatable/editable file {containing only front end view} in a separate folder, and do changes accordingly, and when saved/changed/reloaded include these files into your page.
- Try to keep the front end and back end scripts as separately as possible.
For any queries comment down.