attaching js files to one js file but with JQuery error !

Question

I wanted to create one js file which includes every js files to attach them to the head tag where it is.

But i am getting this error

Microsoft JScript runtime error: Object expected

this is my code:

var baseUrl = document.location.protocol + "//" + document.location.host + '/yabant/';

// To find root path with virtual directory
function ResolveUrl(url) {
    if (url.indexOf("~/") == 0) {
        url = baseUrl + url.substring(2);
    }
    return url;
}

// JS dosyalarının tek noktadan yönetilmesi
function addJavascript(jsname, pos) {
    var th = document.getElementsByTagName(pos)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', jsname);
    th.appendChild(s);
}

addJavascript(ResolveUrl('~/js/1_jquery-1.4.2.min.js'), 'head');
$(document).ready(function() {
    addJavascript(ResolveUrl('~/js/5_json_parse.js'), 'head');
    addJavascript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), 'head');
    addJavascript(ResolveUrl('~/js/4_AjaxErrorHandling.js'), 'head');
    addJavascript(ResolveUrl('~/js/6_jsSiniflar.js'), 'head');

    addJavascript(ResolveUrl('~/js/yabanYeni.js'), 'head');
    addJavascript(ResolveUrl('~/js/7_ResimBul.js'), 'head');
    addJavascript(ResolveUrl('~/js/8_HaberEkle.js'), 'head');
    addJavascript(ResolveUrl('~/js/9_etiketIslemleri.js'), 'head');
    addJavascript(ResolveUrl('~/js/bugun.js'), 'head');
    addJavascript(ResolveUrl('~/js/yaban.js'), 'head');
    addJavascript(ResolveUrl('~/embed/bitgravity/functions.js'), 'head');
});

Paths are right. I wanted to show you folder structure and watch panel:

Any help would be greatly appreciated.

Answer 1

// url=> http:  +  //  + localhost:4399  + /yabant/
//       ----     ----   --------------    --------
//     protocol + "//" +     host        + '/virtualDirectory/'
var baseUrl = document.location.protocol + "//" + document.location.host + '/yabant/';

// If there is "~/" at the begining of url, replace it with baseUrl
function ResolveUrl(url) {
    if (url.indexOf("~/") == 0) {
        url = baseUrl + url.substring(2);
    }
    return url;
}

// Attaching scripts to any tag
function addJavascript(jsname, pos) {
    var th = document.getElementsByTagName(pos)[0];
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.setAttribute('src', jsname);
    th.appendChild(s);
}

// I want to make sure jQuery is loaded?
addJavascript(ResolveUrl('~/js/1_jquery-1.4.2.min.js'), 'head');

var loaded = false; // assume it didn't first and if it is change it to true
function fControl() {
    // alert("JQUERY is loaded?");
    if (typeof jQuery == 'undefined') {
        loaded = false;
        fTry2LoadJquery();
    } else {
        loaded = true;
        fGetOtherScripts();
    }
}

// Check is jQuery loaded 
fControl();

function fTry2LoadJquery() {
    // alert("JQUERY didn't load! Trying to reload...");
    if (loaded == false) {
        setTimeout("fControl()", 1000);
    } else {
        return;
    }
}

function getJavascript(jsname, pos) {
    // I want to retrieve every script one by one
    $.ajaxSetup({ async: false,
        beforeSend: function() {
            $.ajaxSetup({ async: false });
        },
        complete: function() {
            $.ajaxSetup({ async: false });
        },
        success: function() {
            //
        }
    });

    $.getScript(ResolveUrl(jsname), function() { /* ok! */ });
}

function fGetOtherScripts() {
    // alert("Other js files will be load in this function");

    getJavascript(ResolveUrl('~/js/5_json_parse.js'), 'head');
    getJavascript(ResolveUrl('~/js/3_jquery.colorbox-min.js'), 'head');
    getJavascript(ResolveUrl('~/js/4_AjaxErrorHandling.js'), 'head');
    getJavascript(ResolveUrl('~/js/6_jsSiniflar.js'), 'head');

    getJavascript(ResolveUrl('~/js/yabanYeni.js'), 'head');
    getJavascript(ResolveUrl('~/js/7_ResimBul.js'), 'head');
    getJavascript(ResolveUrl('~/js/8_HaberEkle.js'), 'head');
    getJavascript(ResolveUrl('~/js/9_etiketIslemleri.js'), 'head');
    getJavascript(ResolveUrl('~/js/bugun.js'), 'head');
    getJavascript(ResolveUrl('~/js/yaban.js'), 'head');
    getJavascript(ResolveUrl('~/embed/bitgravity/functions.js'), 'head');
}

Answer 2

I think the issue is that jQuery isn't finished loaded when you use the $ global. According to Loading Scripts Without Blocking, this mechanism does not always preserve execution order in IE.

The simple solution is to use a static script tag to load jquery. I.E. explicitly put the HTML:

<script type="text/javascript" "/js/1_jquery-1.4.2.min.js" />

But do you really need to wait for the ready event to load the other scripts, or do you just need jQuery loaded?