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

Question

In function form , using Javascript - jointJS I try to make a form which is displayed when I press a button.

I want to keep my data after writing them down in my form and when I try to display my form for the second time to be able to view them in the fields of the form.

How can I do it? So far I can successfully view them for the first time but not for the second time.

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

It seems like what you're looking for is more about how you handle your form that how you process it.

The simplest option for your question seems to be to use a modal :

With bootstrap, you can have a modal, which will hide and show the modal when you click on the button. Clicking on the button will not modify the data in the modal/form (unless you change it so), so it would keep the form data the user entered already.

If you don't want to use a modal (for various reasons), having a form, and hiding it/showing it based on clicks on your button seems to be more appropriate than creating the form each time. By changing the style display to none, the form would be hidden but the data would stay (unless you refresh the page).