Javascript function only works once

Question

I have an inline script on my page as such:

<script type="text/javascript">
    var rootPath = '<%= Url.Content("~/") %>';

    $(document).ready(function () {

        $('#logonStatus').click(function () { loadLoginForm(); });
        alert('Document Ready');
    });

    function loadLoginForm() {

        if(!serenity.tools.isStyleSheetLoaded('redmond.css')) {
            $('head').append('<%= Url.StyleTag("Redmond/redmond.css", MediaTypes.Screen) %>');
        }            

        if(!serenity.tools.elementExists($('#logonContainer'))) {
            $.ajax({
                async: false,
                cache: false,
                datatype: 'html',
                success: function (data) { $('body').append(data); },
                type: 'GET',
                url: '/Membership/LogOn'
            });
        }

        $('#logonContainer').dialog({
            modal: true,                
            hide: 'slide'
        });
    }


</script>

I also am loading a custom javascript file and the contents of it are as such:

var serenity = new function () {

$(document).ready(function () {

    jQuery.ajaxSetup({
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        }
    });

});

this.tools = new function () {

    this.isStyleSheetLoaded = function (fileName) {

        $(document.styleSheets).each(function () {
            if (this.href.toLowerCase().indexOf(fileName) != -1) {
                this.isStyleSheetLoaded = true;
                return;
            }
        });

        this.isStyleSheetLoaded = false;
    }

    this.elementExists = function (element) {
        this.elementExists = element.length != 0;
    }
}

}

The file that is being loaded by the ajax call is simply a div with an table containing input elements. The file does not contain any javascript in it whatsoever.

My problem is that the first time I call isStyleSheetLoaded it works just fine but after the file is loaded and the dialog is shown and closed I click on the link that fires the loadLoginForm function but this time it says isStyleSheetLoaded is not a function. This is showing up in all browsers, so I am 99% sure it is my problem, but I have no idea what it is. Could someone please point me in the right direction?

Thanks in advance.

Answer 1

I think your problem is the following:

you define a function "this.isStyleSheetLoaded = function (fileName)" but in his body you overwride this property "this.isStyleSheetLoaded = true;".

So after your first call of isStyleSheetLoaded the function is overwride with a boolen.

the right way could be:

    this.isStyleSheetLoaded = function (fileName) {

      $(document.styleSheets).each(function () {
        if (this.href.toLowerCase().indexOf(fileName) != -1) {
            return true;
        }
      });

    return false;
}