CODEWITHSUNDEEP
javascriptjquerydom
galdikas
galdikas

Reputation: 1669

Preserve form state over page refresh?

I am trying to come up with a way to preserve form state over page refresh/reload. So far I have found dumbformstate plug-in. Which works beautifully. The only problem I have is with dynamically injected fields. They do not persist over the refresh. Anyone have any suggestions that would work with dynamically injected fields?

Or if anyone has used this particular plug-in know if it is supposed to work with dynamic, fields, and I am just inserting then the wrong way? This is how I do it:

success: function(data) {
    var html = $("<div><h3>"+catName+"</h3></div>");
    html.find("h3").data("category",catName);
    subCatContainer.append(html);
    subCatsFetched = subCatContainer.find("h3");

    $(data).each(function(){
        var input = $('<label>'+this.sub_cat_name+'<input type="checkbox" name="sub_cat[]" value="'+this.sub_cat_id+'" /></label>');
        html.append(input);
    });
}

Or is it possible that fields do not persist due to them being inside a div element? There is reason why they have to be inside of div, so there is nothing I can really do about it realistically.

Or another thing I was trying to look for, is some generic "DOM preserver", where I can just take some arbitrary piece of DOM, and preserve it via refreshes (cookies/localstorage). but in that case I am guessing the values of inputs will end up not being preserved?

EDIT:

This question does not really have an answer. As my assumption of what this plug-in does, was wrong. All it does is stores information about the state off all elements of the form, it does not do anything to preserve the dynamically generated DOM elements. After using some localStorage to store the generated DOM, sates of all inputs would persist as expected!

Upvotes: 0

Views: 681

Answers (1)

Miguel Jim&#233;nez
Miguel Jim&#233;nez

Reputation: 1303

How about if you instantiate the plugin after automatically filling the fields? Something like this in your Javascript:

//Load field's content
loadData( ... );

//Instantiate plugin
$('your-form').dumbFormState( ... )

Does that work?

Upvotes: 1

Related Questions