Styjun

Can I bring this power bank on board the aircraft?

What is the point of impeaching Trump?

Booting Ubuntu from USB drive on MSI motherboard -- EVERYTHING fails

Re-entering the UK after overstaying in 2008

Could the Queen overturn the UK Supreme Court ruling regarding prorogation of Parliament?

Airport Security - advanced check, 4th amendment breach

Short story about a potato hotel that makes its guests into potatoes throughout the night

Generating numbers with cubes

A word that refers to saying something in an attempt to anger or embarrass someone into doing something that they don’t want to do?

Sending mail to the Professor for PhD, after seeing his tweet

How is this situation not a checkmate?

Are there types of animals that can't make the trip to space? (physiologically)

Isn't the detector always measuring, and thus always collapsing the state?

Is "weekend warrior" derogatory?

The answer is a girl's name (my future granddaughter) - can anyone help?

Why is there such a singular place for bird watching?

PhD Length: are shorter PhD degrees (from different countries) valued differently in other counter countries where PhD Is a longer process?

How can Germany increase investments in Russia while EU economic sanctions against Russia are still in place?

Is there a pattern for handling conflicting function parameters?

Can a passenger predict that an airline or a tour operator is about to go bankrupt?

Why has Speaker Pelosi been so hesitant to impeach President Trump?

How are proofs normally constructed in a write up, in one line or split up into multiple lines?

IEEE 754 square root with Newton-Raphson

Phonetic distortion when words are borrowed among languages

Need to prioritize between two $(document).ready functions in two different JS files being called by the same HTML page

Commonly accepted best practices around code organization in JavaScriptWhere should I put <script> tags in HTML markup?How to make JavaScript execute after page load?How to get the difference between two arrays in JavaScript?What is the difference between call and apply?What happens when you have two jQuery $(document).ready calls in two JavaScript files used on the same HTML page?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itScript Tag - async & deferRails 4: how to use $(document).ready() with turbo-linksxing / wysihtml5 unescapes &lt; and &gt;

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

2

I have an HTML page which includes 2 JavaScript files (in the same order)

<script src="../js/common_js/selectStore.js"></script>
<script src="../js/common_js/dashboard.js"></script>

Note: selectStore.js is a common JS file throughout the Web App
and dashboard.js is specific to the HTML page in question.

Both of these script files have $(document).ready as follows

Inside selectStore.js:

$(document).ready(function() 
 requestUserStoreList();
);

Inside dashboard.js:

$(document).ready(function() 
 requestDashLaborCost();
);

requestUserStoreList() gets a list of stores, passes it to another function which then stores the current storeID in session storage.

requestDashLaborCost() gets the current storeID from the session storage to run a 'POST' API.

Currently requestDashLaborCost() gets a null value for the
storeID as it is executed before the requestUserStoreList().

My question is how do I make sure that requestUserStoreList()
executes before requestDashLaborCost() on $(document).ready?

Thank you.

javascript jquery

share|improve this question

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Could you dispatch a custom event when you first function is complete. Take a look here: developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…
  
  – Bibberty
  Mar 28 at 21:05
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm fairly sure that you can consolidate both calls in the same .js file one right after the other if you wanted, and they would fire sequentially in the order they're executed.
  
  – AgileFox
  Mar 28 at 21:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Based on what you've said, the code in selectstore.js would be processed first and with multiple document.ready functions, the order they are registered is the order that they are invoked.
  
  – Scott Marcus
  Mar 28 at 21:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You may want to use setTimeout to delay when the second function is called.
  
  – Damien Asseya
  Mar 28 at 21:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Harsh, are you able to edit these files? Or can you not change them?
  
  – Bibberty
  Mar 28 at 21:20
  

  
  
  
  

 | 
show 6 more comments

2

I have an HTML page which includes 2 JavaScript files (in the same order)

<script src="../js/common_js/selectStore.js"></script>
<script src="../js/common_js/dashboard.js"></script>

Note: selectStore.js is a common JS file throughout the Web App
and dashboard.js is specific to the HTML page in question.

Both of these script files have $(document).ready as follows

Inside selectStore.js:

$(document).ready(function() 
 requestUserStoreList();
);

Inside dashboard.js:

$(document).ready(function() 
 requestDashLaborCost();
);

requestUserStoreList() gets a list of stores, passes it to another function which then stores the current storeID in session storage.

requestDashLaborCost() gets the current storeID from the session storage to run a 'POST' API.

Currently requestDashLaborCost() gets a null value for the
storeID as it is executed before the requestUserStoreList().

My question is how do I make sure that requestUserStoreList()
executes before requestDashLaborCost() on $(document).ready?

Thank you.

javascript jquery

share|improve this question

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Could you dispatch a custom event when you first function is complete. Take a look here: developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…
  
  – Bibberty
  Mar 28 at 21:05
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm fairly sure that you can consolidate both calls in the same .js file one right after the other if you wanted, and they would fire sequentially in the order they're executed.
  
  – AgileFox
  Mar 28 at 21:09
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Based on what you've said, the code in selectstore.js would be processed first and with multiple document.ready functions, the order they are registered is the order that they are invoked.
  
  – Scott Marcus
  Mar 28 at 21:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You may want to use setTimeout to delay when the second function is called.
  
  – Damien Asseya
  Mar 28 at 21:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Harsh, are you able to edit these files? Or can you not change them?
  
  – Bibberty
  Mar 28 at 21:20
  

  
  
  
  

 | 
show 6 more comments

I have an HTML page which includes 2 JavaScript files (in the same order)

<script src="../js/common_js/selectStore.js"></script>
<script src="../js/common_js/dashboard.js"></script>

Note: selectStore.js is a common JS file throughout the Web App
and dashboard.js is specific to the HTML page in question.

Both of these script files have $(document).ready as follows

Inside selectStore.js:

$(document).ready(function() 
 requestUserStoreList();
);

Inside dashboard.js:

$(document).ready(function() 
 requestDashLaborCost();
);

requestUserStoreList() gets a list of stores, passes it to another function which then stores the current storeID in session storage.

requestDashLaborCost() gets the current storeID from the session storage to run a 'POST' API.

Currently requestDashLaborCost() gets a null value for the
storeID as it is executed before the requestUserStoreList().

My question is how do I make sure that requestUserStoreList()
executes before requestDashLaborCost() on $(document).ready?

Thank you.

javascript jquery

share|improve this question

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

<script src="../js/common_js/selectStore.js"></script>
<script src="../js/common_js/dashboard.js"></script>

$(document).ready(function() 
 requestUserStoreList();
);

$(document).ready(function() 
 requestDashLaborCost();
);

share|improve this question

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

share|improve this question

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

asked Mar 28 at 21:03

HarshHarsh

4177 bronze badges

1 Answer
1

active

oldest

votes

3

Here is how we might use CustomEvent to trigger the code in our second script file.

NOTE: because we just need to do work there is no need to pass detail.

Obviously snippets do not support two files. But you get the idea.

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

If we are doing some async work in our first method:

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

For documentation on CustomEvent see:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

And here is documentation for CustomEvents in jQuery:

https://learn.jquery.com/events/introduction-to-custom-events/

share|improve this answer

edited Mar 28 at 21:50

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Since using jQuery can use jQuery custom events also. A bit less typing involved
  
  – charlietfl
  Mar 28 at 21:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @charlietfl can do indeed.
  
  – Bibberty
  Mar 28 at 21:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bibberty It worked, Thank you.
  
  – Harsh
  Mar 29 at 6:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding !!
  
  – Bibberty
  Mar 29 at 6:35
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406813%2fneed-to-prioritize-between-two-document-ready-functions-in-two-different-js-f%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

Here is how we might use CustomEvent to trigger the code in our second script file.

NOTE: because we just need to do work there is no need to pass detail.

Obviously snippets do not support two files. But you get the idea.

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

If we are doing some async work in our first method:

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

For documentation on CustomEvent see:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

And here is documentation for CustomEvents in jQuery:

https://learn.jquery.com/events/introduction-to-custom-events/

share|improve this answer

edited Mar 28 at 21:50

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Since using jQuery can use jQuery custom events also. A bit less typing involved
  
  – charlietfl
  Mar 28 at 21:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @charlietfl can do indeed.
  
  – Bibberty
  Mar 28 at 21:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bibberty It worked, Thank you.
  
  – Harsh
  Mar 29 at 6:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding !!
  
  – Bibberty
  Mar 29 at 6:35
  

  
  
  
  

add a comment
 | 

3

Here is how we might use CustomEvent to trigger the code in our second script file.

NOTE: because we just need to do work there is no need to pass detail.

Obviously snippets do not support two files. But you get the idea.

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

If we are doing some async work in our first method:

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

For documentation on CustomEvent see:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

And here is documentation for CustomEvents in jQuery:

https://learn.jquery.com/events/introduction-to-custom-events/

share|improve this answer

edited Mar 28 at 21:50

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Since using jQuery can use jQuery custom events also. A bit less typing involved
  
  – charlietfl
  Mar 28 at 21:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @charlietfl can do indeed.
  
  – Bibberty
  Mar 28 at 21:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Bibberty It worked, Thank you.
  
  – Harsh
  Mar 29 at 6:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Happy coding !!
  
  – Bibberty
  Mar 29 at 6:35
  

  
  
  
  

add a comment
 | 

Here is how we might use CustomEvent to trigger the code in our second script file.

NOTE: because we just need to do work there is no need to pass detail.

Obviously snippets do not support two files. But you get the idea.

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

If we are doing some async work in our first method:

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

For documentation on CustomEvent see:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

And here is documentation for CustomEvents in jQuery:

https://learn.jquery.com/events/introduction-to-custom-events/

share|improve this answer

edited Mar 28 at 21:50

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 myDataValue = 10;


document.addEventListener('DOMContentLoaded', () => 
 doWorkNumberOne();
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() 
 return new Promise((resolve, reject) => 
 setTimeout(function() 
 myDataValue = 10;
 resolve();
 , 1500);
 );


document.addEventListener('DOMContentLoaded', () => 
 console.log('this takes 1.5secs');
 // This is Async so we need to raise when done.
 doWorkNumberOne().then(() => 
 document.dispatchEvent(new CustomEvent('MyCustomEvent'));
 );
);

// This is in file two
function doWorkNumberTwo() 
 console.log(myDataValue);


document.addEventListener('MyCustomEvent', () => 
 doWorkNumberTwo();
);

share|improve this answer

edited Mar 28 at 21:50

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges

answered Mar 28 at 21:29

BibbertyBibberty

3,21111 gold badge33 silver badges1919 bronze badges