Please take a look at the code, I’m trying to use a JS namespace. Works fine when the JS is coded in the HTML file, however it doesn’t work when I try to lift the JS into an external file. Any ideas where I’m going wrong? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JS Namespace Template Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="content.js" type="text/javascript" />
</head>
<body>
<input id='btn01' type='button' value='Do Something' /><p/>
<div id='content'></div>
</body>
</html>
var CBP = CBP || {};
CBP.g_system_name = 'CBP';
CBP.Show = {
Msg: function() {
var config = {
fname: 'fred',
lname: '',
age: '24',
postcode: 'XXX YYY'
}
CBP.Detail.Record(config);
}
}
CBP.Detail = {
Record: function(p_config) {
var fname = p_config.fname;
var lname = p_config.lname || 'unknown';
var age = p_config.age;
var postcode = p_config.postcode;
var buf = new CBP.fnStringBuilder;
buf.append('System Name: ' + CBP.g_system_name + "<br/>");
buf.append('First Name: ' + fname + "<br/>");
buf.append('Last Name: ' + lname + "<br/>");
buf.append('Age Name: ' + age + "<br/>");
buf.append('Postcode Name: ' + postcode);
$('#content').html(buf.toString());
}
}
CBP.fnStringBuilder = function() {
this.arr = [];
this.append = function(p_txt) {
this.arr.push(p_txt);
};
this.toString = function() {
return this.arr.join('');
};
}
$('document').ready(function() {
$('#btn01').click(function() { CBP.Show.Msg(); } );
});