StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLinked JavaScript is loaded multiple times when done with AJAX
text
Body
copied!<p>I am experiencing the strangest behaviour on our website, and it is making things incredibly slow.</p> <p>My team and I have a website running entirely on AJAX. So for the login, I have some js ajax that loads the login box into our index page. The html containing the login box has a script link in the head. This script listens for the login form submission, and sends the form data to the server for authentication through ajax.</p> <p>The html that contains the login box only gets loaded once, but the js file that it links to gets loaded multiple times. The amount of times change. From 5 times to 15 times and I cannot see a pattern or anything. This happens everywhere on our site, not just at login time.</p> <p>This issue really has me stumped and I'm totally stuck. Is it because I have ajax in a js file that is loaded in initially with ajax?</p> <p>I would really appreciate your insight and help! </p> <p>EDIT:</p> <p>As requested, some code:</p> <p>This is a stripped down version of loadContent() in the Interface.js file. This specific function loads all site content into the content area on index.php. When the page is refreshed, the first thing sent to the function is the location of the login.php file, containing the login box:</p> <pre><code>loadContent: function(page) { var self = this; //just some animations to make things look good $(self.error).fadeOut(150, function() { $(self.content).fadeOut(150, function() { $(self.loading).fadeIn(150, function() { $.ajax({ url: page, success: function(data) { //response data var $response = $(data); $(self.content_1).html($response); //definitions for contentbox-2 self.contentHeading_2.html("Replies:"); self.content_2.html(postReplies); //redisplay the content after it has loaded in. $(self.loading).fadeOut(150, function() { $(self.content).fadeIn(150, function() { // Content faded in }); }); }, error: function() { $(self.loading).fadeOut(150, function() { $(self.error).fadeIn(150, function() { // Error faded in }); }); } }); }); }); }); this.page = page; } </code></pre> <p>And then the login.php file:</p> <pre><code><!DOCTYPE HTML> <html> <head> <title></title> <script type="text/javascript" src="js/login.js"></script> </head> <body> <div class="padded loginphp"> <div id="loginbox">  </div> </body> </html> </code></pre> <p>And the login.js file:</p> <pre><code>$(document).ready(function() { $('#honeyloginform').submit(function(event) { //event.preventDefault(); login(); return false; }); }); function login() { $('.errorinputfields').removeClass('errorinputfields'); if (isEmpty($('#username'))) { $('#username').addClass('errorinputfields'); $('#username').focus(); return; } if (isEmpty($('#password'))) { $('#password').addClass('errorinputfields'); $('#password').focus(); return; } $('#honeyloginform').fadeOut(100, function(){ $('#loginbox .loading').fadeIn(300, function(){ var pword = $('#password').val(); var remember = "no"; if ($('#remember').is(':checked')) { remember = "yes"; } var JSONobj = { username: $('#username').val(), password: pword, rem: remember }; $.ajax({ url: 'ajax/login.php', data: JSONobj, success: function(data) { //alert(data); var JSONobj = JSON.parse(data); if (JSONobj.Success) { Interface.login(); //just loads the landing page after login //window.setTimeout('location.reload()', 300); } else { $('#loginbox .loading').fadeOut(300,function(){ $('#honeyloginform').fadeIn(300); }); $('#username').focus(); $('#loading-message').text(JSONobj.Message).show(); } } }); }); }); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload