I am trying to convert a page from HTML to PDF using CFDOCUMENT.
Here is a screen shot of the original page
and here is a screen shot of the converted PDF page:
Here is the HTML of the original page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--[if gt IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<title>Big Shots Registration</title>
<meta name="description" content="PlayerSpace.Com offers state of the art league, tournament and sport event management tools combined with powerful social networking features." />
<meta name="keywords" content="league management,tournament management,sports event management,league management software,tournament management software" />
<meta name="title" content="Big Shots Registration" />
<meta name="author" content="PlayerSpace.Com">
<meta http-equiv="expires" content="Tue, 05 Nov 2013 00:00:00 E883T" />
<link rel="icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/css/stylesheets.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 8]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/fullcalendar.print.css" media="print" />
<script type='text/javascript' src="/js/plugins/jquery/jquery-1.10.2.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/plugins/cookie/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.stack.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="/js/plugins/sparklines/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="/js/plugins/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="/js/plugins/uniform/uniform.js"></script>
<script type="text/javascript" src="/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="/js/plugins/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/plugins/validation/jquery.validationEngine.js"" charset="utf-8"></script>
<script src="/js/plugins/scrollpane/jquery.jscrollpane.min.js"></script>
<script src="/js/plugins/scrollpane/mwheelIntent.js"></script>
<script src="/js/plugins/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/plugins/animatedprogressbar/animated_progressbar.js"></script>
<script type="text/javascript" src="/js/plugins/qtip/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/FixedColumns.js"></script>
<script type="text/javascript" src="/js/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-dialog/bootstrap-dialog.js"></script>
<script type="text/javascript" src="/js/plugins/pnotify/jquery.pnotify.min.js"></script>
<script type="text/javascript" src="/js/plugins/ibutton/jquery.ibutton.min.js"></script>
<script type="text/javascript" src="/js/plugins/scrollup/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="/js/plugins/autosuggest/bsn.AutoSuggest_2.1.3.js"></script>
<script type="text/javascript" src="/js/plugins/autoexpand/jquery.autosize-min.js"></script>
<script type="text/javascript" src="/js/plugins/stepywizard/jquery.stepy.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/plugins/plugindetect/plugindetect.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/js/plugins/gmap/gmap3.min.js"></script>
<script type="text/javascript" src="/js/cookies.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>
<script type="text/javascript" src="/js/charts.js"></script>
<script type="text/javascript" src="/js/pwdchkr.js"></script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>
<script type="text/javascript" src="/js/checkzip.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript" src="/js/afterajax.js"></script>
<script type="text/javascript" src="/js/aftereasytabs.js"></script>
<script type="text/javascript" src="/js/plugins/jeasyui/easyloader.js"></script>
<script type="text/javascript" src="/js/plugins/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/js/plugins/easytabs/jquery.easytabs.min.js"></script>
</head>
<body id="registration_body_wrap">
<div id="registration_wizard">
<div id="registration_body">
<div class="row-fluid">
<div class="span12">
<div class="span2"></div>
<div class="span8">
<div class="content">
<div class="workplace">
<form method="post" action="/register/index_registration.cfm?wizard_action=pay_by_check&league=678&m0dal_update=registration_wizard&submethod=checkout&teamstatus=individual&requesttimeout=5000" name="dues_form" id="validation" class="reg_verify">
<div class="row-fluid">
<div class="span12">
<h4><b class="text text-error">Registration Dues Checkout</b></h4>
<h5>Please review your dues payment information and complete the checkout form below. <b class="text text-error">Red text indicates a required answer.</b></h5>
<div class="alert alert-info">
<h4 style="margin:0px;">Main Registration</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="main_p_dues_division_id5" value="2381" id="main_p_dues_division_id5">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum6785" style="width:40px !important;" value="300" id="sum6785">
</div>
</div>
<div style="width:60%;">
<p style="font-size:110%;">
<b>Todd John</b> for <b class="label label-info ttRT" title="This is the selected division for this player.">BIG SHOTS Report (Non-Div 1) $300</b>
</p>
<input type="hidden" name="main_p_duesA" id="main_p_dues2141_A" value="300_2381">
</div>
</div>
<div class="dr" style="margin:10px 10px 20px 10px ;"><span></span></div>
<div class="alert alert-info">
<h4 style="margin:0px;">Select your donation amount (optional)</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="int_donation_collected" id="int_donation_collected" value="0.00">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum_donation" value="0" id="sum_donation" style="width:40px !important;">
</div>
</div>
<div style="width:60%;">
<div class="pull-left tac" style="margin:0px 5px 5px 0px;">
<b class="label label-warning"><h5 style="margin:2px 3px 2px 3px;">$0</h5></b>
<div></div>
<input type="radio" checked="checked" disabled name="donation" id="donation0.00" value="0.00" class="donation_radio" OnMouseOver="calc();" OnMouseOut="calc();">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Pay By Check</h4>
</div>
<div class="row-form-reg clearfix">
<div class="span6">
<label class="control-label">Total Due:</label>
</div>
<div class="span6 tar clearfix">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span></span>
<input type="text" name="totalSum" id="totalSum" value="300" readonly onmouseover="calc();" style="width:40px !important;">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Alternative Payment Arrangements</h4>
</div>
<div class="well well-small" style="margin-top:-20px;">
Please contact your director for more information on how to pay by check.
</div>
</div>
</div>
</form>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$( "#main_p_dues2141_A" ).prop( "disabled", false );
$( "#donation0.00" ).prop( "disabled", false );
$.uniform.update();
calc();
$("#e_m_row").hide();
});
function calc()
{
elem1 = document.getElementById("sum6785");
elem2 = document.getElementById("sum_donation");
elem = document.getElementById("totalSum");
elem.value = parseFloat(elem1.value ) + parseFloat(elem2.value );
}
function loadwindow()
{
var myheight = $(window).height();
var mywidth = $(window).width();
window.open(
'https://bigshotsdc41213.playerspace.com//register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1',
'mywindow',
status=0,
toolbar=0,
menubar=0,
resizable=1,
width=mywidth,
scrollbars=1,
height=myheight
);
pay_by_checkScript();
}
function pay_by_checkScript()
{
document.dues_form.target='mywindow';
document.dues_form.action='http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1';
document.dues_form.str_billing_fname.value='pay_by_check';
document.dues_form.str_billing_lname.value='pay_by_check';
document.dues_form.str_billing_address1.value='pay_by_check';
document.dues_form.city.value='pay_by_check';
document.dues_form.str_billing_phone.value='555-555-5555';
document.dues_form.str_credit_card_type.value='pay_by_check';
document.dues_form.str_credit_card_number.value='4828640590401142';
document.dues_form.str_ccv_number.value='pay_by_check' ;
document.dues_form.submit();
//window.location = "http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=registration_complete&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check"
}
$(document).on("click", "[id*=uniform-donation]", function(){
var myval = $(this).find(':radio').val();
$('#int_donation_collected').val(myval);
$('#sum_donation').val(myval);
$(this).find(':radio').prop('checked', true);
$.uniform.update();
calc();
});
$(document).on("click", ".iagree", function(){
$(this).addClass("iagreewidth");
$(this).val('');
$(this).attr("placeholder", "");
calc();
});
function showem()
{
$("#e_m_row").show();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").show();
}
$("#checkout_now").attr('value','SUBMIT FIRST INSTALLMENT PAYMENT >>');
calc();
}
function hideem()
{
$(".iagree").removeClass("iagreewidth");
$(".iagree").val('');
$(".iagree").attr('placeholder', 'Type "I AGREE" in this box to complete your order and click the "PAY THESE DUES" button.');
$("#checkout_now").attr('value','SUBMIT DUES PAYMENT >>');
calc();
$("#e_m_row").hide();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").hide();
}
}
</script>
<script>
window.onload = function() {
for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
if(document.getElementsByTagName('input').item(i).type == 'text') {
document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
};
};
};
</script>
<script type="text/javascript">
function disableEnterKey(e){
var key;
if(window.event){
key = window.event.keyCode;
} else {
key = e.which;
}
if(key == 13){
return false;
} else {
return true;
}
}
</script>
</div>
</div>
</div>
<div class="span2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I can't seem to get the pdf output to match the original. Any help would be appreciated.
In my experience PDF rendering was actually easier than I expected. What I would do is create a CFM file that just outputs the core page structure you want - so lose all of those javascript files and everything and just have the regular markup that you need on it. A normal CSS sheet should work just fine, but you might need to use CFINCLUDE to include it inline rather than relying on a link meta tag in your header.
The code to create your PDF is then as follows:
<cfdocument format="pdf"
pagetype="custom"
unit="cm"
pagewidth="21"
pageheight="29.7"
margintop="0"
marginbottom="0"
marginleft="0"
marginright="0"
filename="#pdf.path_render_page#"
overwrite="true"
fontembed="yes"
>
<cfinclude template='render_page.cfm'>
</cfdocument>
So the basic output CFM file is CFINCLUDE'd inside your CFDOCUMENT tag, makes for nice compact code and is easy to separate the PDF creation from the template. Your CFM template then would have your CSS file CFINCLUDE'd inside that too. The recursive include should work fine.
If you're wanting this to be printed out on paper then it gets a bit tricky, as you start having to work in physical measurements and not pixels, so your layout will end up being a lot of trial and error - printing one out and seeing how it looks etc.
The big gotcha is with fonts. If you want a font to be embedded in your PDF then it needs to be installed on the server machine, and referenced properly. If you open the CF admin you can view a page that lists the fonts available, and it has a few columns with different references to each font. I'm never sure which one of those columns gives the right reference for your CSS to marry up with the right font - I think it might vary depending on the font and the platform your server is running on, one of them will be right though, so again just trial and error.
Looking at your document it seems to be a form, so not sure quite how that would make sense in a straight PDF version - you'd might want to amend the layout anyway to make it more like a physical form perhaps?
Related
as i said in the title, i'm using an api, here is the html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<title>Ejemplo consumo web service con FETCH </title>
</head>
<body>
< <div class="container">
<div class="row">
<button class="btn btn-primary" id="btn-cargar">Cargar Información</button>
</div>
<div class="row">
<div id="info" class="text-center">
<h1></h1>
</div>
</div>
</div>
<script src="js/carga_1.js"></script>
</body>
</html>
and here is the code of the js
$("#btn-cargar").click(function (event) {
event.preventDefault();
var url = "https://api.punkapi.com/v2/beers/random";
fetch(url)
.then(response => response.json())
.then(data =>
{
var $nombre_cerveza = $('<h1>').text(data[0].name);
var $grados = "Grados: " + $('<p>').text(data[0].abv);
var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
$("#info").empty();
$('#info')
.append($nombre_cerveza)
.append($grados)
.append($foto_cerveza);
})
.catch(error => console.error(error));
});
it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this?
i'm sorry that all of it is in spanish
I'm trying to create a MaterialiseCSS range slider which is based on noUiSilder. The documentation says:
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
I did everyting unfortunately it is showing the defaut HTML range (like the one in the link).
My html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
<script type="text/javasript" src="js/phonefinder.js"></script>
</head>
<body class="grey lighten-4">
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
</body>
</html>
js/phonefinder.js:
$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
});
What am I doing wrong?
The noUiSlider range isn't a a input type, it should be a div.
So:
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
should be:
<form>
<div id="connect"></div>
</form>
I'm trying to use customized css on bootstrap 3, but failed. What I want is(on wide screen):
combo box located in vertical center on the left side.
The h3 Title located in center(This item is the highest).
The date mark located in bottom(This item is the shortest) on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
<![endif]-->
<style>
.vcenter {
vertical-align:middle
}
.vbottom {
vertical-align:bottom
}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
<div class="form-group">
<div class="col-md-4 vcenter">
<div class="input-group input-group-lg">
<select class="form-control">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="col-md-6">
<h3>Title</h3>
</div>
<div class="col-md-2 vbottom">
<p class="text-right"><small>2014.09.03</small></p>
</div>
</div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>
Try this:
for vertical align use display: table-cell
.vcenter {
vertical-align:middle;
display:table-cell;
}
Use inline padding-top, here is the demo
left column: height 46px, add 5 px (=(56-46)/2)
middle column: height 56px
right column: height 30px, added 26 px(=56-30)
Cons:
Should manual calculate.
This method works on wide screen. It will get extra height on mobile phone.
I'm new to using magnific popup and I'm trying to implement query.magnific-popup.js in dreamweaver cs5. I did not change a thing in the original syntax of this file but get a syntax error in:
<meta name="selected-link" value="repo_source" data-pjax-transient />
I also placed a test image with syntax online and this simply works:
<!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>Untitled Page</title>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.magnific-popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/magnific-popup.css"></script>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<div id="topnav-links">
<ul>
<li>Flexstay</li>
<li>Flexpack</li>
<li>Flexchoice</li>
<li>Flexclusives</li>
<li>Friends</li>
<li>Guiding | Car | Coach</li>
</ul>
</div>
<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image', closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Can anyone help me here? Thanks in advance.
It's very strange, I call dijit.byId() in dojo.addOnLoad(function{...}), it return undefined. In order to check if the id exist, i call dojo.byId() at the same time, it return some object. So I guess the component is not a dijit component? this is the whole code: Please help me, thanks in advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- Dojo/Diji definations -->
<link href='../dojoroot/dijit/themes/tundra/tundra.css' type='text/css' rel='stylesheet'/>
<link href='../dojoroot/dojo/resources/dojo.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- Main scripts -->
<script type="text/javascript">
dojo.addOnLoad(function()
{
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
// add the select child event to the tab panel
alert(dijit.byId("contentTabPanel")); // return no defined
alert(dojo.byId("contentTabPanel")); // return an object
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!-- Content Tab Panel -->
<div id="contentTabPanel" dojoType="dijit.layout.TabContainer" region="center">
<!-- Tab UserGroup -->
<div dojoType="dijit.layout.ContentPane" title="UserGroup">
</div>
</div>
</div>
</body>
</html>
OMFG!!!!! I know the reason!!!!! I cost 5 Hours just for this STUPID error:
I MUST write the
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
outside the dojo.addOnLoad(function() { !!!