locked
How to load second listbox with jquery RRS feed

  • Question

  • User1487175000 posted

    Hi,

    I try to load contact person list when user click on the customer listbox with jquery. But when user click on the customer listbox i get "500 Internal server error" dont know why.

    ASPX:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    <%@ Register TagPrefix="obout" Namespace="Obout.ListBox" Assembly="obout_ListBox" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
        <script type="text/javascript">
            $(function () {
                $("#<%=customerList.ClientID %>").change(function () {
                    getContactPersonLists($("#<%=customerList.ClientID %> :selected").val());
                });
            });
            function getContactPersonLists(customerID) {
                $.ajax({
                    type: "POST",
                    url: "test.aspx/getContactPersonList",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var lstCustomers = $("[id*=contactPersonList]");
                        lstCustomers.empty();
                        $.each(r.d, function () {
                            lstCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
                        });
                    }
                });
            }
    
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
        <b>Customers:</b>
        <asp:ListBox ID="customerList" runat="server" DataSourceID="dsCustomers" DataTextField="Namn" DataValueField="id"></asp:ListBox>
        <br />
        <br />
        <b>ContactPersons:</b>
        <asp:ListBox ID="contactPersonList" runat="server"></asp:ListBox>
        <asp:SqlDataSource ID="dsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="Select Distinct(B.KundID) [id], A.Namn From RumBokKund A Inner Join RumBokKundKontakt B On A.ID = B.KundID Where B.kundType&lt;&gt;0 Order By Namn ASC"></asp:SqlDataSource>
        <asp:Label ID="lbMessage" runat="server"></asp:Label>
        <asp:Label ID="lbErrorMessage" runat="server" ForeColor="Red"></asp:Label>
    </asp:Content>

    Code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Web.Services;
    
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //if (!IsPostBack)
                //loadData();
        }
        [WebMethod]
        public List<ListItem> getContactPersonList()
        {
            try
            {
                DbHandler handler = new DbHandler();
                DataTable dt = new DataTable();
                List<ListItem> contactPersonList = new List<ListItem>();
                ListItem item = new ListItem();
                dt = handler.dbQuery("Select Namn,ID From RumBokKundKontakt Where KundID=1726 AND kundType<>0 Order By Namn ASC");
                if (dt.Rows.Count > 0)
                {
                    foreach (DataRow dr in dt.Rows)
                    {
                        item.Value = dr.ItemArray[1].ToString();
                        item.Text = dr.ItemArray[0].ToString();
                        contactPersonList.Add(item);
                    }
                }
                return contactPersonList;
            }
            catch (Exception exc)
            {
                throw new Exception(exc.Message);
            }
        }
    
    }

    Thursday, April 14, 2016 9:14 PM

Answers

  • User61956409 posted

    Hi Shahid,

    i get "500 Internal server error" dont know why.

    You could try to declare the web method as static, please modify the code to this.

    [WebMethod]
    public static List<ListItem> getContactPersonList()
    {
        //your code
    }
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 1:59 AM
  • User632428103 posted

    Hello all,

    @shahid.majeed => change your for each by this : 

     foreach (DataRow dr in dt.Rows)
                    {
                        item = new ListItem();
                        item.Value = dr.ItemArray[1].ToString();
                        item.Text = dr.ItemArray[0].ToString();
                        contactPersonList.Add(item);
                    }

    move the instanciation of the new listItem in the foreach and i'm sure that you'll be work

    hope this help guy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 8:55 AM
  • User61956409 posted

    Hi Shahid,

    You could refer to the following sample to create a new item ListItem for each DataRow.

    [WebMethod]
    public static List<ListItem> getContactPersonList()
    {
        //your code
        DataTable dt = new DataTable();
        List<ListItem> contactPersonList = new List<ListItem>();
    
        dt = handler.dbQuery("Select Namn,ID From RumBokKundKontakt Where KundID=1726 AND kundType<>0 Order By Namn ASC");
    
                
        if (dt.Rows.Count > 0)
        {
            foreach (DataRow dr in dt.Rows)
            {
                ListItem item = new ListItem();
    
                item.Value = dr.ItemArray[1].ToString();
                item.Text = dr.ItemArray[0].ToString();
    
                contactPersonList.Add(item);
            }
        }
    
        return contactPersonList;
    
    }
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 8:58 AM

All replies

  • User61956409 posted

    Hi Shahid,

    i get "500 Internal server error" dont know why.

    You could try to declare the web method as static, please modify the code to this.

    [WebMethod]
    public static List<ListItem> getContactPersonList()
    {
        //your code
    }
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 1:59 AM
  • User1487175000 posted

    H fei,

    static work for me. after that i have one more problem when contact person list populated with jquery its load last contact person name in the list.

    For example:

    Customer 1 have 3 contact person. A,  b and c

    contact person list show C 3 time.  what is wrong with my populating list code in my jquery. 

    Last thing I want to pass customer id to my web method. as you see i am passing customer id to jquery method.

    Thanks in advance.

    /Shahid

    Friday, April 15, 2016 7:37 AM
  • User632428103 posted

    Hello all,

    @shahid.majeed => change your for each by this : 

     foreach (DataRow dr in dt.Rows)
                    {
                        item = new ListItem();
                        item.Value = dr.ItemArray[1].ToString();
                        item.Text = dr.ItemArray[0].ToString();
                        contactPersonList.Add(item);
                    }

    move the instanciation of the new listItem in the foreach and i'm sure that you'll be work

    hope this help guy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 8:55 AM
  • User61956409 posted

    Hi Shahid,

    You could refer to the following sample to create a new item ListItem for each DataRow.

    [WebMethod]
    public static List<ListItem> getContactPersonList()
    {
        //your code
        DataTable dt = new DataTable();
        List<ListItem> contactPersonList = new List<ListItem>();
    
        dt = handler.dbQuery("Select Namn,ID From RumBokKundKontakt Where KundID=1726 AND kundType<>0 Order By Namn ASC");
    
                
        if (dt.Rows.Count > 0)
        {
            foreach (DataRow dr in dt.Rows)
            {
                ListItem item = new ListItem();
    
                item.Value = dr.ItemArray[1].ToString();
                item.Text = dr.ItemArray[0].ToString();
    
                contactPersonList.Add(item);
            }
        }
    
        return contactPersonList;
    
    }
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 15, 2016 8:58 AM
  • User1487175000 posted

    Thanks Fei,

    its work now. When page loading i am getting exception 

    "Uncaught Error: Syntax error, unrecognized expression: input#MainContent_customerList_ctl00$MainContent$customerList"

    After resume the debug point, when i click on the list box item its shows correct customer ID and pass to AJAX to get the contact person list.

    Now i want to load the contact person list to Obout contact person list. But did not get how to do it.

    ASPX:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    <%@ Register TagPrefix="obout" Namespace="Obout.Interface" Assembly="obout_Interface" %>
    <%@ Register TagPrefix="obout" Namespace="Obout.ListBox" Assembly="obout_ListBox" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
            <script type="text/javascript">
                function customerList_SelectedIndexChanged(sender, selectedIndex) {
                    getContactPersonLists(customerList.options[customerList.selectedIndex()].value);
                }
                function getContactPersonLists(customerID) {
                    $.ajax({
                        type: "POST",
                        url: "test.aspx/getContactPersonList",
                        data: "{'customerID':'" + customerID + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: OnSuccess
                    });
                }
                function OnSuccess(response) {
                    alert(response.d);
                }
    
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
        <b>Customers:</b>
        <obout:ListBox ID="customerList" runat="server" DataSourceID="dsCustomers" DataTextField="Namn" DataValueField="id">
            <ClientSideEvents OnSelectedIndexChanged="customerList_SelectedIndexChanged" />
        </obout:ListBox>
        <br />
        <br />
        <b>ContactPersons:</b>
        <obout:ListBox ID="contactPersonList" runat="server" Height="200px"></obout:ListBox>
        <asp:SqlDataSource ID="dsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="Select Distinct(B.KundID) [id], A.Namn From RumBokKund A Inner Join RumBokKundKontakt B On A.ID = B.KundID Where B.kundType&lt;&gt;0 Order By Namn ASC"></asp:SqlDataSource>
        <asp:Label ID="lbMessage" runat="server"></asp:Label>
        <asp:Label ID="lbErrorMessage" runat="server" ForeColor="Red"></asp:Label>
    </asp:Content>
    

    Saturday, April 16, 2016 9:07 PM
  • User1487175000 posted

    Hi,

    I successfully load the contact person list. But still getting the javascript error on page load as i mention in the above post.

    Here is update ASPX:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    <%@ Register TagPrefix="obout" Namespace="Obout.Interface" Assembly="obout_Interface" %>
    <%@ Register TagPrefix="obout" Namespace="Obout.ListBox" Assembly="obout_ListBox" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
            <script type="text/javascript">
                function customerList_SelectedIndexChanged(sender, selectedIndex) {
                    getContactPersonLists(customerList.options[customerList.selectedIndex()].value);
                }
                function contactPersonList_SelectedIndexChanged(sender, selectedIndex) {
                    alert(contactPersonList.options[contactPersonList.selectedIndex()].value);
                }
                function getContactPersonLists(customerID) {
                    $.ajax({
                        type: "POST",
                        url: "test.aspx/getContactPersonList",
                        data: "{'customerID':'" + customerID + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            contactPersonList.options.clear();
                            $.each(r.d, function () {
                                contactPersonList.options.add(this['Text'],this['Value']);
                            });
                        }
                    });
                }
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
        <b>Customers:</b>
        <obout:ListBox ID="customerList" runat="server" DataSourceID="dsCustomers" DataTextField="Namn" DataValueField="id">
            <ClientSideEvents OnSelectedIndexChanged="customerList_SelectedIndexChanged" />
        </obout:ListBox>
        <br />
        <br />
        <b>ContactPersons:</b>
        <obout:ListBox ID="contactPersonList" runat="server" Height="200px">
            <ClientSideEvents OnSelectedIndexChanged="contactPersonList_SelectedIndexChanged" />
        </obout:ListBox>
        <asp:SqlDataSource ID="dsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="Select Distinct(B.KundID) [id], A.Namn From RumBokKund A Inner Join RumBokKundKontakt B On A.ID = B.KundID Where B.kundType&lt;&gt;0 Order By Namn ASC"></asp:SqlDataSource>
        <asp:Label ID="lbMessage" runat="server"></asp:Label>
        <asp:Label ID="lbErrorMessage" runat="server" ForeColor="Red"></asp:Label>
    </asp:Content>
    

    Saturday, April 16, 2016 9:54 PM
  • User61956409 posted

    Hi Shahid,

    "Uncaught Error: Syntax error, unrecognized expression: input#MainContent_customerList_ctl00$MainContent$customerList"

    Please debug your javascript code to find which code snippet causes the error.

    Best Regards,

    Fei Han

    Friday, April 22, 2016 8:09 AM