Sample Javascript template returning the initial value of a private property

Question

I try to get private property from a module, but always get the initial value, not the latest.

When the form is submitted and the onSuccess call is called, I set partnerId = 10.

After that, I have a click event that gets the partner id and gets -1

search.js

var SearchForm = (function ($) { "use strict"; // Private variables // Private functions var onSuccess = function () { PartnerDetail.setPartnerId(10); }; // Public functions return { onSuccess: onSuccess, }; })(jQuery); 

detail.js

 var PartnerDetail = (function ($) { "use strict"; var _partnerId = -1; var getPartnerId = function () { return _partnerId; }; var setPartnerId = function (id) { _partnerId = id; } // Public functions return { getPartnerId: getPartnerId, setPartnerId: setPartnerId }; })(jQuery); 

search.internal.js

 var SearchAll = (function ($) { "use strict"; // Private variables // Private functions var init = function () { $("#partner").on("click", function () { var p = PartnerDetail.getPartnerId(); console.log(p); ==> -1 } }; // Public functions return { init: init }; })(jQuery); 

(main page)

 // Load when ready $(document).ready(function () { SearchAll.init(); }); 

Answer 1

Your code looks fine:

I put the following code in jsFiddle and it registers 10:

HTML:

 <button id="partner">CLICK!</button> 

JS:

 var PartnerDetail = (function () { var _partnerId = -1; var getPartnerId = function () { return _partnerId; }; var load = function (id) { _partnerId = id; } // Public functions return { getPartnerId: getPartnerId, load: load }; })(); // File search.js var SearchForm = (function ($) { "use strict"; // Private variables // Private functions var onSuccess = function () { PartnerDetail.load(10); }; // Public functions return { onSuccess: onSuccess, }; })(jQuery); var SearchAll = (function ($) { "use strict"; // Private variables // Private functions var init = function () { $("#partner").on("click", function () { var p = PartnerDetail.getPartnerId(); console.log(p); }); }; // Public functions return { init: init }; })(jQuery); // Load when ready $(document).ready(function () { SearchAll.init(); SearchForm.onSuccess(); }); 

Answer 2

@Patrick - your code is good, except for two tiny mistakes. You need to comment ==> -1 and close the bracket in the next line. In addition, you did not specify the form code and behavior (i.e., onSuccess ). In addition, you did not indicate which browser you are using.

i.e.

  console.log(p); ==> -1 } 

it should be

  console.log(p); // ==> -1 }); 

Decision:

Here is an example of its operation in jsbin

• You mentioned onSuccess is called when you onSuccess form, but you did not include this code in your example. Therefore, I allowed to add it to my example.
• logs -1 before submitting form 10 after
• tested in Opera 25
• uses separate js files (on request)

Below is a code snippet also showing behavior ( NB , which loads a little slowly).

 // Load when ready $(document).ready(function () { SearchAll.init(); }); 

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/53c9248298268cea69a49e24895cdc59f9b7da82/detail.js"></script> <script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/b2cd08800fcec69195e85efd508015c699a4926d/search.internal.js"></script> <script src="https://rawgit.com/nickgrealy/bc1f5452cff303348fe7/raw/dfb8296180dc3f3302f4a9175c6961b8089fb947/search.js"></script> <form target="#" onsubmit="SearchForm.onSuccess();return false;"> <input type="Submit" value="1. Form Submit" /> </form> <input id="partner" type="button" value="2. Log partnerId"></button> 

For reference, here is the js file source code in gist.

Answer 3

In my opinion, this has something to do with the execution time of your events. Your onSucess function onSucess called when you onSucess your form, right? But your onClick function onClick executed immediately. Therefore, your variable will always have the initial property -1 in the onClick event, because onSucess not called at the moment of onClick Here is a small table to tell you more about your events:

 onclick, value = -1 onclick, value = -1 value=10 onclick, value = -1 value=10 value=10 

Answer 4

Before you get PartnerDetail.getPartnerId(); , set its value.

 PartnerDetail.setPartnerId(10); var p = PartnerDetail.getPartnerId(); console.log(p) // 10 

Demo : http://jsfiddle.net/zLexLvza/1/

Answer 5

In appearance. You have saved your functions in different files. Each file will maintain its own personal state. You will need to combine code segments into one file or implement a download template that will provide access to the private state of other files.

Details on the module template for sharing private state between files