Javascript global functions and variable reseting

Question

I have some global functions which I need to use different places of my project. In one page, I have to open different pages based on the data I have in my current tab. I have to change my local variables before sending them as parameter for the next page tab. I have noticed that after opening a new tab page, the global variables are also changed and affecting the other functions. Here is the my 2 js functions,

function X()
{
  "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row);

    rawData.Models = "some text"; 
    OpenPageA(rawData);
}

function Y()
{
   "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row);

    rawData.Models = ["some text"]; 
    OpenPageB(rawData);
}

If I call function X first and then Y, everything works. But after calling function Y, if I call again function X, it returns an error. What I have noticed that since rawData.Models data type is different for function X and Y, while deserializing it in the backend, it returns JSON serializing exception "Newtonsoft.Json.JsonReaderException: 'Unexpected character encountered while parsing value:"

Do I need to clear/reset the global function variable cache every time in the js functions?

Answer 1

So, how I have resolved my issue by changing the variable name to avoid the conflict. I renamed the property name Models in function Y as ModelList and it resolved the issue. Here is the solution,

function X()
{
  "use strict";
  var tab = globalFunctionToGetActiveTab(),
    view  = globalFunctionToGetView(tab.id),
    tabPane = tab.getPane(),
    currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
    row = $(e).closest("tr"),
    rawData = currentGrid.dataItem(row);

    rawData.Models = "some text"; 
    OpenPageA(rawData);
}

function Y()
{
   "use strict";
   var tab = globalFunctionToGetActiveTab(),
       view  = globalFunctionToGetView(tab.id),
       tabPane = tab.getPane(),
       currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
       row = $(e).closest("tr"),
       rawData = currentGrid.dataItem(row);

       rawData.ModelList = ["some text"]; // Here I have changed it
       OpenPageB(rawData);
 }

But it would be nice if I know how to manage the cache issue without renaming since the functions are separate.