CODEWITHSUNDEEP
javascriptjqueryjquery-eventsdocument-ready
Xenology
Xenology

Reputation: 2462

jQuery $(document).ready () fires twice

I've been sifting around the web trying to find out whats going on here and I have not been able to get a concrete answer.

I have one $(document).ready on my site that seams to run multiple times regardless of the code that is inside it.

I've read up on the bug reports for jQuery about how the .ready event will fire twice if you have an exception that occurs within your statement. However even when I have the following code it still runs twice:

$(document).ready(function() {
    try{    
        console.log('ready');
        }
    catch(e){
        console.log(e);
    }
});

In the console all I see is "ready" logged twice. Is it possible that another .ready with an exception in it would cause an issue? My understanding was that all .ready tags were independent of each other, but I cannot seem to find where this is coming into play?

Here is the head block for the site:

<head>
<title>${path.title}</title>
<meta name="Description" content="${path.description}" />
<link href="${cssHost}${path.pathCss}" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="media/js/fancybox/jquery.fancybox.pack.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/landing.js" type="text/javascript" ><!-- --></script>
<script src="/media/es/jobsite/js/functions.js" type="text/javascript"><!-- -->    </script>
<script src="/media/es/jobsite/js/jobParsing.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="/media/es/jobsite/js/queryNormilization.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.metadata.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery/jquery.form.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript" charset="utf-8"><!----></script>
<script src="${jsHost}/js/jquery.i18n.properties-min.js" type="text/javascript" charset="utf-8"><!----></script>

<script type="text/javascript" charset="utf-8">

function updateBannerLink() {
    var s4 = location.hash.substring(1);
    $("#banner").attr('href','http://INTELATRACKING.ORG/?a=12240&amp;c=29258&amp;s4='+s4+'&amp;s5=^');
}

</script>
</head>

Pay no attention to the JSP variables, but as you can see i'm only calling the functions.js file once (which is where the .ready function exists)

Upvotes: 76

Views: 98101

Answers (14)

CaptainGenesisX
CaptainGenesisX

Reputation: 405

My problem was that I had tags referencing my JS file in both my index.cshtml file AND my _Layout.cshtml. This was causing the document.ready function to fire twice, which was causing DataTables to bomb.

Upvotes: -1

user3232196
user3232196

Reputation: 217

I had this happen to me this morning... and what I discovered after closely examining some html code in a jquery modal form that I had recently manipulated, that I'd accidentally removed a closing table tag. I haven't taken the time yet to fully understand why that caused the document.ready function to be called twice, but it did. Adding the closing table tag fixed this issue.

jQuery JavaScript Library v1.8.3 (yes, it is a legacy app)

Upvotes: -1

lominart
lominart

Reputation: 21

I had a similar issue today. A <button type="submit"> caused the $(document).ready(...) event to fire again in my case. Changing the code to <button type="button"> solved the issue for me.

See document.ready function called again after submit button? here on stackoverflow for more details.

Upvotes: 2

Egil Morten Eriksen
Egil Morten Eriksen

Reputation: 1

I had this problem with window.load function was executed twice: The reason was because I had reference to the same javascript-file in the main page as well as a .net usercontrol. When I removed the reference in the main page, the load-function was only executed once.

Upvotes: -1

Alex Sikamiotis
Alex Sikamiotis

Reputation: 1

If the iframe doesnt show anything and is used for other reasons (like uploading a file without reload) you can do something like this :

<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>

Notice that src is not included that prevents the second on ready trigger on the document.

Upvotes: 0

Posis
Posis

Reputation: 1

In my case $(document).ready was firing twice because of bad CSS, check if any part of your CSS has background-image: url('');

Upvotes: 0

Charles HETIER
Charles HETIER

Reputation: 2074

It happened to me also, but I realized that the script had been included twice because of a bad merge.

Upvotes: 44

Charitha Goonewardena
Charitha Goonewardena

Reputation: 4724

There is a possibility to encounter this problem when you add same controller twice in the html.
For an instance:
[js]

app.controller('AppCtrl', function ($scope) {
 $(document).ready(function () {
        alert("Hello");
        //this will call twice 
    });
});

[html]

//controller mentioned for the first time
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>

//same controller mentioned again 
<md-content ng-controller="AppCtrl">
    //some thing
</md-content>

Upvotes: 1

user3048613
user3048613

Reputation: 19

I had a similar problem when I was trying to refresh a partial. I called a return ActionResult instead of a return PartialViewResult. The ActionResult caused my ready() to run twice.

Upvotes: 1

Kevin B
Kevin B

Reputation: 95066

The ready event cannot fire twice. What is more than likely happening is you have code that is moving or manipulating the element that the code is contained within which causes the browser to re-execute the script block.

This can be avoided by including script tags in the <head> or before the closing </body> tag and not using $('body').wrapInner();. using $('body').html($('body').html().replace(...)); has the same effect.

Upvotes: 71

kakauandme
kakauandme

Reputation: 211

Make sure you don't include JS file twice. That was my case

Upvotes: 20

hvdd
hvdd

Reputation: 544

You might consider to use 

window.onload

instead of 

$(document).ready

Upvotes: 4

qJake
qJake

Reputation: 17139

This happened to me when using KendoUI... invoking a popup window would cause the document.ready event to fire multiple times. The easy solution is to set a global flag so that it only runs once:

var pageInitialized = false;
$(function()
{
    if(pageInitialized) return;
    pageInitialized = true;
    // Put your init logic here.
});

It's sort of hack-ish, but it works.

Upvotes: 39

Mouna Cheikhna
Mouna Cheikhna

Reputation: 39658

try putting this in your functions.js to prevent it from being executed twice :

var checkit = window.check_var;
if(checkit === undefined){ //file never entered. the global var was not set.
    window.check_var = 1;
}
else {
    //your functions.js content 
}

however i suggest that you look more into it to see where are you calling the second time.

Upvotes: 3

Related Questions