Hello,
I have created a multi-step-wizard using Ajax TabContainer.
But i am not able to display thumbnails in next tab.
Here is my code :
<head runat="server" id="head1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/multistepwizard.css" />
<link href="Libraries/jquery-ui/css/smoothness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" >
var uploaderID = '<%= Uploader1.ClientID %>';
function updateConfirmTab() {
var u = $au.uploader(uploaderID),
thumbConf = {
parentControlName: u.id(),
width: '100px',
height: '100px',
javaControl: {
codeBase: u.javaControl().codeBase()
},
activeXControl: {
codeBase: u.activeXControl().codeBase(),
codeBase64: u.activeXControl().codeBase64()
}
},
html = '';
for (var i = 0, imax = u.files().count(); i < imax; i++) {
thumbConf.id = 'th' + Math.round(Math.random() * 1000000); // Generate unique id
var f = u.files().get(i);
thumbConf.guid = f.guid();
html += '<div class="thumbnail-item-outer">';
html += $au.thumbnail(thumbConf).getHtml();
html += '<div class="thumbnail-item-description">' + f.description() + '</div>';
html += '</div>';
}
var elem = document.getElementById('uploaderContainer');
elem.innerHTML = html;
}
function initCompleteHandler() {
$au.uploader(uploaderID).uploadPane().loadUploadList(1);
}
function afterUploadHandler() {
$au.uploader(uploaderID).uploadPane().resetUploadList(1);
}
function saveUploaderList() {
$au.uploader(uploaderID).uploadPane().saveUploadList(1);
updateConfirmTab();
}
function selectionChangeHandler() {
$au.uploader(uploaderID).uploadPane().saveUploadList(1);
$au.uploader(uploaderID).uploadPane().loadUploadList(1);
}
</script>
<asp:ScriptManager ID="scriptMgr" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="updatePnlMain" runat="server" EnableViewState="true">
<ContentTemplate>
<cc2:TabContainer ID="tabContainer" AutoPostBack="false" runat="server" Height="400"
Width="700" ActiveTabIndex="0" Style="margin-top: 101px" OnActiveTabChanged="tabContainer_ActiveTabChanged">
<cc2:TabPanel ID="tabPnlStep1" runat="server">
<HeaderTemplate>
Album Details 1
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlInTabStep1" Height="400" Width="700" runat="server">
Customer Name :
<asp:TextBox ID="txtCustName" runat="server"></asp:TextBox><br />
<asp:Button ID="btnNextStep1" Text="Next" runat="server" OnClick="btnNextStep1_Click" />
</asp:Panel>
</ContentTemplate>
</cc2:TabPanel>
<cc2:TabPanel ID="tabPnlStep2" runat="server">
<HeaderTemplate>
Album Details 2
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlInTabStep2" Height="400" Width="700" runat="server">
Function :
<asp:DropDownList ID="ddlFunctionType" runat="server" Width="200px">
<asp:ListItem Text="Wedding" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="Birthday" Value="1"></asp:ListItem>
<asp:ListItem Text="Reception" Value="2"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:Button ID="btnNextStep2" Text="Next" runat="server" OnClick="btnNextStep2_Click" />
</asp:Panel>
</ContentTemplate>
</cc2:TabPanel>
<cc2:TabPanel ID="tabPnlStep3" runat="server">
<HeaderTemplate>
Select Images
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlInTabStep3" Height="500px" Width="700px" runat="server">
<cc1:Uploader runat="server" ID="Uploader1" Width="100%" Height="400px" UploadButtonText=""
LicenseKey="<%$ AppSettings:ImageUploaderLicenseKey %>"
ManualRendering="false" OnFileUploaded="Uploader1_FileUploaded">
<JavaControl Cached="true" />
<Converters>
<cc1:Converter Mode="*.*=SourceFile" />
<cc1:Converter Mode="*.*=Thumbnail" ThumbnailHeight="120" ThumbnailWidth="120" />
<cc1:Converter Mode="*.*=Thumbnail" ThumbnailHeight="1500" ThumbnailWidth="1500"
ThumbnailFitMode="Fit" />
</Converters>
<ClientEvents>
<cc1:ClientEvent EventName="InitComplete" HandlerName="initCompleteHandler" />
<cc1:ClientEvent EventName="AfterUpload" HandlerName="afterUploadHandler" />
<cc1:ClientEvent EventName="SelectionChange" HandlerName="selectionChangeHandler" />
</ClientEvents>
<UploadPane ViewMode="Thumbnails">
</UploadPane>
</cc1:Uploader>
<div id="uploaderContainer">
</div> <br />
<asp:Button ID="btnNextStep3" Text="Next" runat="server" OnClick="btnNextStep3_Click" />
</asp:Panel>
</ContentTemplate>
</cc2:TabPanel>
<cc2:TabPanel ID="tabPnlStep4" runat="server">
<HeaderTemplate>
Confirm
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlInTabStep4" Height="400px" Width="700px" runat="server">
Customer Name :
<asp:Label ID="lblCustName" runat="server"></asp:Label><br />
Function :
<asp:Label ID="lblFunctionName" runat="server"></asp:Label><br />
<asp:Button ID="btnNextStep4" Text="Next" runat="server" OnClick="btnNextStep4_Click" />
<fieldset class="content-block">
<legend>Photos</legend>
<div id="thumbnails">
</div>
</fieldset>
</asp:Panel>
</ContentTemplate>
</cc2:TabPanel>
<cc2:TabPanel ID="tabPnlStep5" runat="server">
<HeaderTemplate>
Payment
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="pnlInTabStep5" Height="400" Width="700" runat="server">
<asp:Button ID="btnPayNow" runat="server" Text="Pay Now" PostBackUrl="https://secure.ebs.in/pg/ma/sale/pay/" />
</asp:Panel>
</ContentTemplate>
</cc2:TabPanel>
</cc2:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
I am trying to display selected images in <div id="uploaderContainer"> using java-script. In for loop u.files().count() returns 0.
Can anybody please tell me where am i going wrong?
Edited by user Monday, June 20, 2011 7:35:18 AM(UTC)
| Reason: Not specified