CODEWITHSUNDEEP
asp.netjavascriptvb.net
user42348
user42348

Reputation: 4319

Not getting value in javascript

I have a datalist and in itemdatabound iam calling javascript and passing one argument.But iam not getting that argument in js.

<asp:Button ID="btnUpload" runat="server" cssClass="button1"                                           Text="Upload" >



 <asp:DataList ID="dlView" runat="server" >
    <ItemTemplate>
    <tr>
    <td>  
    <asp:Image ID="imgPlan" runat="server" ImageUrl='<%#GetImage(Eval("ImageName")) %>' />
    </td>
    </tr>
    <tr>
    <td>  
     <asp:LinkButton ID="lnkChangeLogo" runat="server"  Text="ChangeLogo" OnClientClick="javascript:showLayerUpLoad();return  false;">
                                                    </asp:LinkButton>
                                                    <br />
      <asp:LinkButton ID="lnkRemoveLogo" runat="server" Text="RemoveLogo"  OnClientClick="javascript:ConfirmChoice();return false;"/>
      <asp:TextBox ID="txtImage" runat="server" Text='<%#Eval("ImageName") %>'></asp:TextBox>
        <asp:HiddenField ID="hdnImage" runat="server" Value='<%#Eval("ImageName")%>' />

        </td>                                               
    </tr>
    </ItemTemplate>
    </asp:DataList>

In itemdatabound i have written following code

Protected Sub dlView_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlView.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or _
        e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim txtImage As TextBox = DirectCast(e.Item.FindControl("txtImage"), TextBox)
            Dim s As String = txtImage.Text
            btnUpload.OnClientClick = String.Format("javascript:UploadImages('{0}')", s)
        End If


    End Sub

Following is my javascript fn

function UploadImages(str)
{
alert(str);
}

Problem is in itemdatabound iam getting value in String.Format("javascript:UploadImages('{0}')", s) but when clicking on btnUpload ,control is moving to UploadImages in js,but no value in str. What may be the reason for that?Can anybody help please?

Following is html result

<link href="../CSS/PopupDiv.css" rel="stylesheet" type="text/css" /></head>


        <div id="shadow" class="opaqueLayer"> </div>

<div id="question" class="questionLayer">

    <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F1ECDE">
        <tr style="height:17">
            <td style="background:url(../App_Images/bg/contentlefttop.gif)" width="26" height="17">&nbsp;</td>
            <td style="background:url(../App_Images/bg/contenttop.gif)">&nbsp;</td>
            <td style="background:url(../App_Images/bg/contentrighttop.gif)" width="26" height="17">&nbsp;</td>
        </tr>
        <tr>
            <td style="background:url(../App_Images/bg/contentleft.gif)" width="26">&nbsp;</td>
            <td bgcolor="#FFFFFF">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="text-align:justify; line-height:18px">
                            <img src="../App_Images/loading.gif" alt="Loading..."/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Please Wait While the Values Load...
                        </td>
                    </tr>
                </table>
            </td>
            <td style="background:url(../App_Images/bg/contentright.gif)" width="26">&nbsp;</td>
        </tr>
        <tr style="height:17">
            <td style="background:url(../App_Images/bg/contentleftbottom.gif)" width="26" height="17">&nbsp;</td>
            <td style="background:url(../App_Images/bg/contentbottom.gif)">&nbsp;</td>
            <td style="background:url(../App_Images/bg/contentrightbottom.gif)" width="26" height="17">&nbsp;</td>
        </tr>
    </table>

</div>

<div id="questionUpLoad" class="questionLayer">

        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#F1ECDE">
            <tr style="height:17">
                <td style="background:url(../App_Images/bg/contentlefttop.gif)" width="26" height="17">&nbsp;</td>
                <td style="background:url(../App_Images/bg/contenttop.gif)">&nbsp;</td>
                <td style="background:url(../App_Images/bg/contentrighttop.gif)" width="26" height="17">&nbsp;</td>
            </tr>
            <tr>
                <td style="background:url(../App_Images/bg/contentleft.gif)" width="26">&nbsp;</td>
                <td bgcolor="#FFFFFF">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="text-align:justify; line-height:18px">
                                <strong> File Name:</strong><br />
                                <span id="spnUpload">
                                    <input type="file" id="flUpload" />
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="submit" name="btnUpload" value="Upload" onclick="UploadImages('');" id="btnUpload" class="button1" />
                                &nbsp;
                                <input type="submit" name="btnCancel" value="Cancel" onclick="javascript:hideLayerUpLoad();return false;" id="btnCancel" class="button1" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="background:url(../App_Images/bg/contentright.gif)" width="26">&nbsp;</td>
            </tr>
            <tr style="height:17">
                <td style="background:url(../App_Images/bg/contentleftbottom.gif)" width="26" height="17">&nbsp;</td>
                <td style="background:url(../App_Images/bg/contentbottom.gif)">&nbsp;</td>
                <td style="background:url(../App_Images/bg/contentrightbottom.gif)" width="26" height="17">&nbsp;</td>
            </tr>
        </table>

    </div>



<table width="100%" cellpadding="0" cellspacing="0">
 <tr>

 <td rowspan="6" colspan="2" align="left" style="padding-right:5px; width: 125px;" >
<table id="dlView" cellspacing="0" border="0" style="border-collapse:collapse;">
    <tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl00_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/abc.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl00_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl00$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl00_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl00$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl00$txtImage" type="text" value="abc.jpg" id="dlView_ctl00_txtImage" />
    <input type="hidden" name="dlView$ctl00$hdnImage" id="dlView_ctl00_hdnImage" value="abc.jpg" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl01_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/qwe.DIhJfEPC" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl01_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl01$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl01_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl01$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl01$txtImage" type="text" value="qwe.DIhJfEPC" id="dlView_ctl01_txtImage" />
    <input type="hidden" name="dlView$ctl01$hdnImage" id="dlView_ctl01_hdnImage" value="qwe.DIhJfEPC" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl02_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/asd.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl02_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl02$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl02_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl02$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl02$txtImage" type="text" value="asd.jpg" id="dlView_ctl02_txtImage" />
    <input type="hidden" name="dlView$ctl02$hdnImage" id="dlView_ctl02_hdnImage" value="asd.jpg" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl03_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/vini.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl03_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl03$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl03_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl03$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl03$txtImage" type="text" value="vini.jpg" id="dlView_ctl03_txtImage" />
    <input type="hidden" name="dlView$ctl03$hdnImage" id="dlView_ctl03_hdnImage" value="vini.jpg" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl04_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl04_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl04$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl04_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl04$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl04$txtImage" type="text" id="dlView_ctl04_txtImage" />
    <input type="hidden" name="dlView$ctl04$hdnImage" id="dlView_ctl04_hdnImage" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl05_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/adf.jpg" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl05_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl05$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl05_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl05$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl05$txtImage" type="text" value="adf.jpg" id="dlView_ctl05_txtImage" />
    <input type="hidden" name="dlView$ctl05$hdnImage" id="dlView_ctl05_hdnImage" value="adf.jpg" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl06_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl06_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl06$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl06_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl06$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl06$txtImage" type="text" id="dlView_ctl06_txtImage" />
    <input type="hidden" name="dlView$ctl06$hdnImage" id="dlView_ctl06_hdnImage" />

    </td>                                               
</tr>
</td>
    </tr><tr>
        <td>
<tr>
<td>  
<img id="dlView_ctl07_imgPlan" src="../SiteImages/vidhya/40/1/ThumbNails/" style="border-width:0px;" />
</td>
</tr>
<tr>
<td>  
 <a onclick="javascript:showLayerUpLoad();return  false;" id="dlView_ctl07_lnkChangeLogo" href="javascript:__doPostBack('dlView$ctl07$lnkChangeLogo','')">ChangeLogo</a>
                                                <br />
  <a onclick="javascript:ConfirmChoice();return false;" id="dlView_ctl07_lnkRemoveLogo" href="javascript:__doPostBack('dlView$ctl07$lnkRemoveLogo','')">RemoveLogo</a>
  <input name="dlView$ctl07$txtImage" type="text" id="dlView_ctl07_txtImage" />
    <input type="hidden" name="dlView$ctl07$hdnImage" id="dlView_ctl07_hdnImage" />

    </td>                                               
</tr>
</td>
    </tr>
</table>
             </td>           
                  </tr>
                 <tr>
                         <td><strong style="color:#ADADAD">URL : </strong><a id="lnkUrl" target="_blank">
                                    <span id="lblUrl"></span>
                                </a></td>
                            </tr>
                        </table>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWIwKerOHHCALt3oXMAwKQ9M/rBQLf8c7OBALF9uAaAtzO1PIKAt/2m70CAvrasL4HAuDf6ooCAtzOwPcIAt/2h0IC5v+70Q0CzITOxQ8C3M6spAcC3/bDxwYCgemdpAkC5+3XyA0C3M6YqQUC3/avzAQClcS6vQkC+8jMiQUC3M6EhgMC3/bL0AoCsK2c6A4ClrLWtAkC3M7wigEC3/b3hwQCnNKn+wQCgte57wYC3M7ctw8C3/bz2g4C3/GapA8CxfbUyAMC3M6I7wgC3/bf3ww=" />
</div></form>
</body>
</html>

Upvotes: 0

Views: 818

Answers (2)

Dennis
Dennis

Reputation: 21

For the OnClientClick property on button server controls (ImageButton, LinkButton, Button) you do not use the javascript: prefix. So try to remove all your javascript: stuff and see if it works.

Ignored what I said above... LinkButton is a special case. :P

I now have a closer look at your code and the HTML output. From what I can see, there are some issues in your code:

  1. You are dynamically changing the OnClientClick property of the btnUpload server control which sits outside the DataList. Which means the OnClientClick for the btnUpload button will change each time an item is bound to the list and the result is, if it works, the last ImageName in your datasource is passed to the btnUpload's onclick attribute in the output HTML.
  2. The Eval("ImageName") seems only work when calling it from the GetImage() function for imgPlan. I am not too sure why this is happening. And because of this, the Text and Value of txtImage and hdnImage are not populated and this is why you did not get the value in the js.

Please review your code and let us know any results. :)

Upvotes: 1

lincolnk
lincolnk

Reputation: 11238

btnUpload it outside the item template for your datalast, so OnClientClick is rewritten for every item during the ItemDataBound handler. apparently for the last item in your datasource, ImageName is empty/null. move btnUpload into the item template and see if that improves the situation.

Upvotes: 0

Related Questions