We Keep Coding

AsyncFileUpload does not fire server side UploadComplete

I have an AsyncFileUpload control inside an update panel in a page that is using a master page.
When I select a file, the client side OnClientUploadComplete fires but not the server side. I searched the issue and tried different suggestions, including adding a hidden button outside update panel and "click" it on client script to force an async postback as well as modifying the "form" tag on master page to include encrypt type but nothing seems to be working.
In aspx file I have:
<script type="text/javascript">
function onClientUploadComplete(sender, e) {debugger
var ct = e.get_contentType();
var fn = e.get_fileName();
var l = e.get_length();
var p = e.get_path();
document.getElementById('uploadCompleteInfo').innerHTML = '';
__doPostBack('upnlNews', '');
}
function onClientUploadStart(sender, e) {
document.getElementById('uploadCompleteInfo').innerHTML = 'Please wait while uploading ' + e._fileName;
}
</script>
<asp:UpdatePanel runat="server" ID="upnlNews">
<ContentTemplate>
<ajaxToolkit:AsyncFileUpload runat="server" ID="fuAttchedDocs"
ThrobberID="myThrobber"
UploaderStyle="Traditional"
OnClientUploadComplete="onClientUploadComplete"
onuploadedcomplete="fuAttchedDocs_UploadedComplete"
onuploadedfileerror="fuAttchedDocs_UploadedFileError" />
<asp:Label runat="server" ID="myThrobber" Style="display: none;">
<img align="middle" alt="" src="../assets/images/6.gif" />
</asp:Label>
<div id="uploadCompleteInfo"></div><br />
</ContentTemplate>
</asp:UpdatePanel>
Additional Info
when I put a breakpoint in client side script and check the variables in Chrome Developer Tool, I see the following:
function onClientUploadComplete(sender, e) {debugger
var ct = e.get_contentType(); ==> ct = ""
var fn = e.get_fileName(); ==> fn = "spock.jpg"
var l = e.get_length(); ==> l = "NaN"
var p = e.get_path(); ==> p = "C:\fakepath\spock.jpg"
document.getElementById('uploadCompleteInfo').innerHTML = '';
__doPostBack('upnlNews', '');
}
The fact that file length shows as NaN is a bit fishy!

I found out that the UI designer had added a Search text box and button combo and had contained them in a <form>...</form> tag; so the page two <form> tags, one contained within the other (main page form tag and this one). This broke the code. I realized that when I found that even a regular button would not fire its OnClick event. After I changed the form tags to div everything worked fine.

On image click redirect to other page and play the video

I have two pages Recipe.aspx and RecipeVideo.aspx, On recipe page images will be displayed on each image click related video should be opened on RecipeVideo.aspx.
I tried this but it only Redirects to other page
<asp:ImageButton ID="ImageButton1" ImageUrl="~/images/food-trending-meal-pops-L-qw162R.jpeg" runat="server" Height="94px" Width="141px" OnClick="ImageButton1_Click" />
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
Response.Redirect("~/RecipeVideo.aspx");
}
Please can any one give an idea how to do this.

A possible solution could be -
Declare a global javascript variable like this
var videoSource= '';
It should be in an external js file outside all the functions and above all the below functions. Then let your button be like
<input type ="submit" id = "image-button" onclick ="ShowVideo('pass the src value of the corresponding video as the parameter')"/>
Then add the show video method as
function ShowVideo(source){
videoSource = source;
window.location.assign('url of second page you want to load');
}
then on second page, you can do like this
<iframe style = "Display: None" id = "video" width="854" height="480" src="" frameborder="0" allowfullscreen></iframe>
<script>
window.onload = SetVideo();
</script>
Add the method in the external js file
function SetVideo(){
document.getElementById('video').src = videoSource;
}

Setting Background of a Div in a Repeater?

First post here. I am trying to set the background image of a DIV within a asp:repeater. The image will need to change with each repeating DIV item and therefore I need to return the image URL from the database.
I can set it every time to the same image by hard coding the URL into the DIV like below:
<asp:Repeater ID="repList" runat="server" OnItemDataBound="repList_ItemDataBound">
<ItemTemplate>
<div id="bGContainer" runat="server" class="formLayout" style=" background-position:Left; width:980; background-image: url(images/image1.jpg);">
<div class="innerDiv">
<asp:Image ID="imgImage1" runat="server" />
</div>
</div>
however, what I am trying to do in the code behind is set the background to each bGContainer to the image I have within the dataset.
Here is my code behind that sets the value to an ASP:image that appears within the inner DIV:
protected void repList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.DataItem != null)
{
OnlineList currentOnlineList = (OnlineList)e.Item.DataItem;
imgImage1.ImageUrl = currentOnlineList.imageUrl;
}
}
So what I am trying to do is somehow call the bgContainer DIV and set the backgroundimage to a value in a value I return in my list.
Any ideas?
Thanks in advance!

you cant access imgImage1 directly. you have to find the control like this.
 System.Web.UI.WebControls.Image img=(System.Web.UI.WebControls.Image)e.Item.FindControl("imgImage1");
img.ImageUrl= currentOnlineList.imageUrl;

Jquery calendar does not reload after GridView is populated

I have a simple page with Jquery datepicker, UpdateProgress, and GridView inside of UpdatePanel.
Here is a fragment from the page:
...
Select From Date: <input type="text" id="datepickerfrom" name="datepickerfrom"/>
Select To Date: <input type="text" id="datepickerto" name="datepickerto"/>
<asp:Button ID="btnGetData" runat="server" OnClick="BtnGetData_Click" Text="Get Error List" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
...MyGrid...
</ContentTemplate>
</asp:UpdatePanel>
...
This is the code behind method invoked when clicking on the button:
protected void BtnGetData_Click(object sender, EventArgs e)
{
string dateFrom = HttpUtility.HtmlEncode(Request.Form["datepickerfrom"]);
string dateTo = HttpUtility.HtmlEncode(Request.Form["datepickerto"]);
InputData data = new InputData(dateFrom, dateTo);
Session["inputData"] = data;
gvErrorLog.PageIndex = 0;
LoadLogErrorData(data);
}
When I first load the page and click on one of the Date's text boxes, jQuery datepicker is poped up. When I refresh the page, it pops up as well.
However, after clicking on the button and populating the GridView with the data, it is not displayed anymore.
What can be the reason?

Your tag is
<input type="text" id="datepickerfrom" name="datepickerfrom"/>
This is really the regular html tag. Microsoft ASP.NET does NOT keep the state (ie in ViewState) of regular html tag. After postback, the page life cycle effectively creates a new instance of Page (System.Web.UI.Page) object before sending response back to browser as html.
On the other hand, once you change to
<asp:TextBox ID="datepickerfrom" runat="server" />
You will see it in postback. Also the way you capture those 2 dates in code behind is obsolete (only seen in ASP 1.1).
The namespace for your text tag is
System.Web.UI.HtmlControls.HtmlInputText and the namespace for the server tag is System.Web.UI.WebControls.TextBox. They belong to different namespaces. Any controls in the HtmlControls are for legacy purpose.
You may change to asp:TextBox and access them from code behind as follows:
protected void BtnGetData_Click(object sender, EventArgs e)
{
string dateFrom = datepickerfrom.Text; // -- updated
string dateTo = datepickerto.Text; // -- updated
InputData data = new InputData(dateFrom, dateTo);
Session["inputData"] = data;
gvErrorLog.PageIndex = 0;
LoadLogErrorData(data);
}
If you insist on your tags, you can add a hidden variable and update those hidden variable on change event of your textboxes.
I assume your textboxes are set up like the following
$(function () {
$("#<%=datepickerfrom.ClientID%>").datepicker();
$("#<%=datepickerto.ClientID%>").datepicker();
});

I finally found the answer to my problem here:
http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

Fetching photos dynamically?

I am trying to integrate a JavaScript photo album in ASP.NET (C#).
The code which I have uses hardcoded images; I want to fetch those images dynamically.
<div class="image_stack" style="margin-left:300px">
<img id="photo1" class="stackphotos" src="photos/4.jpg" >
<img id="photo2" class="stackphotos" src="photos/5.jpg" >
<img id="photo3" class="stackphotos" src="photos/6.jpg" >
</div>
I want to replace these hardcoded photos with 3 URLs fetched from a database. How can I achieve this?

One simple way:
use ASP:Image control
<asp:Image ID="photo1" class="stackphotos" runat="server" ImageUrl=" " />
<asp:Image ID="photo2" class="stackphotos" runat="server" ImageUrl=" " />
<asp:Image ID="photo3" class="stackphotos" runat="server" ImageUrl=" " />
then you can assign ImageUrl on the server Side i.e.
var obj= GetUserImages(); //method fetching image urls from db.
photo1.ImageUrl = obj.ImageUrl1;
photo2.ImageUrl = obj.ImageUrl2;
photo3.ImageUrl = obj.ImageUrl3;
2. you can simply place runat="server" attribute on your existing img tags and access them on the server side and set their url. i.e place runat="server" on your img like below
<img id="photo1" runat="server" class="stackphotos" src="photos/4.jpg" >
and then access this on server side like
photo1.Src = dbObject.Url;
3. you can dynamically insert imgs from the server side in a loop.
string imgs = string.Empty;
foreach(var item in GetAllUserImages())
{
images +="<img src='"+ item.ImageUrl +"' class='stackphotos' />";
}
div1.InnerHtml= images;
where div is
<div id="div1" runat="server">
</div>
4. you can call a webmethod (a method on your .aspx.cs page, marked with attribute [WebMethod] and call it via ajax and update your img tags in a javascript function.

Page:
<%# Page Language="C#" %>
other page content
<asp:PlaceHolder runat="server" ID="myimages" />
other page content
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
using(var db = new myDataContext()) // see linq to sql / entity framework
foreach(var i in db.ImagesTable.Select(img => new { Id = img.Id })) // ImagesTable is the name of your table with info about your images
myimages.Controls.Add(new LiteralControl(#"<img src=""myimgdir/" + i.Id + "".jpg" class=""stackphotos"" />")); // presuming that images are named according to an id in the database
}