-1

I have a page that users can create more and more fields dynamically every time they clone another element. I have 10 different DIV's on my page and each one can be "cloned" using jQuery Drag and Drop effect into a container infinite amount of times. Every time the end-user creates a new item inside the container, they can then manipulate settings for that item they created.

For example a new clone of a DIV that is in a container can have a series of options such as Text, Color, Size, Thinness, and maybe 20+ more options that can be set/changed by the end-user.

Of course I want to be able to save these settings on a per-item bases so when they are done adding/cloning the DIVs and setting all the properties they want for each individual item then when they hit "SAVE" it will submit everything to server and save.

However, my confusion in HTML is I don't know the best way to store all these settings temporarily before submitting them off.

Here are the two things I've found as possibilities from researching which is using jQuery data sets: https://api.jquery.com/data/

Which would be simply using 

$("#idofDiv").data("key", "value");
$("#idofDiv").data("key"); //returns value

Another way I've found was on: How to store temporary data at the client-side and then send it to the server

This method talks about building out an array to store temporary data before being sent. While I really like the array/table option better then jQuery simply because an easy JSON.stringify around the array/table of information to be submitted would be much easier to handle on the back end, the problem I have with this option is there is no easy way to "change" the information if the end-user came back to change a property.

What I mean by this is if I create an object for storage using...

var table=[];
table.push({name:"div1", color:"red"});

In order for me to pull this information out, I would have to basically perform a for-next loop on all the objects in the array to find if the name field = what I'm looking for, then pull all the values out 1 by 1 then after i'm done re-push the changed information.

Are these really the only 2 options that I have? Is there any lite-library or other methods that would make life a lot easier for saving information on client side before pushing it to server? Maybe a mix of the two where it stores array of data with a key to be able to retrieve easier?

Community
  • 1
  • 1
eqiz
  • 1,521
  • 5
  • 29
  • 51

1 Answers1

0

In case anyone cares in the future..

What I ended up doing was a foreach loop over all the items pulling out the jQuery Data Set information and then saving it as a JSON in a html input element value located within a form post that just submitted it to the php page.

            var objectTable = [];
            var newEntry = {};

            $("input[type=text]").each(function() {

                var textFieldName = $(this).prop("id");

                var value = $(theField).data(textFieldName);
                if (textFieldName != "fieldName") {
                    if (value === undefined) {
                       newEntry[textFieldName] = "";
                    } else {
                       newEntry[textFieldName] = value;
                    }   
                }
            objectTable.push(newEntry);
            });
            $("#json").prop('value', JSON.stringify(objectTable));
eqiz
  • 1,521
  • 5
  • 29
  • 51