We help IT Professionals succeed at work.

Using Eval on a dropdown to fire some javascript

amoran
amoran asked
on
1,254 Views
Last Modified: 2008-04-24
Hi

I have a asp.net website and I have a gridview on a page.
In the gridview on every row I have a drop down list and a textbox (when the row it edited)

Now I can do this ...

<asp:DropDownList ID="ddlStatus" runat="Server" DataTextField="Status" DataValueField="StatusID" SelectedValue='<%# Bind("StatusID") %>' DataSourceID="SDSStatus" AppendDataBoundItems="True" onChange='javascript: changeStatus1);'>
                            <asp:ListItem Text="Choose ..." Value=""></asp:ListItem>
                        </asp:DropDownList>  

and it will display my javascript alert fine.

<script language="javascript" type="text/javascript">
               
        <!--
        function changeStatus (cartHistoryID) {
            alert('cartHistoryID is ' + cartHistoryID);
        }
               
        //-->
    </script>

But If I try this ...


<asp:DropDownList ID="ddlStatus" runat="Server" DataTextField="Status" DataValueField="StatusID" SelectedValue='<%# Bind("StatusID") %>' DataSourceID="SDSStatus" AppendDataBoundItems="True" onChange='javascript: changeStatus(<%# Eval("CartHistoryID") %>);'>
                            <asp:ListItem Text="Choose ..." Value=""></asp:ListItem>
                        </asp:DropDownList>  

I get a syntax error.

Any ideas?
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You are mixing server and client

onChange='changeStatus(this.options(this.selectedIndex].value);'>

would be my suggestion without me understanding what Eval("CartHistoryID")  is supposed to do

Author

Commented:
CartHistoryID is the ID of the row in the table.
It allows me to know which row is calling the function.

This might help clarify (this is where CartHistoryID comes from)
Its bound to the gridview

<asp:SqlDataSource ID="sdsCustomerOrders" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
        SelectCommand="SELECT CartHistory.CartHistoryID, CartHistory.Items, CartHistory.DeliveryAddress, aspnet_Users.UserName, aspnet_Users.UserID, Status.Status, Status.StatusID FROM CartHistory, aspnet_Users, Status WHERE CartHistory.UserID = aspnet_Users.UserName AND aspnet_Users.UserID = @UserID AND CartHistory.StatusID = Status.StatusID">
        <SelectParameters>
            <asp:QueryStringParameter QueryStringField="userID" Name="UserID" />    
        </SelectParameters>
    </asp:SqlDataSource>
Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
change
'javascript: changeStatus(<%# Eval("CartHistoryID") %>);'>
into
'javascript: changeStatus(\"<%# Eval("CartHistoryID") %>\");'>

Author

Commented:
onChange='javascript: changeStatus(\"<%# Eval("CartHistoryID") %>\");'

that says invalid character
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
perhaps just
onChange='javascript: changeStatus("<%# Eval("CartHistoryID") %>");'

Author

Commented:
albert when i view the page source of your code...

 onChange="javascript: changeStatus(\&quot;&lt;%# Eval(&quot;CartHistoryID&quot;) %>\&quot;);">

Author

Commented:
mplungjan:

this
onChange='javascript: changeStatus("<%# Eval("CartHistoryID") %>");'
gives

 onChange="javascript: changeStatus(&quot;&lt;%# Eval(&quot;CartHistoryID&quot;) %>&quot;);"
Albert Van HalenAnalyst developer
CERTIFIED EXPERT

Commented:
My idea was to have the rendered javascript call (changeStatus) give the a string as parameter.

If your CartHistoryID is of type integer, then your javascript call will execute perfectly. Bu that's not the case because you get a syntax error (is CartHistoryID a guid ??) That's why I wanted to surround it with quotes.

It seems now that .NET just renders your HTML page 'as is' including the ASP databound tags.
So is it just a matter of quotes... ?

What if you try this (it's my last suggestion, otherwise I can't tell)
onChange=\"javascript:changeStatus('<%# Eval("CartHistoryID") %>');\"

So that's escaping the first quote in the javascript call, and use single quotes for the parameter...

Good luck
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
onChange="changeStatus('<%# Eval("CartHistoryID") %>')"

Author

Commented:
mplungjan:onChange="changeStatus('<%# Eval("CartHistoryID") %>')"

gives ...

Error      3      The server tag is not well formed.            

Author

Commented:
albert

onChange=\"javascript:changeStatus('<%# Eval("CartHistoryID") %>');\">

Error      4      The server tag is not well formed.            
Error      4      c:\inetpub\wwwroot\GSIShop\Backoffice\ShowCustomerOrders.aspx: ASP.NET runtime error: A call to Bind must be assigned to a property of a control inside a template.      

Author

Commented:
carthistoryid is an int by the way
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
onChange="changeStatus(<%= CartHistoryID %>)"

perhaps?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Ahh, now we are back to the beginning. Sorry...  I did not notice

SelectedValue='<%# Bind("StatusID") %>'
DataSourceID="SDSStatus" AppendDataBoundItems="True"
onChange='changeStatus(<%# Eval("CartHistoryID") %>);'>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
can ASP.Net handle this?:


SelectedValue='<%# Bind("StatusID") %>'
CartHistoryID='<%# Eval("CartHistoryID") %>'
DataSourceID="SDSStatus" AppendDataBoundItems="True"
onChange="changeStatus(this.getAttribute('CartHistoryID'))">

Author

Commented:
mplungian that last one gives me
cathHistoryID is null.

The thing is, if I add in a label in the asp.net to store the value of cartHistoryID like this ...

<asp:Label ID="lblCartHistoryID" runat="server" Text='<%# Eval("CartHistoryID") %>'></asp:Label>
                        <asp:DropDownList ID="ddlStatus" runat="Server" DataTextField="Status" DataValueField="StatusID" SelectedValue='<%# Bind("StatusID") %>' DataSourceID="SDSStatus" AppendDataBoundItems="True" onChange="changeStatus(this.getAttribute('lblCartHistoryID'))">
                            <asp:ListItem Text="Choose ..." Value=""></asp:ListItem>
                        </asp:DropDownList>  

when I view the page source it gives the span id as
ctl00_ContentPlaceHolder1_rgCustomerOrders_ctl01_ctl05_lblCartHistoryID
and not
lblCartHistoryID

<label for="ctl00_ContentPlaceHolder1_rgCustomerOrders_ctl01_ctl05_tbMessage">Order Details:</label></td><td>
                        <span id="ctl00_ContentPlaceHolder1_rgCustomerOrders_ctl01_ctl05_lblCartHistoryID">97</span>
                        <select name="ctl00$ContentPlaceHolder1$rgCustomerOrders$ctl01$ctl05$ddlStatus" id="ctl00_ContentPlaceHolder1_rgCustomerOrders_ctl01_ctl05_ddlStatus" onChange="changeStatus(this.getAttribute('lblCartHistoryID'))">
                                                <option value="">Choose ...</option>
                                                <option value="1">Processing                                        </option>
                                                <option value="2">Shipped                                           </option>
                                                <option selected="selected" value="3">Partially Shipped                                 </option>
                                                <option value="4">Cancelled                                         </option>
                                                <option value="5">Declined                                          </option>

                                          </select>
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Forced accept.

Computer101
EE Admin
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.