Error when javascript function is called: ReferenceError: is not defined

Question

I created a dropdown list dynamically. I need to add an onchange event dynamically and do a postback so I can make a database call. When I change the dropdown list item, I get the error:

ReferenceError: UpdateLocationList is not defined.

This is my javascript code:

<head runat="server">
    <title>Locations</title>
    <meta http-equiv="Content-Language" content="en-us"/>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <script src = "scripts/jquery-1.11.2.min.js" type = "text/javascript"></script>   
    <script  type="text/javascript">     
        function UpdateLocationList(obj) {
            alert('In function');
            var facilityValue = document.getElementById("FacilityTypeDDL").value;
            alert(facilityValue);
            __doPostBack('FacilityTypeDDL', facilityValue);
        }     
    </script>
</head>
<body>
<%ListLocations()%>
</body>

This is the ListLocations() method in the code behind:

Public Sub ListLocations()

        Response.Write("<div style='text-align:left;'>")
        Response.Write("<label>Facility Type:<select id='FacilityTypeDDL' name='FacilityTypeDDL' size='1' runat='server' onchange='UpdateLocationList(this)'>")

        For Each facility As ListItem In lstBoxFacilityTypes
            'Get the first value in the list and use the ID to to the list of locations below
            If String.Compare(facilityValueSelected, "") = 0 Then
                facilityValueSelected = facility.Value
            End If
            Response.Write("<option value=''" & facility.Value & "''>" & facility.Text & "</option>")
        Next

        Response.Write("</select></label>")
        Response.Write("</div>")
        Response.Write("<hr>")

    End Sub

What is missing that would cause the error that the function, UpdateLocationList, is not defined?

UPDATE I added the dropdownlist directly to the aspx page as an asp:DropDownList:

 <body>
 <form id="form1" runat="server">  
        <div style='text-align:center;'>
        <a style='text-decoration:none;font-size:16px;color:blue;background-color:white;width:200px;padding:4px;' href='LocationDetails.aspx?Location_ID=0' target='detailPanel'> Add Location
        </a></div>
        &nbsp&nbsp
        <asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
        <asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" OnSelectedIndexChanged=" FacilityTypeDDL_SelectedIndexChanged">
        </asp:DropDownList>
        <hr/>
     <%ListLocations()%>   
 </form>
</body>

Add the OnSelectedChanged event to the code behind:

Protected Sub FacilityTypeDDL_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles FacilityTypeDDL.SelectedIndexChanged
    strFacilityValue = FacilityTypeDDL.SelectedValue
    ListLocations()
End Sub

I put a breakpoint in this method and it does not stop within it. Why is my event not firing?

Look like you are making a custom DropDownList server control. The way you are doing is really fragile. What are you trying to achieve? — Win, Apr 30 '15 at 14:08
There is nothing custom about this control. It is dynamic. I am adding to an existing application. It creates a new menu when a button is clicked. This is the way the site works. What is fragile about it? — Gloria Santin, Apr 30 '15 at 14:13
It is not how we create dynamic controls in ASP.Net (unless you are working on MVC). ASP.Net is an event-based model; you do not want to directly manipulate DOM. In a nutshell, you want to use server control and add it to placeholder (or panel) dynamically. — Win, Apr 30 '15 at 14:32
I don't know how to rewrite this part of the application to do what you say. I am just trying to add to the current application. — Gloria Santin, Apr 30 '15 at 15:11

score 1 · Answer 1 · answered Apr 30 '15 at 14:02

1

In onchange, you should only give the name of the function; you should not add a function call.

Instead of attaching the event handler in the HTML code, you could better add the following to yopur script code:

$(document).ready(function() {
  $("#FacilityTypeDDL").change(UpdateLocationList);

});

Also, in

function UpdateLocationList(obj)

you can leave out the argument: you do not use it (and if you would use it, it represents the event).

answered Apr 30 '15 at 14:02

Sylvia Stuurman

137
4

Did your suggestions and it still gives me the same error. – Gloria Santin Apr 30 '15 at 14:07
What I am found is when I change the name of the function in the ListLocation function that is the name that is displayed when the error occurs. So, it is how I am implementing it in the javascript that is wrong. I tried putting the script above the closing bracket of the body but get the same error. Any other suggestions would be appreciated! – Gloria Santin Apr 30 '15 at 15:21

Gloria Santin · Accepted Answer · 2015-05-01T17:15:49.110

0

I could not get the asp:DropdownList to fire the SelectedIndexChanged event. So this is how I completed the task.

Adding the dropdown dynamically as shown above and adding the change event that calls a javascript:

onchange='UpdateLocationList()'

This function had to be put in a .js file. This web site had a .js file already. It also had some AJAX calls that I used to complete the task. In the UpdateLocationList(), I get the ID of the service type that was set as a value attribute in the dropdown. Then I use a function that is already part of the .js file to the LocationDetails page using the Service Type ID to display only the facilities of that service type. This is the function:

function updateLocationList() {
var ddlFacilityType = document.getElementById("FacilityTypeDDL");
var facilityValue = ddlFacilityType.options[ddlFacilityType.selectedIndex].value;
processAjax("/editor/Locations.aspx?Location_ID=" + facilityValue, "navPanel");

}

Works like a charm.

Thanks for all of your help.

edited May 01 '15 at 17:15

answered Apr 30 '15 at 15:50

Gloria Santin

2,066
3
51
124

Post-back is the key. As I said in the comment, you cannot simply render html mark up, and hope it will attach to a server event. Look at [this](http://stackoverflow.com/a/20663592/296861) answer; you might get an idea. – Win Apr 30 '15 at 16:10
What I thought I could do is within the markup call a javascript function, UpdateLoctionList. Then the javascript does a postback using __doPostback(). When calling this postback function, does it require the postback to be registered? – Gloria Santin Apr 30 '15 at 16:35
I changed my dropdown list event so that it is using asp:Dropdown list. But the event still is not firing. The code changes are above. – Gloria Santin Apr 30 '15 at 18:47
Please create a new question. Otherwise, all previous answers will be irrelevant. – Win Apr 30 '15 at 20:30

Error when javascript function is called: ReferenceError: is not defined

2 Answers2