How to preserve TextBox values on client side using wizard next and back button?

Question

I have found great jQuery wizard here Jerod Santo blog which suits my need. I added TextBox on first step to test it.

When I added some value in textbox, clicked next and then back I lost the value.

Here is my demo and here is source code Is there a way to preserve this values on client side without going on server with ajax calls. I think that problem might be content hiding. Do you think there is a solution for this?

Update: I created my own jQuery wizard which does the job. I'll post it as answer sooner or later.

Answer 1

Here you need to maintain mapping of State of the Wizard and the some attribute values for that particular state. I don't remember the exact place from where I used this code. But here are some snippets which would be useful to you.

Map implementation in JS

Map = function(){
  this._dict = [];
}
Map.prototype._get = function(key){
  for(var i=0, couplet; couplet = this._dict[i]; i++){
    if(couplet[0] === key){
      return couplet;
    }
  }
}
Map.prototype.put = function(key, value){
  var couplet = this._get(key);
  if(couplet){
    couplet[1] = value;
  }else{
    this._dict.push([key, value]);
  }
  return this; // for chaining
}
Map.prototype.get = function(key){
  var couplet = this._get(key);
  if(couplet){
    return couplet[1];
  }
}

Then I used Class implementation by John Resig to write a FlowManager which handles all wizards.

var FlowManager = Class.extend({
  init: function(screenList){
    this.screenArray = screenList;
    this._currentIndex = 0;
    this.currentScreen = this.screenArray[this._currentIndex];
    this.map = new Map();
    this.loadFunctionMap = new Map();
  },

  getCurrentScreen: function(){
    return this.currentScreen;
  },
  _onload: function(){    
      //TODO
  },
  loadDefaultScreen: function(){
       this._currentIndex=0;
       this.currentScreen = this.screenArray[this._currentIndex];
       this.render();   
  },
  loadScreen: function(screenName){

  },   
  _next: function(){

  },
  _previous: function(){

  },
  render: function(){
     // your logic
  },  
  loadNextScreen: function(){
       this._next();
       this.render();   
  },
  loadPrevScreen: function(){
       this._previous();
       this.render();
  }
  // any other utility functions
});

I can then invoke it as below.

var CreatePackageFlow = FlowManager.extend({
      init: function(screenList){
     this._super(screenList);
     //global map data for screens
     this.map.put("UploadPackageSubtitle","Create New Package : Upload Resources");  
     this.map.put("SummarySubtitle","Create New Package : Summary");
      },
      //onload screen functions TODO: auto-invoke them on screen navigation
      _CreatePackage : function(){
      },
      _UploadPackage : function(){
      },
      _PackageSummary : function(){    
      }
});

and

newPackageFlow = new CreatePackageFlow(["CreatePackage","UploadPackage","PackageSummary"]);
newPackageFlow.render();

I hope you'll get idea how you can use this snippets. We had lot of wizards in our screens so used the above mentioned logic. Its not ideal but modular for static wizards where you have commit only on the last page.

Answer 2

Here is the solution. I completely changed code and created my own wizard. Demo and source code are available.