Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
Parag Warke  
#1 Posted : Monday, June 20, 2011 7:31:37 AM(UTC)
Parag Warke

Rank: Newbie

Groups: Member
Joined: 5/19/2011(UTC)
Posts: 4

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? Think

Edited by user Monday, June 20, 2011 7:35:18 AM(UTC)  | Reason: Not specified

Nic  
#2 Posted : Monday, June 20, 2011 10:28:06 AM(UTC)
Nic

Rank: Newbie

Groups: Member
Joined: 6/8/2011(UTC)
Posts: 1

Your main uploader in step 3 has ID="Uploader1", but your thumbnail javascript has var uploaderID = '<%= Uploader1.ClientID %>'. Both should be the same.
Besides that, I don't see when 'saveUploaderList' is called, to fill uploaderContainer :-)
Parag Warke  
#3 Posted : Monday, June 20, 2011 9:22:21 PM(UTC)
Parag Warke

Rank: Newbie

Groups: Member
Joined: 5/19/2011(UTC)
Posts: 4

Thanks Nic.

But '<%= Uploader1.ClientID %>' is used to get Uploader's reference in javascript.
It returns tabContainer_tabPnlStep3_Uploader1.

And i have called saveUploaderList() function from code behind on Step 3's Next button click. Everything is working fine except displaying images in 4th tab.

In javascript : for (var i = 0, imax = u.files().count(); i < imax; i++)
Here 'u' contains reference to Uploader1 but u.files().count() returns 0.

andreym  
#4 Posted : Monday, June 20, 2011 9:22:52 PM(UTC)
andreym

Rank: Advanced Member

Groups: Member
Joined: 6/16/2009(UTC)
Posts: 134

Was thanked: 8 time(s) in 8 post(s)
Hi Parag!

When I tried to put Image Uploader into Ajax TabContainer I found some issues which make it not possible.

When you click Next button it reloads all content inside UpdatePanel. So the new Uploader control created and the files you selected are lost.
Another issue is that most browsers kill a java applet when its parent has "display:none" style. In our Multistep Wizard Demo we have a workaround by redefine the .ui-tabs .ui-tabs-hide style:
Code:
.ui-tabs .ui-tabs-hide { display: block !important; 
	visibility: hidden !important; height: 0 !important; }

So applet stays alive in a hidden tab. But is not possible with Ajax TabControl because it hardcode style in element attributes.

Also in the code you posted the uploaderContainer element in the same tab as Uploader control. It should be in the next tab.
And you need to call updateConfirmTab function when this tab activated.
I'm not very familiar with Ajax TabControl, but it may be something similar to jQuery tabs:
Code:
			$("#wizard").tabs({
				select: function (event, ui) {
					if (ui.index == 2) {
						updateConfirmTab();
					}
				}
			});


I think it is better to use another control, which does not require UpdatePanel and provide the way to redefine style for hidden tabs.
Parag Warke  
#5 Posted : Monday, June 20, 2011 11:45:29 PM(UTC)
Parag Warke

Rank: Newbie

Groups: Member
Joined: 5/19/2011(UTC)
Posts: 4

Hi Andreym,

Thanks a lot for info. Angel

Yes it is mostly impossible to do this in Ajax TabContainer because of page loading problem. But i have implemented it with an bad idea. I have taken another Uploader(as Uploader2) in 4th tab, set its height & width to 0 (so that it wont be visible), load uploaderList in Uploader2 and run that javascript function. Selected images are displayed in 4th tab.

Now this is working perfectly in Firefox & Chrome but in IE its not.

In Firefox & Chrome when i go to 4th tab after selecting images and come back to 3rd tab i can see my selected images as it is. In short it reloads with the saved uploaderList.

But in IE it is not saving the uploaderList.

Is this problem related to cookies? Or do i have add somthing?
I have added <JavaControl Cached="true" /> in Uploader.

Please suggest.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.