Enregistrer une modification dynamique en local d'une page html

**madDevl31** · 20/02/2017, 10h32

Bonjour,
je travaille en local, j'ai un simple fichier html, et un script jquery, dans ce fichier jquery j'ajoute dynamiquement des éléments dans la page html comme
un simple paragraphe avec <p> ou un simple <div>lors d'un clic via un bouton, et tout fonctionne bien. Mon problème est que je veux enregistrer ces modifications de manière permanentes dans la page html, c'est à dire que ces nouveaux éléments restent lors du rafraîchissement de la page, donc si je regarde le code de la page html , j'aimerai trouver les balises que j'ai ajouté précédemment.
Merci de votre aide

**badaze** · 20/02/2017, 12h43

Pour que ce doit permanent tu dois enregistrer dans un fichier il te faut utiliser un langage server (php, asp, etc...).
A l'extrême rigueur je pense que tu pourrais utiliser le local storage mais ça ne vaudra que pour ton PC et pour le navigateur que tu auras utilisé.

**patricktoulon** · 20/02/2017, 12h50

a tu essayé simplement un open windows avec dans le body le contenu et au on load un execComad("saveas")(command javascript native )

ou meme sur le document lui meme
il te suffit de recupérer la balise "<HTML>" et son outerHTML
ce qui aura pour effet de récupérer la page avec le code html des balise ajouter dynamiquement
bien sur récupéer les autre balise si il y en a d'autre

ensuite tu fait un
document .write et tu colle le tout et pour finir un execCommand("saveas")
dans la fenetre de choix(dialog) tu choisi le fichier lui même le surwritting fonctionne
je fait comme cela en HTA ca doit etre la meme chose avec un fichier HTML en local

ps:
badaze tu a vue ma derniere reponse sur le canvas ?? j'ai trouver la solution d'adaptationet du sens du gradient

**madDevl31** · 20/02/2017, 19h23

Merci beaucoup pour vos réponses, je vais m'y pencher et voir ce que je peux faire

**nicdodo** · 22/02/2017, 12h45

J'ai eu le même soucis sur un projet avec du drag n drop. Dans mon cas je me dirige vers de l'applicatif du coup je dois résoudre çà en transformant mon DOM en objet Json, une belle galère quand on débute. Mais dans ton cas il peut y'avoir une solution très simple en enregistrant ton DOM au format txt et en faisant un traitement php

Imaginons que ton HTML soit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id = "test">
 
// élément du DOM et élément du DOM qui se rajoute
 
</div>

Je vais imaginer que dans ton serveur tu à ta page html, un dossier nommé php avec un fichier nommé 'save.php , un dossier nommé javascript avec un fichier nommé save.js et un dossier "text" avec dedans un fichier 'test.txt' dans lequel tu colles ton HTML contenu dans la div #test

Pour ton code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function enregistrer()
 
$.post("./php/save.php" ,
{
            resultat: document.getElmeentById('test') 
// en gros tu récupère le html contenu dans la div #test que tu stock dans la variable 'résultat' et tu l'envois à save.php
})

Pour ton code PHP

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?php
 
file_put_contents('../text/modif.txt',$_POST['resultat']);
die();
// tu enregistres le html contenu dans la variable resulat dans le fichier text 'modif.txt'
?>

Maintenant ton fichier html doit ressemble à ça sans oublier de rennomer ta page avec l'extension php:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 
    <head>
      /// les meta, css, etc....
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>/// l’accès à la librairie JQUERY pour le $.post de ta fonction enregistrer
    </head>
    <body>
 
<div id = "test">
 
<?php 
        $modif = 'text/modif.txt';
        if (file_exists($modif)) {
            include 'text/modif.txt';
        } else {
        include 'text/test.txt' ; 
        }
    ?>
</div>
<input type = "button" id = "save" value = "enregistrer"  onclick = 'enregistrer()'/>
 
<script>src="javascript/save.js"></script>

Je suis débutant ce que je te propose est une solution qui m'a été donné par un membre du site que je remercie et qui j’espère pourra t'aider dans ton projet.

**madDevl31** · 23/02/2017, 01h14

ok, merci, je vois à peu près ce que tu veux me montrer, mais à mon avis ça va générer bcp d'aller retour avec le serveur car j'aurai beaucoup de traitements de modification et d'ajout. Pour le langage serveur je ne sais pas encore lequel utiliser, mais en tout cas pas php ca je n'en ai jamais fait mais pourquoi pas, sinon du angular, ou JEE ...
Pour l'instant je mon but est que cette opération marche en local sans utiliser de serveur, vraiment quelque chose de simple. En gros avec juste une page html, j'ai un espèce de formulaire qui permet d'ajouter dynamiquement des éléments dans le code que ce soit des éléments balises html ou même du code CSS dans un autre fichier css. et tout ça en javascript et jquery.
Exemple : modification nobre de page, et background :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 $("#btn_menu_ok").click(function(){
       // ----------definition nbr page---------
 
        var nbr_page_init = $("#input_nbrpage").val();
        if(nbr_page_init == ""){
        }else{
          var nbr_page_init = nbr_page_init * 100+"%";
          $('style').prepend("html{ height:"+nbr_page_init+";}"); 
 
        }
        //--------definition couleur background 
        var choix_coul = $("#input_coulpage").val();
        $("body").css({ backgroundColor : "rgba("+choix_coul+")"});
 
        //----------ENREGISTREMENT MODIFICATION--------
    });

**nicdodo** · 23/02/2017, 01h52

Je vais peut être te dire une bêtise et les personnes plus expérimentés qui liront ça rectifieront s'il le faut mais à ce que je connais la solution qui serait le mieux adapté pour toi qui préfère le js serait de partir sur des enregistrements de tes modifications dans des fichiers json et l'envoi et la réception avec de l'ajax. Apres j'ai vu que tu as des pro qui ton répondu du coup je me sens un peu bête de t'écrire une réponse mais bon

Enregistrer une modification dynamique en local d'une page html

JavaScript

Discussions similaires

Partager

Partager