jQuery Parent/child Dynamic Dropdownlists Not Working Properly

Question

I have two dropdownlists in an ASP.NET web form using jQuery to populate them and re-populate the child list when the parent is changed. The parent list is loading properly but the child list is not loading or updating. The child records are stored in text files in a folder called textdata and are arranged like so:

<option>User Name</option>
<option>User ID</option>
<option>User ID Lower</option>
<option>User Email</option>
<option>User Phone</option>
<option>User Fax</option>

The parent records are also stored in a text file in a file on the root called MergeCodeGroups.txt, which is arranged in a similar fashion. Following is the page code. Does anyone see my mistake? Any help is greatly appreciated! Thanks! Mike

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="TextControl2016.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>

        <script type="text/javascript">
            // Load merge code groups and merge codes
            function loadDDLMergeCodeGroups() {
                $(document).ready(function () {
                    $("#ddlMergeCodeGroup").load("MergeCodeGroups.txt");
                });
            }

            function loadDDLMergeCodes() {
                $("#ddlMergeCodeGroup").change(function () {
                    $("#ddlMergeCode").load(encodeURI("textdata/" + $(this).val() + ".txt"));
                });
            }

        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            loadDDLMergeCodeGroups();
            loadDDLMergeCodes();
        </script>Merge Code Group
        <select id='ddlMergeCodeGroup' name='ddlMergeCodeGroup'></select>&nbsp;&nbsp;
            Merge Code&nbsp;&nbsp;
        <select id='ddlMergeCode' name='ddlMergeCode'></select>

    </div>
    </form>
</body>
</html>

Farzin Kanzi · Answer 1 · 2017-05-11T20:42:17.077

0

Your problem is probably here:

$("#ddlMergeCode").load(encodeURI("textdata/" + $(this).val() + ".txt"));

In part $(this).val() you get the value of selected option, but your options has not value. So change to this:

$("#ddlMergeCode").load(encodeURI("textdata/" + $("#ddlMergeCodeGroup option:selected").text()+ ".txt"));

edited May 11 '17 at 20:42

answered May 11 '17 at 20:26

Farzin Kanzi

3,380
2
21
23

Thanks so much for the quick reply, Farzin! I adjusted your second reference to ddlMergeCode to ddlMergeCodeGroup, being that's where we're getting the selection but unfortunately I am getting the same result. – Mike May 11 '17 at 20:39
Did you edited my answer just like current one? That was not true, I meant `$("#ddlMergeCodeGroup option:selected").text()` . – Farzin Kanzi May 11 '17 at 20:43
Yes, I copied and pasted exactly what you have. – Mike May 11 '17 at 20:46
I set a breakpoint in page load and get the following when typing that command in the immediate window: ?encodeURI("textdata/" + "SOME TEXT" + ".txt") 'encodeURI' is not declared. It may be inaccessible due to its protection level. – Mike May 11 '17 at 20:57
So do not use `encodeUrl` . change the selected text **uses name** to **user_name** or **user-name** how your file saved. you can do this: `THE-SELECTED-TEXT.replace(' ', '-');` And do not forget to change `$(this).val()` . I'm sure about this. http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery – Farzin Kanzi May 11 '17 at 21:00
The use of encodeURI should be fine. The strange thing is that this is working in IE on a different page in the same project. I am implementing TXTextControl's HTML5 editor and was having problems with this code working in browsers other than IE, so their tech support people recommended I start with a new page with nothing but this code to see if it worked outside of IE. ddlMergeCodeGroup is loading but the change event is not firing to load the ddlMergeCode dropdown. – Mike May 11 '17 at 22:23
What is your file names in **textdata** folder? I suggest you to forget the change and test this: `$(document).ready(function(){ $("#ddlMergeCode").load('FOLDER ADDRESS');.....` If that worked, then test this one: `$("#ddlMergeCode").load(encodeURI('User Name'); ....` And go ahead to complete the code. – Farzin Kanzi May 12 '17 at 20:32

jQuery Parent/child Dynamic Dropdownlists Not Working Properly

1 Answers1