javascript - 当我使用 Javascript 重新加载表单时，我无法保留之前保存的弹出表单数据 - jointJS

Question

在函数form中，使用Javascript - jointJS，我尝试制作一个按下按钮时显示的表单。

我想在将数据写在表单中后保留这些数据，并且当我尝试第二次显示表单时能够在表单字段中查看它们.

我该怎么做？到目前为止，我第一次可以成功查看它们，但第二次就不行了。

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

您所寻找的似乎更多是关于如何处理表单，而不是如何处理它。

您的问题最简单的选择似乎是使用模态:

使用 bootstrap，您可以拥有一个模态框，当您单击按钮时，它将隐藏和显示模态框。单击该按钮不会修改模式/表单中的数据(除非您如此更改)，因此它将保留用户已输入的表单数据。

如果您不想使用模式(出于各种原因)，那么拥有一个表单并根据按钮的点击隐藏/显示它似乎比每次创建表单更合适。通过将样式显示更改为无，表单将被隐藏，但数据将保留(除非刷新页面)。