Home > Forum > ASP.NET > Calling Javascript function from an asp dropdownlist

Calling Javascript function from an asp dropdownlist

by Thamil   on Oct 16, 2014   Category: ASP.NET  |  Views: 1119    |  Points: 5   |  Gold 
  Reply
I have an asp dropdownlist with a few selections and when I select a certain item from the list I want a javascript modal to open up. I have successfully been able to open the modal by using an html button after selecting the specific item from the drop down, but I want one less step.

Here is my code for the index changed event on the Drop down:
protected void ShipTo_Changed(object sender, EventArgs e)
{
foreach (DataListItem dli in cart.Items)
{
DropDownList drpShipto = (DropDownList)dli.FindControl("drpShipto");
if (drpShipto.SelectedItem.Text == "-Add New ShipTo-")
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "function", "showDialog('newShipTo')", true);
}
}
}

and here is what I have for the js :

<script>
$(document).ready(function () {
$('#newShipTo').dialog({
autoOpen: false,
draggable: true,
title: "Add New ShipTo",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});

$('#editShipTo').dialog({
autoOpen: false,
draggable: true,
title: "Edit ShipTo",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});

function showDialog(id) {
$('#' + id).dialog("open");
}

function closeDialog(id) {
$('#' + id).dialog("close");
}
</script>

I know the function works, as I can swap out the call to the function to making a button visible that with the onclick set to showDialog('newShipTo')
Am I just not calling it correctly using the RegistarStartupScript

Question posted on behalf of Joe W

Bookmark and Share:
 
  User Reply  | Ask a question  |   Reply 
  Re :Calling Javascript function from an asp dropdownlist   
by Thamil
on Oct 16 2014 10:25AM
Points : 10
Gold 
Hi Joe W,

Refer the below sample code, i'm calling the showDialog - modal popup window in the dropdown SelectedIndexChanged event in a simple way. see the below sample code
aspx page:
 <asp:DropDownList ID="ShipTo" runat="server" Height="32px" 
onselectedindexchanged="ShipTo_SelectedIndexChanged" AutoPostBack="true" Width="147px">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
</asp:DropDownList>

code behind part:
protected void ShipTo_SelectedIndexChanged(object sender, EventArgs e)
{
if (ShipTo.SelectedItem.Text == "Four")
{
//ShowDialog('newShipTo');// Call your modal popup window here
}
}

Thanks.

Recent Post

Latest Posts