Home/ Questions/Q 8709297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T04:20:01+00:00

I am experiencing the strangest behaviour on our website, and it is making things

  • 0

I am experiencing the strangest behaviour on our website, and it is making things incredibly slow.

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.

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.

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?

I would really appreciate your insight and help!

EDIT:

As requested, some code:

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:

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;
}

And then the login.php file:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/login.js"></script>        
    </head>
    <body>
        <div class="padded loginphp">
            <div id="loginbox">
                <!-- the login box comes here
            </div> <!-- #loginbox -->

        </div>
    </body>
</html>

And the login.js file:

$(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();                         
                    }
                }
            });                         
        });    
    });
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve managed to find the problem, and fix it!

    I’ve made a change to my interface layout, and as a result, the three selectors, $(self.error), $(self.content) and $(self.loading) each contain more than one element, where it always only contained one each.

    This seems to cause the callback functions to be compounded or something, as everything inside the final callback in loadContent() was called 9 times.

    So it was a simple case of redefining the selectors, so that they refer to one element each.

    • 0