I have a mvc app with a div defined like this:
<div id="ShowModify" style="display: none; background-color: silver; position: absolute; width: 300px; height: 300px"><kw:SlickUpload ID="SlickUpload1" runat="server" UploadFormId="uploadForm" ShowDuringUploadElements="cancelButton"
HideDuringUploadElements="uploadButton">
<DownlevelSelectorTemplate>
<input type="file" />
</DownlevelSelectorTemplate>
<uplevelselectortemplate>
<input type="button" value="Add File" class="addFile" />
</uplevelselectortemplate>
<FileTemplate>
<div class="first_row">
<div class="lert_row">
<kw:FileListValidationMessage ID="FileListValidationMessage1" runat="server" ForeColor="Red" />
<label>
<kw:FileListFileName ID="FileListFileName1" runat="server" />
</label>
<input name="title" type="text" class="txtfield" value="Photo Name: Max 30 Characters"
onfocus="if(this.value=='Photo Name: Max 30 Characters')this.value='';" onblur="if(this.value=='')this.value='Photo Name: Max 30 Characters';" />
<kw:FileListRemoveLink ID="FileListRemoveLink1" runat="server">
<small>[x] remove</small></kw:FileListRemoveLink>
</div>
<div class="right_row">
<textarea name="caption" cols="" rows="">Photo Caption/Description: Max 250 characters</textarea>
</div>
</div>
</FileTemplate>
<ProgressTemplate>
<table width="99%">
<tr>
<td>
Uploading
<kw:UploadProgressElement ID="UploadProgressElement1" runat="server" Element="FileCountText" />
,
<kw:UploadProgressElement ID="UploadProgressElement2" runat="server" Element="ContentLengthText">
(calculating)</kw:UploadProgressElement>
.
</td>
</tr>
<tr>
<td>
Currently uploading:
<kw:UploadProgressElement ID="UploadProgressElement3" runat="server" Element="CurrentFileName" />
, file
<kw:UploadProgressElement ID="UploadProgressElement4" runat="server" Element="CurrentFileIndex">
</kw:UploadProgressElement>
of
<kw:UploadProgressElement ID="UploadProgressElement5" runat="server" Element="FileCount" />
.
</td>
</tr>
<tr>
<td>
Speed:
<kw:UploadProgressElement ID="UploadProgressElement6" runat="server" Element="SpeedText">
(calculating)</kw:UploadProgressElement>
.
</td>
</tr>
<tr>
<td>
About
<kw:UploadProgressElement ID="UploadProgressElement7" runat="server" Element="TimeRemainingText">
(calculating)</kw:UploadProgressElement>
remaining.
</td>
</tr>
<tr>
<td>
<div style="border: 1px solid #008800; height: 1.5em; position: relative">
<kw:UploadProgressBarElement ID="UploadProgressBarElement1" runat="server" Style="background-color: #00ee00;
width: 0; height: 1.5em" />
<div style="text-align: center; position: absolute; top: .15em; width: 100%">
<kw:UploadProgressElement ID="UploadProgressElement8" runat="server" Element="PercentCompleteText">
(calculating)</kw:UploadProgressElement>
</div>
</div>
</td>
</tr>
</table>
</ProgressTemplate>
</kw:SlickUpload>
<p>
<input type="submit" value="Upload" id="uploadButton" />
<a href="javascript:kw.get('<%=SlickUpload1.ClientID %>').cancel()" id="cancelButton"
style="display: none">Cancel</a>
</p>
</div>
I have a javascript function using jquery 1.3.2 and jquery-ui-1.7.2 to show the div:
function openMe(div) {
var pos = $('#' + div).offset();
var width = $('#' + div).width();
var height = $('#' + div).outerHeight();
$('#ShowModify').css({ "left": (pos.left - (2 * (width - 28))) + "px", "top": (pos.top + height) + "px" });
$('#ShowModify').show('slide', { direction: 'right' }, 500);
}
which shows the add file and and upload button as it should. However after selecting a file to upload I don't see the file template. If I click the upload button I do see the progress template. Any idea on how I can get the file template to show up?
Thanks,
Josh
P.S. I am using the 5.2.7 build.