1

Good day,

I have a table where you can dynamically add/remove rows, on each row you can add an select an item from the list its working perfectly at the moment, what I want to add is for it to retain the added rows and its values even if I page reload my browser?

I have seen on my research that you can attain it by using cookies/localStorage,but would be okay if I store many items on it?

heres my table looks like: enter image description here my JS:

function addRow(){
var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;
var toBeAdded = document.getElementById('toBeAdded').value;

if (toBeAdded=='')
    { toBeAdded = 2; }
else if(toBeAdded>10)
{
  toBeAdded = 10;
}

  for (var i = 0; i < toBeAdded; i++) {
  var rowToInsert = '';
  rowToInsert = "<tr><td><input id='itemName"+rowArrayId+"' required name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />"+
  "<input type='hidden' class='rowId' value='"+rowArrayId+"'>"+
  "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'></td>";
    $("#tblItemList tbody").append(
        rowToInsert+
        "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
        "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
        "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
        "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
        "<td class='subtotal'><center><h3>0.00</h3></center></td>"+
        "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
        "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
        "</tr>");

var rowId = "#itemName"+rowArrayId;
$(rowId).select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    formatNoMatches: function( term ) { 

      $('.select2-input').on('keyup', function(e) {
         if(e.keyCode === 13) 
           {
            $("#modalAdd").modal();          
            $(".select2-input").unbind( "keyup" );
           }
      });

    return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
    },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   

});

rowArrayId = rowArrayId + 1;

};

function productFormatResult(product) {
  var html = "<table><tr>";
  html += "<td>";
  html += product.itemName ;
  html += "</td></tr></table>";
  return html;
}

function productFormatSelection(product) {
   var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
   return selected + product.itemName;
}
  $(".qty, .price").bind("keyup change", calculate);
};

the problem here is whenever Im refreshing the page the Items that I added will also be lost as well as those rows that I've added, any suggestions please? Thanks you very much for your time! Have a nice Day!

melvnberd
  • 3,093
  • 6
  • 32
  • 69
  • 1
    I m always using may you can use jQuery.cookie(); If you want to save all form, you can. you need to read this post about cookie limit : http://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key . If I did this form, I added cookie code, after addNewRow function. And when the loaded the page I call the cookie inside $(document).ready(); – mehmetakifalp Feb 10 '14 at 07:17
  • Thank you for your comment @mehmetakifalp! really helped. gives me some ideas on how to implement it! – melvnberd Feb 10 '14 at 07:33

2 Answers2

2

Your best bet here would be to cookies to store json data.

Your best bet here would be to cookies to store json data.

function storeRowData() {
    var data = [];
    $('.TABLE_NAME tr').each(function () {
        var $this = $(this),
            pname = $this.find(PRODUCT_NAME_INPUT).val(),
            desc = $this.find(PRODCUT_DESC_INPUT).val(),
            quant = $this.find(PRODUCT_QUANTITY_INPUT).val(),
            price = $this.find(PRODUCT_PRICE_INPUT).val();
        var temp = { productName: pname, description: desc, quantity: quant, price: price };
        data.push(temp);
    });

    $.cookie('Table_Rows', JSON.stringify(data), {OPTIONS});
}

Now whenever you add or remove rows, you can call this. And when you reload page just read the cookie and parse the string back to JSON and traverse and call addrow for each row.

NOTE: Be sure to read full documentation on jquery.cookie() Here

Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
1

You can use window.location.reload(true) and $( document ).ready function where you can get current no. of rows.Define row count & column count variable as a global variable.

location.reload(true); 
var rowCount,rowArrayId,toBeAdded ;
$(document).ready(function() {
 rowCount= document.getElementById('tblItemList').rows.length - 1 ;
rowArrayId = rowCount ;
toBeAdded = document.getElementById('toBeAdded').value;
});
Sonal Patil
  • 217
  • 1
  • 6
  • 16
  • Hi @SonalPatil! Im trying to understand your code, but would this store values on localStorage or cookie or nothing at all? What Im trying to ask is How to retain the added rows and its data even if I reload the page. – melvnberd Feb 10 '14 at 07:37