CODEWITHSUNDEEP
javascriptjquerycookies
melvnberd
melvnberd

Reputation: 3163

How to properly set $.cookie so it will only be alive on current page

Im using $.cookie to save my current's page form even after a reload:

here is my JS:

$(document).ready(function() {
if($.cookie('Table_Rows')){
loadCookieData();
$(".qty, .price").bind("keyup change", calculate);
 }
 else{addRow(0);}
});

Im saving my cookies before the page reload: (is it okay for me to this?) 

window.onbeforeunload = function(event)
{
storeRowData();
console.log("cookie saved!");
};

But my main problem is even if I navigate to other pages like:

http://mydomain.dev/purchase_orders/create/2 <--cookie created here

http://mydomain.dev/purchase_orders/create/3 <-- loadCookieData(); will still be triggered?

I want it to stay on 1 url/page only and will not affect other pages? any Idea please?

storeRowData.js

var storeRowData = function () {
 var data = []; 
$('#tblItemList tbody>tr:visible').each(function () {
    var $this = $(this),

        pId = $this.find("#itemId").val();
        pname = $this.find('input.itemSearch').attr("value"),
        desc = $this.find(".description").val(),
        quant = $this.find(".qty").val(),
        rowId = $this.find(".rowId").val(),
        price = $this.find(".price").val();

    var temp = { 
        productName: pname, 
        itemId:pId,
        description: desc,
        quantity: quant, 
        price: price, 
        rowId: rowId };
    data.push(temp);
});
$.cookie('Table_Rows', JSON.stringify(data), {expires: 7, path: '/'});
}

loadCookieData.js

function loadCookieData(){

temp = $.cookie('Table_Rows');
var parseData = JSON.parse(temp);
console.log(parseData);
var html ='';



for (i in parseData) {

    subTotal = parseData[i].quantity*parseData[i].price;
    var st = new Number(subTotal);
    var sub = st.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');

html+="<tr><td><input id='itemName"+parseData[i].rowId+"' value='"+parseData[i].productName+"' required name='product["+parseData[i].rowId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />"+
  "<input type='hidden' class='rowId' value='"+parseData[i].rowId+"'>"+
  "<input type='hidden' name='product[" + parseData[i].rowId + "][itemId]' value='"+parseData[i].itemId+"' id='itemId'></td>"+
  "<td><textarea readonly name='product["+parseData[i].rowId+"][description]' class='form-control description' rows='1' >"+parseData[i].description+"</textarea></td>"+
  "<td><input type='number' value='"+parseData[i].quantity+"' min='1' max='9999' name='product["+parseData[i].rowId+"][quantity]' class='qty form-control' required />"+
  "<input id='poItemId' type='hidden' name='product[" + parseData[i].rowId + "][poContentId]'></td>"+
  "<td><input type='number' value='"+parseData[i].price+"' min='1' step='any' max='9999' name='product["+parseData[i].rowId+"][price]' class='price form-control' required /></td>"+
  "<td class='subtotal'><center><h3>"+sub+"</h3></center></td>"+
  "<input type='hidden' name='product["+parseData[i].rowId+"][delete]' class='hidden-deleted-id'>"+
  "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
  "</tr>";
    }

$("#tblItemList tbody").html(html);

for (i in parseData){
  var inputBox = "#itemName"+parseData[i].rowId;
  $(inputBox).select2(sOptions);
}
calculate(); 
}

Any suggestions/Comments would really be appreciated! Thank you very much for your time and have a good day ahead!

Upvotes: 0

Views: 578

Answers (1)

steinmas
steinmas

Reputation: 398

Try storing the page information whenever you save the cookie.

If you are on page http://mydomain.dev/purchase_orders/create/2 , try saving the cookie as 

$.cookie('Table_Rows-2', JSON.stringify(data), {expires: 7, path: '/'});

Whenever you try and load a cookie, use the page number and the Table_Rows-2 cookie won't load if you're on page 3.

Upvotes: 1

Related Questions