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.

Floyd · Accepted Answer · 2010-08-24 13:35:01Z

3

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

answered Aug 24, 2010 at 13:35

Floyd

1,92812 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joshlrogers Over a year ago

This was it, thank you so much. I haven't touched javascript in years and was having a problem returning a value in another function and did a search and found a blog saying that I had to set the method name to the value to return it. Thank you very much, as soon as I can I'll accept your answer.

bobince Over a year ago

+1 same goes for returning a value from elementExists. This isn't VBscript!

Collectives™ on Stack Overflow

Javascript function only works once

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related