Custom JS function is not defined issue

Question

i have one js function called ShwoDialog() which is in search.js file. when i am running my apps then i am getting error message by firefox ReferenceError: ShwoDialog is not defined

i though may be i am calling function ShwoDialog() before loading the js file called search.js where function is defined. so i saw the html source and found that ShwoDialog() is calling after search.js file is loading.

here is one small snap of my source

<script type="text/javascript" src="/Scripts/BlockUI.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.tmpl.js"></script>
<script type="text/javascript" src="/Scripts/Search.js"></script>

<script language='javascript'> 
$(document).ready(function () { ShwoDialog(); });
</script>
</form>

i guess may be all the above js is loading when my ShwoDialog() function is calling. is there any way to ensure that i will only call my function just after completion of loading of my search.js file. is any technique is possible then please discuss with me. thanks

update

i try to do the things in this way but still no luck

<script type='text/javascript'>
function fireWhenReady() {
    if (typeof function1 != 'undefined') {
        function1();
    }
    else {
        setTimeout(fireWhenReady, 100);
    }
}
$(document).ready(fireWhenReady);
</script>

MY ShowDialog full code

function ShowDialog() {
        $("#SrchDialog")
        .html('<div class="Srchloading"></div>')
            .dialog({
                autoOpen: false,
                bgiframe: true,
                height: 542,
                width: 314,
                modal: false,
                draggable: true,
                resizable: false,
                closeOnEscape: false,
                show: {
                    effect: "fade",
                    duration: 600
                },
                hide: {
                    effect: "fade",
                    duration: 500
                },
                open: function (type, data) {
                    //$(this).dialog('destroy').remove();
                    $(this).parent().appendTo('.g8');

                    var t = $(this).parent(), w = window;
                    t.offset({
                        top: (($(window).height() - 542) / 2),
                        left: (($(window).width() - 314) / 2)
                    });
                },
                close: function () {
                    //$(this).dialog('destroy').remove();
                }
            });


        $("#SrchDialog").load('SearchFeedback.aspx', function (responseTxt, statusTxt, xhr) {
            if (statusTxt == "success") {
                sHtml = responseTxt;
                sHtml = $(sHtml).find('#SrchExtract').html();
                $sHtml = $(sHtml);
                $("#SrchDialog").html(sHtml);
                $("#SrchDialog").dialog('open').show();
                BindEvent();
            }

            if (statusTxt == "error") {
                alert("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });

    }

    function BindEvent() {
        $("input[id*='btnsrchSubmit']").live("click", function () {
            alert('send');
            return false;
        });

        $("#imgSrchclose").live("click", function () {
            $("#SrchDialog").closest('.ui-dialog-content').dialog('close');
            return false;
        });
    }

ShowDialog code as given which is defined in search.js file. when i am calling ShowDialog function on button click then it works fine but when i call at the bottom of the page then i am getting error called function undefined. please tell me what is wrong in my ShowDialog function and how to solve it.

Answer 1

<script type="text/javascript" src="/Scripts/BlockUI.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.tmpl.js"></script>
<script type="text/javascript" src="/Scripts/Search.js"></script>

<script language='javascript'> 
$(document).ready(function () { ShwoDialog(); });
</script>

Javascript will be processed in serial order, so it should even work without docuemnt.ready if your function is not using DOM .

first blockui.js will be loaded, run. then jquery is loaded and run, thus it goes in serial order and you are all good.

1. This can get interrupted if some error occurs anywhere in code, then nothing after that will be processed. Check your console for errors.

2. Also if search.js fails to load obviously the function will remain undefined. Check and ensure that searchjs is loaded, use network tab in chrome dev tools or the counterpart in firefox/ie.

3. As @joe mentioned, it can even be a scope issue.

4. Have you included jquery before using all these jquery plugins?

Answer 2

First try and see if every javascript is actually loaded, than please delete the call to the function and check if there are some other errors in the console. Also there is no need for you to use the document ready when you call the javascript in this order.