Click here to Skip to main content
15,901,916 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello,everyone. I have a datalist control that shows a persons details such as his photo,name..etc. There is also an image button, which when clicked reveals a fileupload control. after i select the file to upload the image control should show the selected photo.
Now, i've already worked out the logic for showing the image. This works fine when i don't have the image inside the datalist. The problem i'm facing is my javascript does not identify the image id of the image that is inside the datalist. Following is my javascript code and the markup code...
C#
function getRandomNumber()
        {
            var randNumber=Math.random(10000);
            return randNumber;
            
        }
        function ClientUploadComplete(sender,args)
        {
            var handlerPage='<%= Page.ResolveClientUrl("~/Handlers/PreviewImageHandler.ashx") %>';
            var queryString='?randomno='+getRandomNumber();
            var src= handlerPage + queryString;
            var clientID='<%= imgMember.ClientID %>';
            document.getElementById(clientID).setAttribute("src",src);
            
        }
// The datalist control
<asp:DataList ID="dtlistEditMembers" runat="server" CssClass="dlistStyle">
               <ItemTemplate>
                   
                <asp:Image ID="imgMember" ImageUrl='<%# "~/Handlers/GetImageHandler.ashx?B_ID=" + Eval("B_ID") %>' AlternateText="No Image" runat="server" />
..............
........
.......
                <div class="EditFields">
                    <asp:Label ID="lblFullName" Text="Name:" runat="server"></asp:Label><asp:TextBox ID="txtFullName" Text='<%# Eval("Full_Name") %>' 
               </ItemTemplate>
            </asp:DataList>


The underlined control is the image control whose client id, i want.When viewing the page's source...the asp:image....is converted to this
C#
<img id="dtlistEditMembers_ctl00_imgMember" src="../../Handlers/GetImageHandler.ashx?B_ID=33" alt="No Image" style="border-width:0px;" />


so, how can i write the ClientUploadComplete function so that the variable
C#
var clientID='<%= imgMember.ClientID %>';
actually recognize the imgMember Control???

Any Help would be apreciated.
Thanks, Minghang
Posted
Comments
jim lahey 7-Nov-12 4:18am    
Can you also post the code where you call ClientUploadComplete from?
Minghang 7-Nov-12 5:30am    
the ClientUploadComplete is the client event of the asyncFileupload control.
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
OnClientUploadComplete="ClientUploadComplete" önUploadedComplete="AsyncFileUpload1_Complete" />

1 solution

replace below line

var clientID='<%= imgMember.ClientID %>';

with

var clientID= $('#dtlistEditMembers_ctl00_imgMember');

whichl will return image id ,this will really work;
 
Share this answer
 
v2
Comments
Minghang 7-Nov-12 11:05am    
thankyou neelam for the reply but it's throwing an exception...Unhandled Exception: $ is not defined
NAPorwal(8015059) 8-Nov-12 2:52am    
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

add this line in your head tag
Minghang 8-Nov-12 10:15am    
Thankyou neelam it finally works...instead of using var clientID=..., i just passed the clientid directly to document.getElementById('dtlistEditMembers_ctl00_imgMember').setAttribute("src",src);
and i put the <script src=...> that you gave me...it works wonders.
Darkqdfjkedcvxcv 4-Jul-13 19:02pm    
It is really lame method, how to do it with <%= ... %> ?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900