当我使用 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，你可以有一个模态，当你点击按钮时，它会隐藏和显示模态。单击该按钮不会修改 modal/form 中的数据（除非您这样更改），因此它会保留用户已经输入的表单数据。

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

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

I can't keep my previously saved popup form data when I reload my form using Javascript - jointJS

javascript

forms

jquery

jointjs

rappid