I have a master page Default.master which contains a script tag to load Master.js.
<script src="<%= Url.Content("~/Scripts/Shared/Master.js") %>"
type="text/javascript">
</script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
Then I have a content page Upload.aspx based upon Default.master which contains a script tag to load Upload.js in the header content area.
<asp:Content ID="contentHead" ContentPlaceHolderID="HeadContent" runat="server">
<script src="<%= Url.Content("~/Scripts/Store/Upload.js") %>"
type="text/javascript"></script>
</asp:Content>
BOTH Master.js and Upload.js contain a $(document).ready(function(){...
Here is the rendered head element on the page
<head>
<link href="/Content/Default.css" rel="stylesheet" type="text/css" />
<link href="/Content/Master.css" rel="stylesheet" type="text/css" />
<link href="/Content/jQuery/smoothness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" />
<link href="/Content/Plugins/MBTooltip/MBTooltip.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/Plugins/Json/jquery.json-1.3.min.js"
type="text/javascript"></script>
<script src="/Scripts/Plugins/Dropshadow/jquery.dropshadow-1.6.js"
type="text/javascript"></script>
<script src="/Scripts/Plugins/Timers/jquery.timers-1.1.2.js"
type="text/javascript"></script>
<script src="/Scripts/Plugins/MBTooltip/mbTooltip.min.js"
type="text/javascript"></script>
<script src="/Scripts/Shared/jquery.utils.js" type="text/javascript"></script>
<script src="/Scripts/Shared/Master.js" type="text/javascript"></script>
<link href="/Content/Store.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/Store/Upload.js" type="text/javascript"></script>
</head>
And the .read() from Master.js
$(document).ready(function() {
//No selected patient to start with.
selectedPatient = null;
//ToDo: Load last active patient?
activePatient = null;
//Get/display active patient
GetActivePatient();
//Attach events
$("#patientSelectDialog").dialog({
autoOpen: false,
modal: true,
title: 'Patient Selection',
resizable: false,
width: 660,
height: 475
});
$('#btnPatientSearch').click(function() {
GetPatientList();
$("#txtPatientSearch").val("");
$("#txtPatientSearch").focus();
});
$('#txtPatientSearch').keypress(function(e) {
//ENTER
if (e.which == 13) {
GetPatientList();
$("#txtPatientSearch").val("");
$("#txtPatientSearch").focus();
}
});
$("#patientSearchList").click(function() {
GetSelectedPatient();
});
$('#btnActivatePatient').click(function() {
ActivatePatient();
});
$('#btnNewPatient').click(function() {
NewPatient();
});
$('#btnEditPatient').click(function() {
EditPatient();
});
$('#btnSavePatient').click(function() {
SavePatient(false);
});
$('#btnSaveActivatePatient').click(function() {
SaveActivatePatient();
});
$('#btnCancelPatient').click(function() {
CancelPatient();
});
//Hide patient edit initially
$('#patientEdit').hide();
/*3rd party setups*/
//MBTooltip setup
$("[title]").mbTooltip({
opacity: .90, //opacity
wait: 500, //before show
ancor: "mouse", //"parent"
cssClass: "default", // default = default
timePerWord: 70, //time to show in milliseconds per word
hasArrow: false,
color: "white",
imgPath: "images/",
shadowColor: "black",
fade: 500
});
});
And from Upload.js
$(document).ready(function() {
if (!IsPatientActive()) {
$("#fileUpload").attr("disabled", "true");
$("#btnUpload").attr("disabled", "true");
$("#noActivePatient").removeAttr("display");
}
else {
$("#noActivePatient").attr("display", "none");
}
});
I expected the $(document).ready(function(){... in Master.js to fire first since that script is loaded first, followed by the one in Upload.js. However, the Upload.js is firing first. I have verified the firing order by putting breakpoints w/ both VS2008 and Firebug.
Is there a way to control the order of firing?
Any thoughts appreciated.