Je ne peux pas conserver mes données de formulaire popup précédemment sauvegardées quand je recharge mon formulaire en utilisant Javascript - jointJS

Question

Dans la fonction form, en utilisant Javascript - jointJS j'essaye de faire un formulaire qui est affiché quand j'appuie sur un bouton.

Je veux garder mes données après les écrire sous ma forme et quand j'essaie d'afficher ma forme pour la deuxième fois pour être en mesure de les voir dans les champs du formulaire.

Comment puis-je le faire? Jusqu'à présent, je peux les voir avec succès pour la première fois, mais pas pour la deuxième fois.

form: function(){ 
      var selectedObjectDataText = JSON.stringify(this.selection.invoke('toJSON')); 
      var selectedObjectDataJSON = JSON.parse(selectedObjectDataText); 
      if(selectedObjectDataJSON.length > 0){ 
       if(selectedObjectDataJSON[0].attrs["text"]["text"] == "Activity"){ 
        $("#detailsDialog").dialog({ 
         autoOpen: false, 
         width: 500, height: 600, 
         close: function() { 
          $("#detailsForm").validate().resetForm(); 
          $("#detailsForm").find(".error").removeClass("error"); 
         } 
        }); 

        $("#detailsForm").validate({ 
         rules: { 
          name: { required: true}, 
          displayed_name: { required: true}, 
          mode: "required", 
          process_group: "required", 
          process_admin: "required", 
          process_in_force_from: { required: true}, 
          process_in_force_to: { required: true}, 
          created: { required: true}, 
          website: { required: true}, 
          version: { required: true}, 
         }, 

         submitHandler: function() { 
          formSubmitHandler(selectedObjectDataJSON, dataJSON); 
         } 
        }); 

        var formSubmitHandler = $.noop; 

        var showDetailsDialog = function(client, selectedObjectDataJSON, dataJSON) { 
         if(client.length > 0){ 
          alert("BRHKA DATA"); 
          $("#name").val(client[0].name); 
          $("#displayed_name").val(client[0].displayed_name); 
          $("#mode").val(client[0].mode); 
          $("#process_group").val(client[0].process_group); 
          $("#process_admin").val(client[0].process_admin); 
          $("#process_in_force_from").val(client[0].process_in_force_from); 
          $("#process_in_force_to").val(client[0].process_in_force_to); 
          $("#website").val(client[0].website); 
          $("#created").val(client[0].created); 
          $("#version").val(client[0].version); 
         } 
         else{ 
          $("#name").val(''); 
          $("#displayed_name").val(''); 
          $("#mode").val(''); 
          $("#process_group").val(''); 
          $("#process_admin").val(''); 
          $("#process_in_force_from").val(''); 
          $("#process_in_force_to").val(''); 
          $("#website").val(''); 
          $("#created").val(''); 
          $("#version").val('');      
         } 

         formSubmitHandler = function(selectedObjectDataJSON, dataJSON) { 
          saveClient(client, selectedObjectDataJSON, dataJSON); 
         }; 

         $("#detailsDialog").dialog("option", "title", "Διαδικασία") 
          .dialog("open"); 
        }; 

        var saveClient = function(client, selectedObjectDataJSON, dataJSON) { 
         $.extend(client, { 
          Name: $("#name").val(), 
          Displayed_Name: $("#displayed_name").val(), 
          Mode: parseInt($("#mode").val(), 10), 
          Process_Group: parseInt($("#process_group").val(), 10), 
          Process_Admin: parseInt($("#process_admin").val(), 10), 
          Process_In_Force_From: $("#process_in_force_from").val(), 
          Process_In_Force_To: $("#process_in_force_to").val(), 
          Website: $("#website").val(), 
          Created: $("#created").val(), 
          Version: $("#version").val(), 
         }); 

         var position = -1; 

         if(dataJSON.length > 0){ 
          for(var i=0;i<dataJSON.length && position < 0;i++){ 
           var var1 = JSON.stringify(dataJSON[i].ActivityID); 
           var var2 = JSON.stringify(selectedObjectDataJSON[0].id); 

           alert(var1 + " - " + var2); 
           if(var1 == var2){ 
            alert("BRIKA IDIO"); 
            position = i; 
           } 
          } 
         } 

         if(position >= 0){ 
          dataJSON[position].name = $("#name").val(); 
          dataJSON[position].displayed_name = $("#displayed_name").val(); 
          dataJSON[position].mode = $("#mode").val(); 
          dataJSON[position].process_group = $("#process_group").val(); 
          dataJSON[position].process_admin = $("#process_admin").val(); 
          dataJSON[position].process_in_force_from = $("#process_in_force_from").val(); 
          dataJSON[position].process_in_force_to = $("#process_in_force_to").val(); 
          dataJSON[position].created = $("#created").val(); 
          dataJSON[position].website = $("#website").val(); 
          dataJSON[position].version = $("#version").val(); 
         } 
         else{ 
          var myhtml = { "ActivityID": selectedObjectDataJSON[0].id, 
              "name": $("#name").val(), 
              "displayed_name": $("#displayed_name").val(), 
              "mode": $("#mode").val(), 
              "process_group": $("#process_group").val(), 
              "process_admin": $("#process_admin").val(), 
              "process_in_force_from": $("#process_in_force_from").val(), 
              "process_in_force_to": $("#process_in_force_to").val(), 
              "created": $("#created").val(), 
              "website": $("#website").val(), 
              "version": $("#version").val() }; 

          dataJSON.push(myhtml); 
         } 

         $("#formData").html(JSON.stringify(dataJSON)); 
         $("#detailsDialog").dialog("close"); 
        }; 


        var activityData = JSON.parse("[]"); 

        var objData = $("#formData").html();      
        var dataJSON = JSON.parse(objData); 

        var position = -1; 
        var selectedObjectDataText = JSON.stringify(this.selection.invoke('toJSON')); 
        var selectedObjectDataJSON = JSON.parse(selectedObjectDataText);  


        alert(JSON.stringify(selectedObjectDataJSON[0].id)); 

        if(dataJSON.length > 0){ 
         for(var i=0;i<dataJSON.length && position < 0;i++){ 
          var var1 = JSON.stringify(dataJSON[i].ActivityID); 
          var var2 = JSON.stringify(selectedObjectDataJSON[0].id); 
          if(var1 == var2){ 
           position = i; 
          } 
         } 
        } 

        if(position >= 0){ 
         activityData.push(dataJSON[position]); 
        } 

        showDetailsDialog(activityData, selectedObjectDataJSON, dataJSON); 

       } 
      } 

     }, 

Answer 1

Il semble que ce que vous recherchez concerne davantage la façon dont vous gérez votre formulaire que la façon dont vous le traitez.

L'option la plus simple pour votre question semble être d'utiliser un modal:

Avec bootstrap, vous pouvez avoir un modal, qui cachera et montrer le modal lorsque vous cliquez sur le bouton. Cliquer sur le bouton ne modifiera pas les données dans le modal/formulaire (à moins que vous ne le changiez), donc il conserverait les données de formulaire que l'utilisateur a déjà saisies. Si vous ne voulez pas utiliser un modal (pour diverses raisons), avoir un formulaire, et le cacher/l'afficher en fonction des clics sur votre bouton semble être plus approprié que de créer le formulaire à chaque fois. En changeant l'affichage de style à aucun, le formulaire serait masqué mais les données resteraient (sauf si vous actualisez la page).